Apache Web Hosting Php - Php4, Php5 Programming Blog

EXPRESSIONENGINE First, create the background image. Be very careful to keep the dimensions as specified in Figure 4-22. You will use CSS positioning to shift this image up and down by the appropriate number of pixels, showing a tick or arrow as required. For example, the hover state specifies the image be moved up by 20 pixels, thus hiding the first 15px bar and 5px space of the image and making the bar with the arrow visible on rollover. For a visited link, everything moves up 40 pixels, making the bar with the tick viewable instead. 243px 15px5px60px4 Figure 4-22. Dimensions for ticked-off background image The CSS is pretty simple and is making full use of the display:block and set width discussed earlier. Just replace the #sidebar ul and list links styles with the following. Be sure to enter the correct path to your ticks image: #sidebar ul { list-style-type:none; padding:3px; } #sidebar li a { display:block; line-height:150%; width:243px; background:URL(http://localhost/images/ticks.gif); text-decoration:none; } #sidebar li a:link, a:active { color:#336; } #sidebar li a:hover { color:#000; background-position: 0 -20px; } #sidebar li a:visited { background-position: 0 -40px; } 163

BLOG DESIGN SOLUTIONS Confused? Don t be. Notice that the background property is not specified in your sidebar links. If it were, whatever the value, it would be implemented. However, because the property remains undeclared, the sidebar links inherit the background style from the default links (see Figure 4-20). Figure 4-20. Sidebar links with background color on hover state To make things work smoothly, you need to make the following tweaks in weblog_css: 1. For your Leaf design, you need to change the a:link and a:visited color declarations from #666 to #330, almost the same as you did in the #sidebar h3 declaration. 2. Look for all link declarations in the CSS and make the same adjustment to keep your links consistent. That should help you refine the sidebar links as they stand, but wouldn t you rather make a bigger impact? It s time to get ticked-off. Ticked-off visited links It s easy to show a user which links they have visited. Usually you would set the a:visited link class to a different text color to indicate this. Everybody does that, but using just one CSS background image, you can create an image trick to do this for you (see Figure 4-21). What about a tick appearing to the right of all visited links or an arrow appearing on hover to further entice the user to follow that link? Figure 4-21. Ticked-off visited links

EXPRESSIONENGINE You should find it easy to edit the lb_diags_white.gif and lb_diags_h3.gif images to apply your own stamp on the sidebar. 1. To further the Leaf design, an image called lb-diags_h3_leaf is available on www.friendsofed.com for you to upload and replace. 2. Also, you will need to change the font color of the h3 text, from #336 to #330. Adjust the CSS as follows: #sidebar h3 { width: 249px; height: 16px; margin: 0; color: #330; text-decoration: none; display: block; text-align: left; background: url({site_url}themes/site_themes/ . logical_blocks/lb_diags_h3_leaf.gif) right; padding: 6px 0 0 5px; } Having just discussed your #sidebar list styling, let s take that and turn it into something really cool. Understanding the sidebar links Notice that the sidebar links are clickable for the whole sidebar width because the CSS declaration display:block is used in conjunction with a set width, specifying a sensitive area longer than the actual link text. That will come in very useful. Next, notice the yellow background as you hover over the links. This effect is not specified in your sidebar link states, but is inherited from the default link states specified much earlier in the stylesheet: a:link { text-decoration: underline; color: #666; background: transparent; } a:hover { text-decoration: underline; color: #900; background: #FFC; } a:visited { text-decoration: underline; color: #666; background: transparent; } 161

BLOG DESIGN SOLUTIONS #sidebar li { border-bottom: 1px solid #CCC; } #sidebar li a:link { color: #333366; line-height: 150%; text-decoration: none; …and so on. You ll notice that rather than a plain

or
• before the styling attributes, #sidebar is declared for each part, followed by the
  or
  • . The sidebar now owns this style, and the styles will not apply to an unordered list outside of the sidebar. #sidebar This is the left-aligned column containing categories, headlines, search tools, and so on. A background image is set to repeat vertically (repeat-y), tiling from the right to create the faint diagonal lines behind the content, and a
    

    assigned to the sidebar carries its own background image for the darker gray headings. The CSS for each is shown here (note that they are not listed together in weblog_css): #sidebar { float: left; color: #333; text-align: left; margin: 0 11px 15px 0; border-top: 1px solid #999; border-bottom: 1px solid #999; background: url({site_url}themes/site_themes/ . logical_blocks/lb_diags_white.gif) repeat-y right; } #sidebar h3 { width: 249px; height: 16px; margin: 0; color: #336; text-decoration: none; display: block; text-align: left; background: url({site_url}themes/site_themes/ . logical_blocks/lb_diags_h3.gif) right; padding: 6px 0 0 5px; }

