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, ...Search CSS skinning problemSearch CSS skinning problem
Previous
 
Next
New Post
9/9/2008 10:16 AM
 

Hi guys!

I am trying to apply CSS rules on the DNN:SEARCH, DNN:BREADCRUMB...etc. I found the location of the search elements and changed their CSSSelector. Then, i was able to change all about the txtSearch element, but for the cmdSearch this was not the same picture. What i meen - i can change almost of the rules, but i cant change the color, for example. I searched in many files and rules, but i cant find the problem. Please help.

 
New Post
9/9/2008 4:56 PM
 

I'm possibly not the best person to be giving advice, but these are some tricks I've come up with and found so far...

RE: Search Box:

Easiest to explain in <td>'s as you don't mention whether you're using div layouts.
I use the ascx skin method, so I can only explain as I've done it.  I also don't use the web / site radio buttons as I think the suck a little, so you'll see those disabled.

Wherever you're putting your search bar, place the following:

<td class="SearchTD" nowrap="nowrap"><dnn:SEARCH runat="server" id="dnnSEARCH" cssclass="SearchFeild" showsite="False" showweb="False" submit="&lt;img alt=&quot;Search&quot; src=&quot;searchdummy.gif&quot; width=&quot;25&quot; height=&quot;24&quot; border=&quot;0&quot;&gt;" /></td>

1. First off, I have a TD with the class "SearchTD".  This class is shown below, and basically sets the width for the TD and a background image.

2. You'll notice in the search asp control / token, I have placed "submit="&lt;img alt=&quot;Search&quot; src=&quot;searchdummy.gif&quot; width=&quot;25&quot; height=&quot;24&quot; border=&quot;0&quot;&gt;""  Might seem like a bit of gibberish, but in fact (in laymans) its html text markup for  <img alt="Search" src="searchdummy.gif" width="25" height="24" border="0">. All I've done here is place an image (in this case a transparent .gif file named searchdummy.gif) as the submit button.  You could alternatively use text, e.g. "SEARCH".

3. See the id="dnnSEARCH" - As this token has an id, you should be able to style it with CSS.  You just need to look at the ascx file for the search token to see what styles/classes are assigned to that id and overwrite them.

Simply put the following class in your skin css file:

/*-- textbox used for search -----------------------------*/
#dnn_dnnSEARCH_txtSearch.NormalTextBox {
    height: 24px;
    vertical-align: top;
    background: transparent;
    width: 165px;
    color: #666;
    padding: 5px 5px 5px 0px;
    margin: 0px 1px 0px 0px;
    border: 0px solid #FFFFFF;
    cursor: text;
}

Play around with this, you'll soon figure out what it does...

If you do ever use the showeb / showsite search features, you might also need to change the colour of the labels for these.  Simply use this in your CSS:

.SearchTD label {
    color: #FFFFFF;
}


You can check out our sites skin I whipped up quickly to see how this works.  www.mogridgedesign.co.za  Do youself a favour as well, and get the Web Developer Toolbar for Mozilla Firefox.  Or you can use the IE7 downloadable one, or the inherent IE8 one, but FF is best I think.  You can check out any classes with the click of a mouse and rewrite your own CSS to overwrite it.

DNN rule of thumb:  Portal.css beats Default.css.  Skin.css beats Portal.css.  And skinfilename.css beats Skin.css.  You can overwrite pretty much anything if you take the time to look for it.


Anyway, the full CSS for the Search Bar section below:

.SearchTD {
    width: 205px;
    padding: 0px 20px 0px 3px;
    background-image: url('BlackSearchBG.gif');
    background-position: left center;
    background-repeat: no-repeat;
    background-color: black;
}
.SearchTD label {
    color: #FFFFFF;
}

/*-- textbox used for search -----------------------------*/
#dnn_dnnSEARCH_txtSearch.NormalTextBox {
    height: 24px;
    vertical-align: top;
    background: transparent;
    width: 165px;
    color: #666;
    padding: 5px 5px 5px 0px;
    margin: 0px 1px 0px 0px;
    border: 0px solid #FFFFFF;
    cursor: text;
}



BREACDRUMBS:

Again, were're talking <td>'s here...

Put in the following into your ascx skin file:

<td class="BreadcrumbsTD"><dnn:BREADCRUMB runat="server" id="dnnBREADCRUMB" RootLevel="0" cssClass="BREADCRUMBS_object" Separator="&nbsp;&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;&nbsp;" /></td>


Then insert the following styles into your css:  You'll notice the class reference to "BREADCRUMBS_object" in the asp control / token.  Obviously here you can't use "class", you have to use "cssClass" as it a control.

/*-- Breadcrumbs ----------------------------------------------------------------------------------*/
a.BREADCRUMBS_object:active {
    color: #8f8f8f;
    font-family: tahoma;
    font-size: 11px;
    text-decoration: none;
}
a.BREADCRUMBS_object:visited {
    color: #8f8f8f;
    font-family: tahoma;
    font-size: 11px;
    text-decoration: none;
}
a.BREADCRUMBS_object:link {
    color: #8f8f8f;
    font-family: tahoma;
    font-size: 11px;
    text-decoration: none;
}
.BREADCRUMBS_object {
    color: #8f8f8f;
    font-family: tahoma;
    font-size: 11px;
    text-decoration: none;
}
a.BREADCRUMBS_object:hover {
    color: #666;
    font-family: tahoma;
    font-size: 11px;
    text-decoration: none;
}


 



Please let me know if this was at all useful - my first real attempt at answering a question... Trying to give a little back.
Might not be exactly what you're looking for and I can garuantee there are better ways of doing this (Nina Meiers is a pro who could show you how...), but its what I have on it thus far...  Probably should tell you to do more homework first rather than giving you the answers, but I believe in sharing - as long as you learn from it a share what you know in turn.

Later
Jon


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

 
New Post
9/10/2008 9:03 AM
 

Thank you very much for the back replay, Methuzala. I give you an answer now, cause i tested the situation whole day. And i discovered the problem.

First, my work was right. I did it before in the way you do it, with the little corection about - "submit="&lt;img alt=&quot;Search&quot; src=&quot;searchdummy.gif&quot; width=&quot;25&quot; height=&quot;24&quot; border=&quot;0&quot;&gt;"" This is not the right way. You can make it with CSS the whole.

At the end i was able to see my error with the help of the Developer tool. Thank you for the advice about it. The problem was that the rule for color and underline, was got from the Default.css, and i cant understand why, but i just put the same rule - a:link.... in my skin file and all is working now.

Maybe this is not the greatest way to fix it, cause you pick up the Deafult.css rule....but i cant find a way to change the relation from the cmdSearch element and the Default.css...

 

Bye for now.

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Search CSS skinning problemSearch CSS skinning problem


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