$('<link>')
.appendTo($('head'))
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', 'Content/Resources/Stylesheets/header.css');
$(document).ready(function(){
$( "#logo" ).wrap( "" );
$( ".search-bar" ).wrap( "" );
/* To add div between the logo and search box*/
$( "#header").append("");/* this div is compulsory*/
/* to add text*/
$( "#header").append("<div class='pull-left margin20'> </div>");
$( "#header").append("<div class='div-clr pull-left'>div 1</div>");
$( "#header").append("<div class='div-clr pull-left'>div 2</div>");
$( "#header").append("<div class='div-clr pull-left'>div 3</div>");
$( "#header").append("<img src='Skins/default/stylesheets/Images/small.png' />");
});
#header{background:#242E83 !important;border-top:10px solid #ffffff !important;border-bottom:10px solid #fff !important;padding:10px !important;height:78px !important;}
.search-filter{ background:#00928F !important; }
.search-submit-wrapper{ background:url('../../../Skins/default/stylesheets/Images/SearchIcon.png') no-repeat scroll center center, none repeat scroll 0 0 #00928f !important; }
#body{ top:79px !important; }
#search-field{background:#fff !important; }
.div-clr{background: #006fb7;color:#fff;margin-right:10px;padding:2px;}
.pull-left{float:left; max-height:45px;min-height:45px;}
.margin20{ margin-left: 20%;}
.marginright5{margin-right:5px;}
.img{height: 55px;
position: relative;
top: -9px;
width: auto;}
straygoat wrote:I've just tried using this to add the text to the right of the logo, but it only added the text to the top left, even with the css style sheets in place.
straygoat wrote:I noticed that in your skin, you have a transparent logo image - why is that?
/*Topics.css changes*/
div.MCBreadcrumbsBox_0
{
background-color: #020033;
}
.dropDownHotspot.dropDownHotspotFooter:link
{
font-weight: normal;
}
.dropDownHotspot:hover
{
color: #E68F11;
}
.dropDownHotspot.dropDownHotspotFooter:hover
{
font-weight: bold;
font-family: Arial, sans-serif;
color: #fff;
}
.dropDownBody
{
border-bottom: solid 1px #E68F11;
}
.toggler:link {
color: #1A6690;
}
dorcutt wrote:Is this a bug with Flare, or am I missing something obvious? It might very well be the latter.
Nita Beck wrote:@Dave,
Finally am getting around to using your skin customization technique. I actually could not get it to work as you've documented on your blog. For example, no matter what I did, the Search box (although it did move out of the nav pane in tablet and mobile output) kept ending up behind the toolbar, and the logo persisted in staying centered. However, if I add your skin css code directly to my master stylesheet instead of in a separate skin.css and then point your skin script to look for the styles in the master stylesheet instead of in "skin.css", it all works.
Thanks again for leading the way with this technique.
jimgilliam wrote:How do I put HTML (it's a simple unordered list) in the script so that it shows beside the logo in the output? Do I change the ".text(document.title)" to ".html(document.title)"?
$(document).ready(function(){
/* (1) This adds a title (div#header-title) to the header area after the logo (#header>a) for the normal desktop layout */
$("#header>a").after('<div id="abcnavdiv1"></div>');
$( "#abcnavdiv1" ).html( '<div class="abcnavdiv"><ul class="abcnav"><li><a href="index.html">Home</a></li><li><a href="crm_help.html">CRM</a></li><li><a href="crs_help.html">CRS</a></li><li class=""><a href="#" class="">DataTrak</a><ul class=""><li><a href="dt_help.html">Help</a></li><li><a href="dt_releases.html">Release Notes</a></li></ul></li><li><a href="ep_help.html">Employee Portal</a></li><li><a href="mfee_releases.html">MFEE</a></li><li class=""><a href="#">MYiCLUBonline</a><ul class=""><li><a href="mico_help.html">Help</a></li><li><a href="mico_releases.html">Release Notes</a></li></ul></li><li><a href="obc_help.php">OBC</a></li><li><a href="web_services.html">Web Services</a></li></ul></div>' );
$("#header>a").after('<div id="header-title"><b>HELLO</b></div>');
$("#header-title").text(document.title);
$("div#responsiveHeader>a").attr("href", "http://www.google.com/");