Section Specific Website Logos

Hi Micah!

We have a special "smart wrapper" surrounding our HTML that contains an algorithm which outputs classes based on section, depth, url, theme, asset type, and more. This makes it easy to target CSS to any of those special situations.

So, you should be able to just overwrite the CSS for the .sports section with the new logo.

If the header requires more than just a CSS change - like, you have to move around other elements in the header - it may require a special header file. This can be done with some conditional UTL code that switches out the header based on the current URL.

Either way, our Customer Support staff can help get this set up for you. Please contact our customer support team at 800-293-9576, or by submitting a request via our ticketing system.

And, by the way, nice logo!

Thanks!

Christine

Micah,
I was looking at the same thing for School specific sports pages for a site that's currently migrating to blox. (Christine, I think this is what you are talking about, but if there's an easier way or I got something wrong, please let me know)

I updated the site.css with code for each section/school (would love to be able to add a section_name.css file and have it automatically load when that page does... hint hint christine)
see webster_county_trojans versus the home page for the site or this page

The css below changes color scheme, background, logo, and puts an image in place of the block title (actually a background but I laid it out so the block title text is white on a white background

/* Webster County Trojans -- Added by Mike 9/24 */
#blox-html-container.webster_county_trojans {
background: url('../../images/_site/body-bg-wchs2.png') repeat-x 0 -74px #E0E0E0;}
.webster_county_trojans #blox-header-vertical-nav h2 {
background: url("../../images/_site/logo-wchs2.png") no-repeat transparent;
width:948px;
height:95px;
left:0px;
top:0px;
margin: 5px 0 5px 12px;
}
.webster_county_trojans #blox-header,
.webster_county_trojans #blox-header-vertical-nav { background-color: #75191e;}
.webster_county_trojans #extra-nav,
.webster_county_trojans #extra-nav a,
.webster_county_trojans #blox-user-panel.minimal,
.webster_county_trojans #blox-user-panel.minimal #uUser { color:#461414; }
.webster_county_trojans #blox-footer h4 {color: #dec295;}
.webster_county_trojans ul.dropdown,
.webster_county_trojans ul.dropdown li,
.webster_county_trojans #blox-footer { background: #461414;}
.webster_county_trojans ul.dropdown ul li { background: #ffeeee;}
.webster_county_trojans ul.dropdown li:hover,
.webster_county_trojans ul.dropdown li.hover,
.webster_county_trojans ul.dropdown li.active-vertical,
.webster_county_trojans ul.dropdown li.active-horizontal { background: #897c49;}
.webster_county_trojans #index-section-title {
height:94px;
background: url("../../images/_site/wchs2.jpg") no-repeat transparent;
width:600px;
height:94px;
top: -15px;
}
/* End Webster */
 
Feel free to post a follow up or email me at mstickler@messenger-inquirer.com

Yep, this is what I was thinking. =) That .section container trick gives you a lot of flexibility.

It is also possible load a specific css file for a section...

For example, in the site.inc.utl file, you could add (or ask our CS to add), something like:

if cms.url == '/sports';
cms.page.add_global_css('_site/sections/sports.css');
end;

(Note that I didn't test this, but it would be something like that.)

One thing to watch though is having too many http requests on a page (so the above code would load the sports.css file AND the site.css file, which introduces another http request). We're trying really hard to reduce the number of CSS and JS files we have in order to reduce http requests and speed up page loads.

Also, thanks for your input Mike!

We LOVE seeing customers talk amungst themselves and help each other. This is great!

I wondering which would cause a bigger performance hit; an extra http request on pages that need it or a lot of extra css (with the increase in file size) loaded for every page?

In general, extra CSS is almost always better. It is minified, gziped, put on a CDN and locally cached. An http request has to travel hundreds of miles and has potential to get caught up in all the tubes of the internet, etc. So, we feel that less http requests are almost always better.

That being said, there are a few cases where we decided to split out some CSS because it was really big and only used on a few minor places (like Online Features). So, we decided to add an extra http to that page (since it isn't the story page or the front page) in exchange for saving CSS on more important pages.

But usually, especially on front and story pages, you almost always opt to save http requests.

Hi Christine,
How can we tell if our site is already setup for a smart wrapper. This is something I may be interrested in for our news site.