EXPRESSIONENGINE The CSS mentioned here is typical of the various navigation styles, in that many classes are grouped together as they have equal properties. Be aware that mak- ing one change will affect several link states on your menu. A word of caution Be sure that you re still saving template revisions here (Admin . Template Preferences) because menu customization has you tweaking all the various nav styles, and it is easy to stray from a working model into a mess that fails on some browsers. Work step-by-step, pixel-by-pixel, and never make more than two moves before saving and checking the results. #content The #content id does little more than hold the sidebar and the main column together. Just think of it as important stitching that just happens to have a 10px margin between the previous navigation and the columns it contains. Edit that 10px setting to tighten the stitching: #content { margin: 10px 0; } Inheritance CSS is full of shorthand, and once you understand how this works hand-in-hand with markup, you can save a great deal of time and effort, and avoid overdeclaring classes. Perhaps the best example of this efficiency is inheritance. Let s say you are using an unordered list in your sidebar, and another one in your main content, and you want to style each differently. You might add a unique indicator to the

or
• items for each, but it bloats the markup and will make redesigning your site much more difficult. Who owns what? The key here is that one list lives inside your #sidebar column, and the other lives inside your #blog column. So, in the CSS you can assign a set of list styles to each id, so your list markup contains no class declarations because you specified in your CSS that a list within a certain id should look a certain way. Here s how it works for your sidebar links: #sidebar ul { list-style-type: none; margin: 0; padding: 3px 5px; border: 0 solid #CCC; color: #666; } 159

BLOG DESIGN SOLUTIONS Removing the top border will ensure that the lb_menuback_leaf.gif images sits flush with the lb_header_leaf.gif image in the header. Also of note is the padding. A 20px padding-top is applied using CSS shorthand, and this can be adjusted to reduce the distance between masthead and menu tabs. If you alter this padding, you should alter your lb_menuback_leaf.gif accordingly. Here s the revised CSS: #nav_wrapper { padding: 20px 0 0; border-left: 1px solid #000; border-right: 1px solid #000; background: url({site_url}themes/site_themes/ . logical_blocks/lb_menuback_leaf.jpg); } You will now have your #header and #nav_wrapper blocks joining visually, with two background images joined. You can upload into Photoshop and refine these images and then put them back in the root/themes/site_themes/logical_blocks directory if you desire. Tabs I mentioned that many elements power the actual menu tabs. Controlling a horizontal menu list is a tricky thing. It is simple to force the list items to sit horizontally using display:inline, but to apply link, hover, selected state images and alternative link colors and weights requires a number of properties to be applied. Some of these help your menu display well on older browsers, too. For the Leaf design, you need to replace the selected.gif, tab.gif, and tabover.gif images in the root/themes/site_themes/logical_blocks directory. Three alternate tab images that reflect the Leaf style (selected_leaf.gif, tab_leaf.gif, and tabover_leaf.gif) are provided at www.friendsofed.com for download. Alternatively, remove the image references in the CSS (by removing the url(…) part) to leave just color references: background: #CCC; Note that rather than specifying the light gray as #CCCCCC, you use #CCC, which is nice and short. It is possible to abbreviate any hexadecimal reference if it has three equal groups of numbers or letters following the format #aabbcc or has no variation such as #aaaaaa. In this situation, you need to specify each character only once, so a nice orange such as #ee9933 can be abbreviated to #e93. As for grabbing your own colors, the Dreamweaver and Photoshop palettes are perfect, or visit the WC3 documentation at www.w3schools.com/css/css_colors.asp for a bit more information. You want more? You might want to have more than six menu tabs, and there isn t room for seven or eight. In this case, find the #nav_header ul#primary a, #nav_header ul#primary span, #nav_header ul#primary a.current statement, and adjust the width declaration of 102px to suit your needs. You need to make the width of each button smaller if you want to include more.

EXPRESSIONENGINE require your two images to match up, so the bottom of the lb_header.leaf.jpg will match the top of the lb_menuback_leaf.jpg. Let s look at the default CSS for the header: #header { margin: 0 0 10px 0; color: #030; height: 100px; width: 750px; border: 1px solid #663; background: . url({site_url}themes/site_themes/logical_blocks/lb_header.gif); } The margin properties make use of CSS shorthand again, and a significant attribute is the 10px bottom margin, which creates the white space dividing header from navigation. Notice that if a CSS value is 0, you need not add px to it. Note also the height property, which works perfectly in all browsers, and I suggest that you make your masthead equal to the specified 100px. If you do decide to use a masthead image that is taller or shorter than 100px, be sure to edit the height reference in the #header id accordingly. With that understood, you can now hack the CSS for the header. Note the change to margin, and the border-bottom rule in addition to the existing all sides border declaration. Also, the image reference has changed to reflect the new image file: #header { margin: 0 0 0 0; color: #030; height: 100px; width: 750px; border: 1px solid #663; border-bottom: 0px; background: url({site_url}themes/site_themes/ . logical_blocks/lb_header_leaf.gif); } So, you removed the 10px space between the two elements and also removed the bottom border of the header. Next, look at the default nav_wrapper CSS. There are many elements powering the actual navigation tabs, displayed simply by the presence of the unordered list menu in the template. You need not worry about that right now; let s just look at the navigation wrapper: #nav_wrapper { padding: 20px 0 0; border-left: 1px solid #336; border-right: 1px solid #336; border-top: 1px solid #336; background: url({site_url}themes/site_themes/ . logical_blocks/lb_menuback.gif); font: bold 10px ‘Lucida Grande’, Verdana, Arial, Sans-Serif; } 157

