Tweaking template CSS, part two: Adding a graphic logo file The logo in the header of this template consists of formatted text.. Basically, it involves uploading an image file and adding
Trang 1[ 297 ]
What just happened?
Because all main colors have changed, the site will look very different from the default
output of the Lightframe template Tweaking the colors is a quick way to customize the looks
of your site:
Download at Wow! eBook
WWW.WOWEBOOK.COM
Trang 2In CSS you have several options to specify colors; a quick and easy way is using common English names that are available for a limited set of a few hundred
colors For an overview, see http://www.w3schools.com/HTML/
html_colornames.asp Once you get into building websites you'll probably want to use hexadecimal color values (such as #FFFFFF for white), that offers
millions of color values Hexadecimal (or hex) color values start with a hash
symbol and consist of a combination of six letters or numbers See
http://www.w3schools.com/Html/html_colors.asp
Tweaking template CSS, part two: Adding a graphic logo file
The logo in the header of this template consists of formatted text It retrieves this text from
the Site Name that you have specified in the Joomla! Global Configuration when setting up
the site Let's replace this with a graphic logo file In Chapter 4 you have already applied this trick to another template Basically, it involves uploading an image file and adding the CSS code to point to that file
Creating an image file
First, prepare an image file in your favorite graphic editor software Don't worry if you don't have Photoshop or another fancy graphics program; there are some great online solutions available You may want to try Pixlr, a free editor that you use directly in your web browser Just go to www.pixlr.com/editor and click on Create a new image Create
a file with a width of 600 pixels and a height of 120 pixels Add a background color (we've chosen #ffa700 as the color value) You can use the Airstrip font (if you installed it on your computer in Chapter 4 it will be available in Pixlr's font list) and add some slogan text:
Trang 3[ 299 ]
The image file should look similar to the example in the following screenshot:
Time for action – replace the header text with an image
1. Let's upload the logo image file and make the template point to this image In your FTP program, browse to the folder templates/tem_lightframe and create a new subfolder called images Upload a logo file with the name sruplogo.png
to this images folder
2. In the Joomla! backend, change the stylesheet to refer to the new image file
Navigate to Extensions | Template Manager and click on tem_lightframe.
Select the CSS file template_css.css and click on Edit.
3. In the CSS editor, find the # logo style rule It looks like this:
#logo {
width:240px;
height:120px;
float:left;
position:relative;
}
4. Change the width of #logo from 240px to 760px; this will make the logo
background box cover the full width of the main content area
5. Add a background using a combination of the logo image and a background color The style definition should look as follows:
#logo {
background: url( /images/sruplogo.png);
repeat:no-repeat;
background-color:orange;
width: 760px;
height:120px;
float:left;
position:relative;
}
Download at Wow! eBook
WWW.WOWEBOOK.COM
Trang 46 Click on Apply and click on Preview to see the results so far Okay, this is not really
what we had in mind! The text logo displays on top of the new logo image:
7. To make the text logo disappear, we'll change one last bit of CSS In the CSS editor, find the style that starts with this code:
#logo a:link,
#logo a:visited {
Change it by adding the display: none declaration This means the element will not
be displayed at all in the browser:
#logo a:link,
#logo a:visited {
display:none;
background:#DDECEF;
color:#87AAAe;
text-decoration:none;
font-size:40px;
position:absolute;
padding:20px;
font-weight:bold;
top:25px;
left:5px;
border:5px solid white;
}
Trang 5[ 301 ]
8 Click on Save and click on Preview.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Trang 6What just happened?
Mission accomplished! You've successfully changed the looks of the SRUP site You've
changed the color scheme and made the CSS file point to a new logo image file To prevent the site name to display on top of the new logo, you've made the original logo text invisible
When you learn more about CSS you'll find that there are many techniques
to achieve certain design goals The solution we've chosen here to replace a
header text by an image is certainly not the only possibility Do a Web search
for "CSS image replacement" to find out more about this technique and some alternative methods
Have a go hero – tweak the layout to your taste
Feeling confident? Why don't you have a look around in the CSS editor to find out what other changes you can make to enhance the design Explore the stylesheet to get familiar with the layout elements in the template and the styles assigned to them Maybe you want to change the width of the main content area (#content) and the right-hand side column (#right)
If you find the big grey block below the header takes up to much space, you can change the height of #whitebar to a smaller value to make it a less conspicuous graphical element within the overall page design Here's an example of the #whitebar set to 30px (30 pixels):
Diving deeper into Joomla! CSS tweaking
In the previous examples, you've changed some CSS styles in the Joomla! editor—but you might be wondering how you find out which particular CSS styles you have to edit in order to get the desired effect Joomla! uses dozens of different styles and templates, and extensions developers can throw in any number of additional styles How do you find out, for example, that the main content block is styled through the #content style?
Trang 7[ 303 ]
In Joomla!, your best chance is to go to the Template Editor and try to figure out what's the appropriate style by analyzing at the CSS stylesheet But there's a much easier way It does require you to use the Firefox browser along with a web development plugin called Firebug Both are open-source software and cost you nothing If you want to edit the Joomla! template CSS more than once, you should really consider using this nifty set of tools I'll show you the benefits right now; you can read along without actually using Firefox and Firebug to see if you like this approach and if you find it worthwhile to start using them
Time for action – editing CSS on the fly using Firebug
Let's say you want to make the text-size of article headings bigger Now how do you find out the name of the style that you have to edit? We'll check this out the Firebug way:
1. Open the frontend of your Joomla!-powered website in the Firefox browser
Activate Firebug by clicking on the Firebug icon (in the bottom right corner of the browser window) In the bottom half of the browser window, the Firebug screen is displayed, showing both the HTML source and the CSS of the current web page
2. In the normal browser screen, click on the heading THIS YEARS MEETING to see the
current HTML and CSS displayed in the Firebug window below The CSS secret is revealed; this heading is styled by h2.contentheading
Download at Wow! eBook
WWW.WOWEBOOK.COM
Trang 83. In the Firebug Style window, edit h2.contentheading by changing font-size: 18px; to font-size: 40px; The effects of your edits are immediately shown
in the browser window:
The huge font size is probably not what you're after Just enter different values until you're pleased with the output you see
What just happened?
The Firefox extension Firebug enables you to analyze and edit the CSS of any site in your browser This way, you can edit the CSS and immediately see the effects Firebug doesn't store your edits; it doesn't have access to your Joomla! template If you're happy with any changes you've made, you can copy the new code and change the current Joomla! template accordingly in the Joomla! CSS editor
Trang 9[ 305 ]
Expanding your CSS toolkit
If you're convinced Firefox and Firebug are indispensable CSS tools, browse to
www.mozilla.org to download and install the Firefox browser You'll find the Firebug plugin at www.getfirebug.org, along with more elaborate instructions on getting the most out of it
Firebug is arguably one of the most powerful and popular web development browser add-ons, but there are many more plugins available designed to help you understanding and tweaking CSS code Examples are CSS viewer for Firefox and Internet Explorer Developer Toolbar for Microsoft Internet Explorer You may want to do a Web search to pick your favorite set tools
Expanding your CSS knowledge
Do you want to get deeper into the fine art of creating and editing stylesheets? You'll find plenty of helpful resources on the Web Just search for "CSS tutorial" or take a look at:
1 The basic tutorial article CSS from the Ground Up: www.wpdfd.com/issues/70/ css_from_the_ground_up
2 The CSS Tutorial: http://www.csstutorial.net/introductionCSS.php
3 W3Schools' CSS tutorials, examples and demo's: http://www.w3schools.com/ css/css_intro.asp
Editing the template HTML
If you want to make some more fundamental changes to a template, Joomla! allows you
to edit the HTML There's an HTML editor available in the Joomla! backend, just like the CSS editor screen If you want, you can thoroughly change the template code You can add, change, delete, or move any existing page element—columns, header, and footer, whatever you like Of course, you should only do this if you know your way around in HTML; don't risk messing up the site layout
Even if you're not aiming to immerse yourself in the nitty gritty of HTML, being able to change the template HTML directly in Joomla! is still useful It allows you to change or remove unwanted items that are sometimes "hard coded" (that is, a fixed part of the HTML code) into the template, such as a footer text or copyright notice
Download at Wow! eBook
WWW.WOWEBOOK.COM
Trang 10Time for action – removing the fixed footer text
At the bottom of the page there's a hyperlink to the template designers website:
Let's delete it:
1. Navigate to Extensions | Template Manager Select tem_lightframe and click on Edit.
2. In the next screen, click on the Edit HTML button You're taken to the
HTML editor screen.
3. In the editor, find this text and delete it:
<p> Design and Joomla! 1.5 template development by CMS Lounge
<a href="http://www.cmslounge.com/"> </ a> </ p>
4. Click on Save and click on Preview; the footer text has disappeared.
What just happened?
Using Joomla!'s HTML editor screen, you can change the template HTML In this case you've removed the copyright notice Some template developers kindly ask you to display a link to their site in exchange for their free template In that case, you shouldn't remove this text
Backing up and restoring a customized template
Editing a template directly in Joomla! is a great way to tweak the layout as you go You're able to apply changes in the backend and immediately preview the effects of every
adjustment you've made However, there is a drawback: all changes in the template files are only stored on the web server If for some reason you were to re-install the template, these changes would be lost