CSS is used both for layout and for styling, the more you learn about CSS the easier it will be for you to create nice looking skins for mojoPortal.
The CSS Files
style.css is the main stylesheet, it imports more specific stylesheets.
stylelayout.css has all css rules for positioning, margins, padding, etc.
stylecolors.css has all css rules about colors (except border colors)
styleborders.css has all css rules for borders
styleimages.css has all css rules for images and for backround images
styletext.css has the css rules for normal size texts
styletextmedium.css has the css rules for medium size text
styletextlarge.css has the css rules for large text
IESpecific.css is a supplemental stylesheet that is only included when the browser is Internet Explorer version 6 or less
IE7Specific.css is a supplemental stylesheet that is only included on the page when the browser is Internet Explorer 7 or greater
There are also several feature specific CSS files for blogs, forums, etc. We moved the style for these features into separate files to keep the main style.css file as small as possible
Design Process
You should always design your skins using Firefox first because it it the most standards compliant browser, then if things aren't quite right in Internet Explorer you can tweak the IESpecific.css or IE7Specific.css to correct problems with the display in Internet Explorer without messing things up in Firefox.
When designing mojoPortal we did not hard code any style properties, instead we hard coded CSS class names. This way you can have complete control of the style by setting the style properties for each class name in the CSS file(s) and these style properties are applied anywhere the class name is specified. If you view the source of the web page you are working with you will see the class= property on html elements which can help you figure out which class is of interest in styling the section you are working on.
CSS Class names are defined in the CSS files with
.classname { } *Note that class names are case sensitive
You put the style properties separated by semi colons within the curly braces like this example:
.modulealtrow { background-color: #cccccc; color: #08619a;}
In addtion to CSS class names, CSS can be applied with ID selectors, we have used a few of these
IDs are specified in markup like this:
<div id="wrapwebsite"></div>
and in the CSS file it corresponds to
#wrapwebsite { }
Layout
stylelayout.css is contains the main css layout rules.
In the mojoPortal Content Management system, you can add content to the left, center or right column, but since it is optional to have content in any of the columns we needed a way to make the layout adapt to the actual content. In other words, if there is content in the left or right column then the center column needs to make room for it and if there is no content in the left or right the center should expand and use up the space. Of course if we are using a Vertical menu in the left column (or right column) the center also needs to make room for it even if there is no other content in that column.
The main CSS classes and ID selectors in the included skins that affect layout are:
#wrapwebsite { }
#wrapcenter { }
#wrapfooter { }
#breadcrumb { }
#pageedit { }
.leftside { }
.center-nomargins { }
.center-rightandleftmargins { }
.center-rightmargin { }
.center-leftmargin { }
.rightside { }
What you need to understand about these is that there are 3 placeholders in layout.Master, divLeft, divCenter, and divRight which will be populated by content from the content management system. For any given page, the content system may include content in any of these placeholders and the content system will adjust the CSS class name used for divCenter depending on what content actually exists for the specific page and also whether the divLeft or divRight contains the Menu.
Example Scenarios:
If the page has the Menu in divLeft or any other content in divLeft, and no content in divRight, then the divCenter will be assigned the CSS class center-leftmargin
If the page has the Menu in divRight or any other content in divRight and no content in divLeft, then divCenter will be assigned the CSS class center-rightmargin
If the page has the Menu in divLeft or any other content in divLeft, and also has content and/or a Menu in divRight, then the divCenter will be assigned the CSS class center-rightandleftmargins
If the page has no content and no Menu in both divLeft and divRight, then divCenter will be assigned the CSS class center-nomargins
Also if divLeft or divRight have no content and no Menu, the Visible property of the div will be set to false, completely removing it from the markup.
So essentially each page can have 1, 2, or 3 columns depending on what is in the content system for the page and the style properties for these classes define how those columns will be laid out.
In the included skins, the main technique we have used is to set a fixed width on .leftside and .rightside and then set margins on .center-leftmargin, .center-rightmargin, and .center-rightandleftmargins to make room for the divLeft and/or divRight
Style
When designing mojoPortal we did not hard code any style properties, instead we hard coded CSS class names. This way you can have complete control of the style by setting the style properties for each class name in the CSS file(s) and these style properties are applied anywhere the class name is specified. Most of the class names in the CSS files are easy to understand what they affect by their name, but if you are unsure, you can view the source of the web page you are working with you will see the class= property on html elements which can help you figure out which class is of interest in styling the section you are working on.
CSS Class names are defined in the CSS files with
.classname { } *Note that class names are case sensitive
You put the style properties separated by semi colons within the curly braces like this example:
.modulealtrow { background-color: #cccccc; color: #08619a;}
Note that you can do all kinds of things like assign background images and borders, fonts, colors using CSS. You really should invest in a few good books to help you learn how to make good looking standards compliant web designs if you're not a CSS guru already.
Last Updated 2007-05-22 Joe Audette