Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Styling the DNN Search BarStyling the DNN Search Bar
Previous
 
Next
New Post
6/23/2008 3:19 PM
 

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" enableviewstate="False"></asp:TextBox>&nbsp;
<asp:LinkButton ID="cmdSearch" Runat="server" CausesValidation="False" CssClass="SkinObject"></asp:LinkButton>


Shebang Websites - A product of Mogridge Design
Hey, we're partnered with UntangleMyWeb.com

 
New Post
6/23/2008 4:52 PM
 

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 Strohl

Upendo Ventures Upendo Ventures
DNN experts since 2003
Official provider of the Hotcakes Commerce Cloud and SLA support
 
New Post
6/23/2008 8:46 PM
 

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 2:46 PM
 

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


Shebang Websites - A product of Mogridge Design
Hey, we're partnered with UntangleMyWeb.com

 
New Post
6/24/2008 3:16 PM
 

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


Will Strohl

Upendo Ventures Upendo Ventures
DNN experts since 2003
Official provider of the Hotcakes Commerce Cloud and SLA support
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Styling the DNN Search BarStyling the DNN Search Bar


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, 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 DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out