Thông tin tài liệu
Chapter 11 [ 297 ] What just happened? Because all main colors have changed, the site will look very dierent from the default output of the Lighrame template. Tweaking the colors is a quick way to customize the looks of your site: Download at Wow! eBook WWW.WOWEBOOK.COM Creang an Aracve Design: Working with Templates [ 298 ] In CSS you have several opons 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 oers millions of color values. Hexadecimal (or hex) color values start with a hash symbol and consist of a combinaon of six leers or numbers. See http://www.w3schools.com/Html/html_colors.asp. Tweaking template CSS, part two: Adding a graphic logo le The logo in the header of this template consists of formaed text. It retrieves this text from the Site Name that you have specied in the Joomla! Global Conguraon when seng up the site. Let's replace this with a graphic logo le. In Chapter 4 you have already applied this trick to another template. Basically, it involves uploading an image le and adding the CSS code to point to that le. Creating an image le First, prepare an image le in your favorite graphic editor soware. Don't worry if you don't have Photoshop or another fancy graphics program; there are some great online soluons 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 le 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: Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 11 [ 299 ] The image le 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 le 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 le with the name sruplogo.png to this images folder. 2. In the Joomla! backend, change the stylesheet to refer to the new image le. Navigate to Extensions | Template Manager and click on tem_lighrame. Select the CSS le template_css.css and click on Edit. 3. In the CSS editor, nd 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 combinaon of the logo image and a background color. The style denion should look as follows: #logo { background: url( /images/sruplogo.png); background-repeat:no-repeat; background- color:orange; width: 760px; height:120px; float:left; position:relative; } Download at Wow! eBook WWW.WOWEBOOK.COM Creang an Aracve Design: Working with Templates [ 300 ] 6. 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, nd the style that starts with this code: #logo a:link, #logo a:visited { Change it by adding the display: none declaraon. 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; } Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 11 [ 301 ] 8. Click on Save and click on Preview. Download at Wow! eBook WWW.WOWEBOOK.COM Creang an Aracve Design: Working with Templates [ 302 ] What just happened? Mission accomplished! You've successfully changed the looks of the SRUP site. You've changed the color scheme and made the CSS le point to a new logo image le. 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 nd that there are many techniques to achieve certain design goals. The soluon 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 nd out more about this technique and some alternave methods. Have a go hero – tweak the layout to your taste Feeling condent? Why don't you have a look around in the CSS editor to nd 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 nd 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 nd out which parcular CSS styles you have to edit in order to get the desired eect. Joomla! uses dozens of dierent styles and templates, and extensions developers can throw in any number of addional styles. How do you nd out, for example, that the main content block is styled through the #content style? Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 11 [ 303 ] In Joomla!, your best chance is to go to the Template Editor and try to gure 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 soware and cost you nothing. If you want to edit the Joomla! template CSS more than once, you should really consider using this niy set of tools. I'll show you the benets right now; you can read along without actually using Firefox and Firebug to see if you like this approach and if you nd it worthwhile to start using them. Time for action – editing CSS on the y using Firebug Let's say you want to make the text-size of arcle headings bigger. Now how do you nd 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. Acvate Firebug by clicking on the Firebug icon (in the boom right corner of the browser window). In the boom 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 Creang an Aracve Design: Working with Templates [ 304 ] 3. In the Firebug Style window, edit h2.contentheading by changing font-size: 18px; to font-size: 40px;. The eects of your edits are immediately shown in the browser window: The huge font size is probably not what you're aer. Just enter dierent values unl 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 eects. 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. Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 11 [ 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 nd the Firebug plugin at www.getfirebug.org, along with more elaborate instrucons on geng 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 Microso Internet Explorer. You may want to do a Web searc h to pick your favorite set tools. Expanding your CSS knowledge Do you want to get deeper into the ne art of creang and eding stylesheets? You'll nd plenty of helpful resources on the Web. Just search for "CSS tutorial" or take a look at: 1. The basic tutorial arcle 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 exisng 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 niy griy of HTML, being able to change the template HTML directly in Joomla! is sll useful. It allows you to change or remove unwanted items that are somemes "hard coded" (that is, a xed part of the HTML code) into the template, such as a footer text or copyright noce. Download at Wow! eBook WWW.WOWEBOOK.COM Creang an Aracve Design: Working with Templates [ 306 ] Time for action – removing the xed footer text At the boom of the page there's a hyperlink to the template designers website: Let's delete it: 1. Navigate to Extensions | Template Manager. Select tem_lighrame and click on Edit. 2. In the next screen, click on the Edit HTML buon. You're taken to the HTML editor screen. 3. In the editor, nd 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 noce. 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 Eding 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 eects of every adjustment you've made. However, there is a drawback: all changes in the template les are only stored on the web server. If for some reason you were to re-install the template, these changes would be lost. Download at Wow! eBook WWW.WOWEBOOK.COM . 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. 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. Download. consist of a combinaon of six leers or numbers. See http://www.w3schools.com/Html/html_colors.asp. Tweaking template CSS, part two: Adding a graphic logo le The logo in the header of this template
Ngày đăng: 04/07/2014, 17:20
Xem thêm: Joomla cho người mới bắt đầu part 30 doc
