Joomla CSS Guide

Written by selva on December 11th, 2009

Cascading Style Sheets (CSS is a stylesheet language, which is mostly used by web designers these days. CSS can be used to style any kind of XML document, including XHTML, and XUL

It was created / made to ease the separation of content and presentation of documents. CSS can alter almost all presentation aspects of a document, like colours, font sizes and types Etc

Joomla! provides many class- and id-attributes in its XHTML output. This can be used to alter its presentation through the use of CSS definitions for said classes and ids.

This Cascading Style Sheet can also be used to improve accessibility of almost all the documents. It also provides mechanisms to present the same XML mark-up in a lot of different ways.

Expert advised regarding Joomla and CSS could be sought from Online Marketing Service companies like Cincinnati Web Design.

Joomla Template

A Joomla template is a series of files within the Joomla CMS and this controls the presentation of the content. This Joomla template is not a website it is the basic foundation design for viewing your Joomla website. Incase you want to produce a “complete” website, then this template works hand in hand with the content stored in the Joomla databases

The Joomla web site uses CSS to keep the text, background colours, headings the same throughout your site. If your content heading, your text, or background page colour  needs a colour change, then you can do it with the help of the CSS file. Also you can also change the colours of your links

Using CSS to Create a Table less Layout

One can use CSS to make a 3-column layout for the Joomla template. One can also it a fluid layout. There are two main types of web page layout fixed and fluid web page layout refer to the width of the page is controlled.

The width of the page might be a problem because of the many browser resolutions at which people surf the Web. Making a fluid layout makes your web page not to be in a narrow column in the 1024 resolution and will be visible in full on smaller monitors.

A design proper typical use tables to layout the page. This most of the times lead to longer load times and poor performance in search engines.

There are a few problems regarding

• These layouts are difficult to maintain. To change something one has to figure out what all the table tags like td/tr are doing. But with CSS there are just a few lines to inspect.
• The content in any way cannot be source-ordered. People who view with a text browser or screen reader will read the page from the top left corner to the bottom right. This only  means that they first view everything in the header and left column (for a 3-column layout) before they get to the middle column, the important stuff. A CSS layout, on the other hand, allows for “source-ordered” content.

Following are the ways to edit CSS file in Joomla CSS editor:

1. You should Log in to www.yoursitename.com/administrator
2. Then go to “site”
3. The next step would be to Choose template manager in the drop down menus
4. Then choose Site templates in the menu bar
5. Then when the page loads, put a check mark in the box next to your default template.
6. The next step would be to click “Edit CSS” in the top right hand corner.
7. Last step would be to click the disk icon to save.

This entry was posted on Friday, December 11th, 2009 at 8:22 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.