Forums (Obsolete)

Design and CSS styles

Version 5.x > Design and CSS styles > Mutliple CSS Files in a Design

View modes:

Member

Member

Armysniper89 - 7/24/2010 8:40:21 PM

Mutliple CSS Files in a Design

I have a design thrown at me that has multiple CSS files. One is a Global style sheet for the major parts of the site. Then I have a CSS for a master page template for the home page and another for the master page for the remainder of the site's pages. How can I apply all three styles to the site? Normally I would add link styles to the master page (as they are in it right now) and that would work. I would like to migrate this master page to a Page Template in Kentico and have it use Portal Pages versus ASPX. How can I accomplish this with the multiple CSS that wont work if merged into a single CSS.

Member

Member

gavin.eggheaddesign - 7/26/2010 3:18:03 AM

RE:Mutliple CSS Files in a Design

Hi

1 - When you say "Normally I would add link styles to the master page" is this to an external stylesheet or using 'global' method (i.e <STYLE TYPE="text/css">
/* CSS in here */
</STYLE>)?

You could link them in the master template header region which all the other pages could inherit.

2 - Not clear on what you mean "I would like to migrate this master page to a Page Template" are the template details not under page properties > template? or is your website currently in ASPX?

Thanks

Gavin

Kentico Developer

Kentico Developer

Kentico_IvanaT - 7/26/2010 6:09:41 AM

RE:Mutliple CSS Files in a Design

Hi.
You can create the main stylesheet in Site Manager – Development – CSS stylesheets – Edit “your_site”.

This global setting can be overwritten, so you can use different stylesheet for each template (CMS Desk –Content - Properties tab -> General, in field CSS stylesheet).
You can create these two stylesheets in Site Manager – Development – CSS stylesheets New CSS stylesheet.
For more information please check: CSS overview

Also you can link stylesheets in CMS Desk – Content – “your_site” – Edit – Master page

And I suggest you to read a part of Developer’s guide about Visual inheritance.

Best Regards,

Ivana Tomanickova

Member

Member

Armysniper89 - 7/26/2010 9:19:19 AM

RE:Mutliple CSS Files in a Design

Thanks for all of these ways Ivana. First Kentico installation.

In our current design there is a Global.css that references all the global styles that apply to all templates. Then there is a style sheet for the home which is linked to in the master page along with the global.css. There is also a style sheet for the sub pages which like the home page is linked in along with the global. So I am looking for the most optimal yet flexible way of handling this going forward. I want to give my editor the ability to add and remove styles so I want to use the styles in the Kentico Site Manager. Our current design unfortunately is broken up that way and many others we have had in the past. Is there a way to achieve back end changes to the CSS and have two defined for a page?

If no, I would ask this be a supported feature in the future. Although multiple CSS is a performance hit, many designs use multiple CSS files.

Kentico Developer

Kentico Developer

Kentico_IvanaT - 7/27/2010 4:30:12 AM

RE:Mutliple CSS Files in a Design

Hi

Your editor could add or remove styles in CMS Desk – Content - Properties of your_page – Template – Edit template properties - Header by putting <link rel="stylesheet" href="/styles.css" type="text/css">

Alternatively you could create your custom control web part visible only for editor role. Please check this
[url=http://devnet.kentico.com/Knowledge-Base/Design-and-css/How-to-change-CSS-stylesheet-per-document-alias-pa.aspx ]example[/url].
To else part of this example you should add same drop-down menu with available css files and also change if condition to work with item selected in drop-down menu.

Does such a solution fulfil your requirement, or the requested scenario is different in some fundamental way? If so, could you please clarify?

Best Regards,

Ivana Tomanickova

Member

Member

Armysniper89 - 7/27/2010 11:04:26 AM

RE:Mutliple CSS Files in a Design

Thanks for getting back to me. The requirement is for the editor to add or create styles themselves to change things on the fly. In our current site, we had to give them access to the CSS files. One of the big selling features was to use Kentico's ability to have the CSS defined within the system not in files. So in order to migrate our current site over we need to have support for more than one CSS. We have a global style sheet and ones that are specific to the home and sub pages. Home page would have a link to Global.css and Home.css and the sub pages would have links to the Global and SubPages.css files. I think I solved this...think because I have not finished work on it yet...

We are using portal engine. So we have the master page for the root assigned to the subpages master page and in its Header section I have added the SubPages.css file and left Global.css defined for the site.

Then for the Home page we have a separate Page Layout defined as a Master Page that supports the home page exclusively and that has a link for the Home.css file.

This should work right? I have all of the CSS added to the Kentico system so if the editor changes the CSS, I should see the changes made.

Member

Member

Armysniper89 - 7/27/2010 3:02:33 PM

RE:Mutliple CSS Files in a Design

On a related note... :)

Since my current design is handled by two master pages, one for home and one for all the rest...would be best to assign the master page for the home to the ROOT or the one for the sub pages?

If you go to www.bridgespan.org and then click on one of the articles you can see that they are similar but not enough to have complete reuse of a single master page for top and bottom pieces.

Thanks!

Kentico Developer

Kentico Developer

Kentico_IvanaT - 7/28/2010 3:18:57 AM

RE:Mutliple CSS Files in a Design

Hi.

In general, each page will inherit css file defined in the root (if it is master page tab in head section). If you want to apply a different stylesheet to same page, you can link or create a different css in Properties - Template - Edit Template - Header. To avoid problems with the same name of class in this css and higher level css you can define !important property in this css (http://www.electrictoolbox.com/using-important-css/)

So to the root I would assign css for the sub pages and in header of home page I would link home.css with !important property.

Best Regards,

Ivana Tomanickova


Member	Armysniper89 - 7/28/2010 3:12:11 PM RE:Mutliple CSS Files in a Design This topic should be about Kentico 5.x...can you move it there? :)


Kentico Developer	kentico_ivanat - 7/29/2010 5:34:39 AM RE:Mutliple CSS Files in a Design done :)


Member	sueannlaib6nyo-gmail - 8/2/2010 5:58:37 AM RE:Mutliple CSS Files in a Design "You can create the main stylesheet in Site Manager – Development – CSS stylesheets – Edit “your_css”." Nice post, the site is very informative specially to the all of the newbie.

Top