Joomla Templates: Creating a Pure CSS Template | Part 3/Page 2 - webreference.com

home / authoring / style / sheets / joomla_templates3

[previous] [next]

Software Lead – C#, .Net - INTERVIEW NOW! (IL)
Next Step Systems
US-IL-Libertyville

Justtechjobs.com

Post A Job | Post A Resume

Developer News

OpenOffice 3.2 Lands Amid Critical Changes

Red Hat, IBM Firmly in KVM Virtualization Camp

Red Hat Talks Up Open Source Cloud Plans

Joomla Templates: Creating a Pure CSS Template - Part 3

We add some CSS to style the modules with a border and a background for the module titles.

Our CSS now looks like this:

/*Compass Design typography CSS*/

* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
}
#wrap{
border:1px solid #999;
}
#header{
border-bottom: 1px solid #999;
}
#footer{
border-top: 1px solid #999;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1,.componentheading{
font-size:1.7em;
}
h2,.contentheading{
font-size:1.5em;
}
h3{
font-size:1.3em;
}
h4{
font-size:1.2em;
}
h5{
font-size:1.1em;
}
h6{
font-size:1em;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable{
margin-bottom:1em;
padding:0 10px; /*padding for inside text*/ border:1px #CCC solid;
}
.moduletable h3{
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em -10px;
/*negative padding to pull h3 back out from .moduletable padding*/ }

NOTE

Several of the menus in the default installation have a menu suffix in the module properties of _menu. To get everything behaving properly, I deleted that parameter.

This typography CSS now produces the result shown in Figure 9.6.

FIGURE 9.6 Basic template with module title styling

home / authoring / style / sheets / joomla_templates3

[previous] [next]

The Network for Technology Professionals

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

Whitepapers and eBooks

Intel Whitepaper: 2010 Intel Core vPro Processors Overview
Article: Adobe Helps PHP Developers Create Rich Internet Applications
Case Study: Microsoft IT Strengthens Security with Data Loss Prevention Solution
Article: Reduce Your Infrastructure Costs with Microsoft System Center
Intel Brief: Five-Star IT Support--Intel Core 2 processor with vPro Delivers ROI of 524 Percent
Article: Security Enhancements Abound in Windows Server 2008
Article: Enterprise Social Computing with Microsoft SharePoint 2010
Intel Whitepaper: Implementing Intel vPro Technology to Drive Down Client Management Costs

Microsoft Whitepaper: Improve Communications and Collaboration
Intel Article: Intel Core i5 vPro Brings Intelligence to the Processor
Microsoft Personalized Whitepapers and Resources for You
Microsoft Articles: Visual Studio 2010
Adobe Article: Java Developers Finding a Home at Adobe Flex
Microsoft Whitepaper: Make Better Decisions - SQL Server 2008 Business Intelligence.
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Video: How System Center Helps Reduce IT Costs
IBM Cloud Computing for Developers Virtual Event, April 6-8
Intel Video: 2010 Intel Core Processor Technologies

Microsoft Video: OCS and Exchange: Platform Futures
MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Adobe Download: Tour de Flex Application and Explore Flex
HP PartnerONE | SolutionsINFINITE Visit us at hp.com/partners/us

Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Free Adobe Online Flex Training: Check Out this Video Training Course Here
Learn Unified Communications
Learn SQL Server 2008
Learn Windows Server 2008 R2
Internet.com Hot List: Get the Inside Scoop on IT and Developer Products

Learn Forefront
Learn System Center
All About Botnets
Learn SharePoint
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

The latest from WebReference.com

Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS

Sitemap · Experts · Tools · Services · Email a Colleague · Contact

FREE Newsletters >

The latest from internet.com

IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

URL: