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="<img alt="Search" src="searchdummy.gif" width="25" height="24" border="0">" /></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="<img alt="Search" src="searchdummy.gif" width="25" height="24" border="0">"" 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=" >> " /></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