Adding a variable class to #wrapwebsite

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
2/1/2011 3:15:07 PM
Gravatar
Total Posts 46

Adding a variable class to #wrapwebsite

I am trying to implement a design that has significant differences between the home page and other pages.

Adding a class to the wrapwebsite div would allow me to style separately for the home page. I'm not sure how to implement that or what kind of scripting is possible in layout.master. Ideally, I'd like to take something like the page name (prior to the ".aspx" of the page that's loaded and make that a class. The end result would be:

 

<div id="wrapwebsite" class="home">

...

</div>

 

Any suggestions on how to accomplish this?


Thanks   /Bob

2/2/2011 6:30:21 AM
Gravatar
Total Posts 18439

Re: Adding a variable class to #wrapwebsite

Hi Bob,

I have a wish list item in our project tracker to try and find a way to add a per page class.

In the mean time the best solution we have is that you can use different skins on different pages. You can enable per page skins in site settings then a skin dropdown will appear in page settings, so you can use a different skin on your home page.

Hope it helps,

Joe

2/2/2011 10:07:29 AM
Gravatar
Total Posts 46

Re: Adding a variable class to #wrapwebsite

Thanks, Joe. It does help.

Does the concept of having different skins per page add a lot of load to the system? If so, could I architect a solution that two skins load most of the same CSS files that would be located at a higher-level directory - perhaps, \data\sites\#\styles\ - as opposed to being in the specific skins folder?


The reason I ask is that I am running into some performance issues which are partially my client's choice of host.

Anything that would lighten the load would be most welcome.


Cheers   /Bob

2/3/2011 11:10:14 AM
Gravatar
Total Posts 18439

Re: Adding a variable class to #wrapwebsite

I think any additional load from using different skins would be negligible. You should make sure you have Css caching enabled on the server and in the browser, if you disabled that during design you should re-enable it. Good hosting makes all the difference for performance.

Yes, you can organize your CSS so that common stuff comes from a common location, see this page especially towards the bottom of the page.

http://www.mojoportal.com/understanding-the-styleconfig-file.aspx

In fact I do that on this site, most pages use the site default skin but the Community page uses a slightly wider right column, but most of the CSS is shared in common between both skins.

Hope it helps,

Joe

 

2/5/2011 1:17:08 AM
Gravatar
Total Posts 46

Re: Adding a variable class to #wrapwebsite

Thanks again. I implemented as you suggested and it worked like a charm. The performance is really good, too.

Bob

You must sign in to post in the forums. This thread is closed to new posts.