BLOG DESIGN SOLUTIONS Locate the Logical Blocks images The next few sections refer to the default background images used to decorate the installed template. All the default images are installed into the themes/site_themes/ logical_blocks folder, and you can quickly make the template your own simply by opening them in Photoshop and reworking them to your own design. Note, however, that the text refers to a number of optional images that have been added to the www.friendsofed.com website for you to download. You are welcome to download all these images in one group and overwrite all the default files to instantly change the look of your blog (this depends on how much or how little you are prepared to do). Two choices of header layout By default, the Logical Blocks masthead and navigation blocks appear separated (see Figure 4-18.) Although they are controlled by two different ids, it is simple to adjust this situation to suit your needs, for example, making them appear not separated, as shown in Figure 4-19. Here you have two simple options to make this design your own. You ll start by taking the first steps toward the Leaf design. Option 1: Replace the images Figure 4-18. Option 1: Swapping the default images for your own or the provided substitute images You can simply replace the default background images (lb_header.gif and lb_menuback.gif) with your own images or the two samples provided for you at www.friendsofed.com: lb_header_leaf.jpg and lb_menuback_leaf.jpg. These images are the same size as the default images and are designed not to tile. Whichever approach you take, be sure to place your images in the root/themes/site_themes/logical_blocks directory and change the references to lb_header.gif and lb_menuback.gif in #header and #nav_wrapper. Option 2: Close the gap and join the images Figure 4-19. Closing the gap, and using composite images Option 2 fits nicely with the Leaf design. With Option 2, you can resize the containers to hold taller or shorter images, or remove the space between them to combine the two images and make a composite header with navigation tabs lining its base. This method will

EXPRESSIONENGINE Content from Presentation, Second edition (Briggs et al.; Apress, 2004) to learn more. In this section, the focus is on some of the more flexible and influential styles, plus a few use ful tips and tricks that might make all the difference. Before you begin Let s not beat around the bush. CSS is difficult to master, and some of the concepts can take awhile to sink in. For this reason, the CSS you ll work with is minimal, but feel free to experiment. Just make sure that you keep those template revisions on! In this section, there is quite a lot to cover, including the following: Where is the CSS? Ensuring that CSS affects the templates: If your templates can t see your CSS, they won t be styled. Understanding the layout: a guide to key structural containers and how they fit together to organize your content. Reconfiguring the masthead: how to join the header and main menu. CSS inheritance: how one declaration affects another and when to spot knock-on effects. Understanding the sidebar links: what makes the whole line become a clickable link and how these links can be adjusted. Ticked-off visited links: a guide to creating the versatile and hugely popular ticked- off links, in which a background image is used as a visual indicator of pages already visited. Styling comments: When structuring your blog/more page, you added markup to highlight comments owned by yourself and assigned alternate background colors to the containers. Here you learn more about styling these comments. Optional extras: making use of the hidden strip at the top of every page. Where is the CSS? So, Where s this magical CSS? you wail. Well, the CSS file is located in the weblog tem plates and is called weblog_css. You open and edit it as you would any other template, If you are saving template revisions, they will also apply to weblog_css, so you can always take a few steps back if you screw up. Ensuring that your CSS affects your templates The rules within weblog_css are applied to the templates because a reference link to the file is embedded in every template. The following code snippet shows the entire head sec tion of the index template with the CSS link highlighted: 153

BLOG DESIGN SOLUTIONS Create the about template These steps are very similar to the previous list, although here you ll be placing an embedded template within your new about page: 1. Open the blog group, and again you will see a menu of five options next to the group name. 2. Click New Template as you did for your contact template. 3. Name the new template (about). As before, EE will show Template Type as Web page on the drop-down menu. 4. Select Duplicate an existing template and from the drop-down menu, select blog/index . 5. The system again places a clone of the blog/index template in your blog template group, this time called about. 6. Open the about template and replace the {exp:weblog:entries} information with {embed=”includes/about_intro”}. 7. Next, go to the includes group and create a blank template called about_intro. Into that template add whatever information you want to use to describe yourself, making use of

tags, tags, or whatever standard formatting you might want to style it up with. 8. Change the