Frontpage Blog

The front page is default in blog lay-out. For the example website we have created 6 articles for the front page. Three articles are visible and the other three are visible through links at the bottom of the front page (Meer artikelen = More items).

Structure with classes and id's

div.componentheading
The class componentheading is used in over 30 Joomla source files (front page, category, section, archive, contact, mailto, newsfeed, poll, search, user). So the styles of this class will effect almost all content. In the example website we want to style the component heading the same way as the h1 style. The component heading will be visible on a page when the system parameters Page title of a menu-item is turned to yes.

We add the componentheading class to the h1 styles in the CSS document.

h1, div.componentheading {
	font-family:Arial;
	font-size: 22px;
	font-weight: bold;
	color: #660000;
	line-height: 22px;
	margin: 0 0 10px 0;
}

table.blog
The lay-out of the blog pages in Joomla 1.5 are determined by tables. There is no need to style this table for our example website.

table.contentpaneopen
When there is little content on your page the table may not have the full width of the page and the icons will not be aligned to the right. To correct this use the following style.

table.contentpaneopen {
   width: 100%;
}

td.contentheading
We want to style the content heading (heading of the article) as the h3 style for our example website. You can not use a bottom margin as we did for h3. We use padding here.

table.contentpaneopen td.contentheading {
	font-family: Arial;
	font-size: 18px;
	font-weight: bold;
	color: #660000;
	line-height: 18px;
	padding-bottom: 3px;
}

a.contentpagetitle
For our example website the article title is linked.

a.contentpagetitle, a:visited.contentpagetitle {
	font-family: Arial;
	font-size: 18px;
	font-weight: bold;
	line-height: 18px;
	padding-bottom: 3px;
}

a:hover.contentpagetitle {
	font-family: Arial;
	font-size: 18px;
	font-weight: bold;
	line-height: 18px;
	padding-bottom: 3px;
}

span.small, td.createdate en td.modifydate
These styles are used for the article info.

/* Geschreven door ...*/
span.small {
	font-family: Verdana;
	font-size: 10px;
	line-height: 10px;
	color: #666;
}

/* Gamaakt op ...*/ 
table.contentpaneopen td.createdate {
	font-family: Verdana;
	font-size: 10px;
	line-height: 10px;
	color: #666;
	padding-bottom: 5px;
}

/* Gewijzigd op ...*/
table.contentpaneopen td.modifydate {
	font-family: Verdana;
	font-size: 10px;
	line-height: 10px;
	color: #666;
}

a.readon

This style is used for the Read more links.

a.readon, a:visited.readon {
	display: block;
	font-family: Verdana;
	font-size: 12px;
	line-height: 16px;
	padding-top: 10px;
}

a:hover.readon {
	display: block;
	font-family: Verdana;
	font-size: 12px;
	line-height: 16px;
	padding-top: 10px;
}

span.article_separator
With this style you can separate articles from each other (spacer).

span.article_separator {
	display: block;
	height: 25px;
}

td.article_column
The style for each table cell filled with an article.

td.article_column {
	padding-right: 10px;
}

td.column_separator
This style only applies for the right cells of the table.

td.column_separator {
	border-left: 1px dotted #660000;
	padding-left: 10px;
}

div.blog_more
This style is used for the links to More-items.

div.blog_more {
	text-align: center;
	margin: 10px 0 0 0;
}

div.blog_more ul {
	list-style: none;
}

div.blog_more ul li { }

a.blogsection
These are the hyperlinks of the pagination of the blog page.

a.blogsection, a:visited.blogsection { }
a:hover.blogsection { }

span.pagenav
These styles are for the text of the pagination.

span.pagenav { }
a.pagenav, a:visited.pagenav {
	font-weight: bold;
}

a:hover.pagenav {
	font-weight: bold;
}

Print screen after applying CSS

• Add New

Comments (2)

• 1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden  - Re. Change Front page background colour
  Hello Marios,
  
  In the administrator backend you can give the home menu item a suffix. (see parameter system page class _suffix) Then the classes change of table class="blog_suffix" and table class="contentpaneopen_suffix". Now you can style those tables with a background-colour that is unique for the frontpage.
  Reply

• 1901-12-13 20:45:52 |Unregistered| Marios Nikitas  - Change Front page background colour
  Can you tell me how to change the background colour around the articles from white to #4d4d4d ?
  Reply

Post a commment or ask a question!

Your Contact Details:

Name:

Email: Do NOT notify meNotify me

Website:

Comment:

Title:

Message:

Security

Please input the anti-spam code that you can read in the image.

Powered by Compojoom comment 4.2.1