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  |  

$4.95 Windows Hosting at Webhost4life.com
  Need Help?  
Professional technical support for DotNetNuke is available from DotNetNuke Corporation.
 


  Ads  
OnyakTech
 


  Sponsors  

Meet Our Sponsors

DataSprings - Great Ideas. Always Flowing.
R2integrated - formerly bi4ce
Jango Studios - Skins, Modules and Hosting for DotNetNuke
eUKhost.com is commited to offer exceptional UK Windows Web Hosting solutions with quality 24x7 technical support.Our plans support ASP.Net, ASP, ASP.NET Ajax extensions, XML, MSSQL, MySQL, PHP,DNN, multiple domains and Shared SSL as standard.
SmarterTools
The Official Microsoft ASP.NET Website
 


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
15 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
1333 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
1851 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
15 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
1333 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.

 


Multipartner Virtual Data Rooms
The Virtual Data Rooms (VDR) provided by an expert advisor, far from any ordinary software company!, supporting the sellers and their consultants. Multipartner builds and services higly professional Virtual Data Rooms (VDR) specifically tailored to M&A, Real Estate and NPL deals.
www.multipartner.com
DNN SEO
Seablick Consulting specializes in DNN search engine optimization (SEO), DNN consulting, as well as support & training.
seablick.com
Intura Vision / Intura Enterprise
Point-of-Sale and business management applications targeted towards quick service, fast casual and delivery-based restaurant concepts.
www.intura.com

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