Small width layout Medium width layout Maximum width layout Small text Medium text Large text
     Search
Downloads Downloads Directory Directory Forums Forums Forge Forge Blogs Blogs        Marketplace Marketplace Careers Program Careers
Community › Forums Register  |  

AppTheory specializes in solutions based on the DotNetNuke platform and has 2 employees on the DotNetNuke Core Team.
  Need Help?  
Professional technical support for DotNetNuke is available from DotNetNuke Corporation.
 


  Ads  
Aspose - The .NET & Java component publisher
 


  Sponsors  

Meet Our Sponsors

OnyakTech
The best choice for your web site host, email hosting, and domain registration.
CrystalTech Web Hosting™
Webhost4life, specialists in DNN hosting
Mad Development is a full service interactive agency focusing on the merge of design, technology, e-commerce, and affiliate marketing by providing total website solutions.
AspDotNetStoreFront - E-Commerce by Design - The Leading ASP.NET shopping cart platform for developers!
 


DotNetNuke Forums
 
  Forum  General DotNetN...  Make it Hot! ( ...  Styling the DNN Search Bar
Previous Previous
 
Next Next
New Post 6/23/2008 12:19 PM
User is offline Methuzala
8 posts
www.mogridgedesign.co.za
10th Ranked


Styling the DNN Search Bar 

I just know someone has the answer for this one...

I've been on a mission to style the DNN Search Bar <dnn:SEARCH> control.

So...

Got the #dnn_dnnSEARCH_cmdSearch.SkinObject and #dnn_dnnSEARCH_txtSearch.NormalTextBox CSS styling down without too many hassles, but what about changing the colour of the "Web" and "Search" labels by just using the skin.css file??  I tried the following in my CSS.

#dnn_dnnSEARCH_optWeb.SkinObject {
    font-weight: normal;
    font-size: 11px;
    color: #FFFFFF;
    font-family: Tahoma,Arial,Helvetica;
    text-decoration: none;
}
#dnn_dnnSEARCH_optSite.SkinObject  {
    font-weight: normal;
    font-size: 11px;
    color: #FFFFFF;
    font-family: Tahoma,Arial,Helvetica;
    text-decoration: none;
}

This did not work.

Then I tried (just for sh*ts):

.dnn_dnnSEARCH_optWeb.SkinObject {
    font-weight: normal;
    font-size: 11px;
    color: #FFFFFF;
    font-family: Tahoma,Arial,Helvetica;
    text-decoration: none;
}
.dnn_dnnSEARCH_optSite.SkinObject  {
    font-weight: normal;
    font-size: 11px;
    color: #FFFFFF;
    font-family: Tahoma,Arial,Helvetica;
    text-decoration: none;
}

And that only worked in IE.

Anybody??  All I want to do here is change the colour of the text without changing the "Label" or "SkinObject" classes throughout my site.
I've checked out DNNCreatives Video tutorial - Which covers everything except what I want to do.

I'm also not interested in changing the Search ascx file for this site as I want to impliment this css in future skin releases.

ASCX File's source I refer to is:

<%@ Control language="vb" CodeFile="Search.ascx.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Controls.Search" %>
<asp:RadioButton ID="optWeb" runat="server" CssClass="SkinObject" GroupName="Search" Text="Web" />
<asp:RadioButton ID="optSite" runat="server" CssClass="SkinObject" GroupName="Search" Text="Site" />

<asp:TextBox id="txtSearch" runat="server" CssClass="NormalTextBox" Columns="20" maxlength="255" enablev13wstat3="False"></asp:TextBox>&nbsp;
<asp:LinkButton ID="cmdSearch" Runat="server" CausesValidation="False" CssClass="SkinObject"></asp:LinkButton>

 
New Post 6/23/2008 1:52 PM
User is offline Will Strohl
1331 posts
Orlando.DotNetNukeUG.Net/
6th Ranked




Re: Styling the DNN Search Bar 

I don't have time to give you a great example, but you shouldn't be looking at the User Control to determine the CSS inheritance.  You should instead be looking at a rendered DNN page.  Look at the rendered HTML source and approach it that way.  This is necessary, as the rendered HTML most often looks much different from the User Control (skin) files.  For instance, you do not see "<asp:RadioButton" in the rendered HTML, but instead see a radio button, and a label.


Will LinkedIn profile
StrohlSiteDesign.com | My Blog | DotNetNuke® Skins by SSD
Google Toolbar Button for DNN | Suggested DNN Upgrade Paths
ODUG Web Site
 
New Post 6/23/2008 5:46 PM
User is offline ROBAX
1776 posts
5th Ranked


Re: Styling the DNN Search Bar 

If the search thingy is sitting within a tag classed as .SkinObject, then:

.SkinObject label {} will do the text labels

If you want to target only the search and not other skin objects on the same page then you should put your own class on whatever tag surrounds it.

e.g. <td class="search">searchythingy</td>

then use

.search label {} for the text labels

Use whatever you need to target whatever bits you want to style in there:

.search input {} for the radio buttons

.search .NormalTextBox {} for the text field

and so on.

Rob

 
New Post 6/24/2008 11:46 AM
User is offline Methuzala
8 posts
www.mogridgedesign.co.za
10th Ranked


Re: Styling the DNN Search Bar 

Hey Guys

Both of your suggestions helped here.
The Skin Object was sitting in a TD with the class <td class="serachtd"></td>, and
so in my skin.css file, I set a class

.searchtd label {
    color: #FFFFFF;
}

which sorted itself out.

Thanks

 
New Post 6/24/2008 12:16 PM
User is offline Will Strohl
1331 posts
Orlando.DotNetNukeUG.Net/
6th Ranked




Re: Styling the DNN Search Bar 

I am pleased to help - and I know Robax is too.  I am glad that your problem is solved.


Will LinkedIn profile
StrohlSiteDesign.com | My Blog | DotNetNuke® Skins by SSD
Google Toolbar Button for DNN | Suggested DNN Upgrade Paths
ODUG Web Site
 
Previous Previous
 
Next Next
  Forum  General DotNetN...  Make it Hot! ( ...  Styling the DNN Search Bar
 


Forum Policy

These Discussion Forums are dedicated to the discussion of the DotNetNuke Web Application Framework.

For the benefit of the community and to protect the integrity of the project, please observe the following posting guidelines:

1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DotNetNuke.
2. Discussion or promotion of DotNetNuke product releases under a different brand name are strictly prohibited.
3. No Flaming or Trolling.
4. No Profanity, Racism, or Prejudice.
5. Site Moderators have the final word on approving/removing a thread or post or comment.
6. English language posting only, please.

 


DNN Outsourcing
50% more affordable services comparing to Western Europe and US: Custom DotNetNuke module development, skins, consulting, maintainence... Over 15.000 working hours of experience in custom DotNetNuke Solutions development, 8 years experience in outsourcing, excellent references!
www.dnnoutsourcing.com
Expressnet - DotNetNuke Hosting
Expressnet provide premium quality ASP.NET Web Hosting. We specialise in Windows based products including ASP.NET and Microsoft SQL Server. We offer fantastic value packages for DotNetNuke hosting. We also offer free asp.net web hosting
www.expressnet.com.au
Softech Development, Inc.
We help your business work smarter with DotNetNuke. Whether you need a new implementation, a custom module or skin for an existing implementation, or integration with your business processes, Softech has the experience and expertise to make it happen.
www.softechdevelopment.com

DotNetNuke Corporation   Terms Of Use  Privacy Statement
DotNetNuke®, DNN®, and the DotNetNuke logo are trademarks of DotNetNuke Corporation
Hosted by MaximumASP