Description
Level:
Intermediate+
Official release:
2012-08-11
Prerequisite:
Php v5.x+
Javascript
Cumulus v1.9.2+
Features:
14 pages
Multilingual
Update module
Modules addons
2 levels menu
Links:
Tools suggested:
Quality website
template
Exclusively
for You!
Weather Blues
Understanding your template
Modern template for easy maintenance
Some concepts :
Weather Blues use richer mix of technologies to achieve better layout. Pages are based on php, but most of their layout is made into .css file; Weather Blues then could be qualified of CCS Template. Also, Javascript is used to add some "life" into this template.
CSS World has a main philosophy; getting all layout (as possible) out of html. This little effort is worthy because we have a lot less job to do when we want to modify something (modify width of a box, colors or background images). You modify it into the .ccs file and ALL your pages are changed automaticly!
Then, in Weather Blues pages, you will often encounter id="..." or class="..."; this is the way css recognize where to apply layout. In short, in a page, id could appear only one time, while class could appear many times in the same page. I've also spiced this template with javascript, as it work in the same way using mainly id="...".
Example : Our template (image below)
Below, with short green lines, you see empty sections ("div") with a class nane. There is no text inside, because they are "layout sections" only. class="header_top" place a thin image of a box top with rounded corner. As you already imagine, class="header_bot" add bottom round corner to our boxes.
Also, you see with red lines some other nested sections.They are not as empty as header_bot or header_bot, but only section id="slider" contain really something (images in that case). Then header is also layout section, but wrapper, slider-wrapper are javascript sections.
- header defines where is the header block in your page and put first header image in place (to avoid waiting on first sliding image, during download of all header images)
- wrapper is main block for entire slideshow (for javascript).
- slide-wrapper is block for images contained in slideshow (for .js too)
Finally, you see center section having id="slider" and class="nivoSlider", combining by that fact javascript and css in the same line. With id="slider", Javascript define an hidden area used for image swapping effects. Class nivoSlider define physical layout of this area.
That brief introduction is important as it is the knowledge necerrary to have your template "in hand". All pages in Weather Blues Template use that structure.
Now that we have explained header structure... we are ready to put hands in the mud!
Modify header slides
First, be safe! Take a copy of your current page, before doing modifications!
Take your own pictures :
As you see above, Weather Blues header is composed of 3 different images, sliding continuously. but these beautifil pictures are only suggested presentation, you could adapt it to meet your needs and taste.
Changing images :
The easiest way to modify this header is to change photos in that slideshow for something more representative of your city or "dream place". To do so, just remind these things:
- Size of pictures are 954 x 200 pixels
- First image is not part of the slideshow, you have to locate image header1.jpg in file styles.css and change it for other. That one is the same "starting" image for all your pages (slideshow or not)
- If you want to keep inside frame rounded corner, you have to add file corners.png over your picture. That picture is transparent with only corners angled white, to put over your images.
- Actually, slideshow is formed of 3 pictures, but you can put any from 2 to your header. Just keep in mind that a lot of picture is heavy to load... then your site will be slow.
- As the slideshow is included in each page, you could easily have a different slides in every page... or no slide at all! (In any case, "starting" image is header1.jpg or other specified in styles.css )
Changing slideshow parameters
Slideshow library used, is actually set to default parameters; but we can easily change these parameters to suit your needs,
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
We see in the frame above, the lines who initiate the header slideshow; you'll find these lines at real buttom page, just before </body>. The interesting part is the word nivoSlider(), like you see parentheses are empty. Empty say to nivoSlider to use its defaults, but betweem these parentheses we could specify one or all of these parameters below.
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold, fade, sliceDown'
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
});
});
</script>
Then there is a lot to try to find your own configuration (double slash "//" represent comments). For further details, I invite you to go to this link to see all possibilities and complete way to use it.
Removing slideshow :
If you want, you could easily remove slideshow for a page. If a conflict occur with something you want to add, or if you find that a page is too slow.
In <head>...</head>, remove this line.
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
In <div class="header">...</div>, remove these lines.
<div class="header">
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="images/header.jpg" alt="" />
<img src="images/header2.jpg" alt=""/>
<img src="images/header3.jpg" alt="" />
</div>
</div>
</div>
</div>
Your new <div class="header">...</div>, should look like this :
<div class="header">
</div> (You need only the header div... nothing else inside this div)
Finally, just before </body>, remove these lines.
<script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="lib/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Now, you know almost all about this slider in page header... all that could be good to make your page really different!
Pull-down menu
Understanding your menu
In the Weather Blues v2 template, menus are stored into a separate file. You will find a file named: header_menu.php. This file contain main menu comment like this one <!-- main menu --> it shows you where the menu begins. The menu structure is like this:
<!-- Main menu -->
<div id="mainmenu" class="menu">
<ul style="width: 750px">
<li><a href="index.php" title="Home"><span>Home</span></a></li>
<li><a href="#" title="Data history" rel="sub_history"><span>History</span></a></li>
<li><a href="gauges.php" title="Weather gauges"><span>Gauges</span></a></li>
</ul>
</div>
<!--2nd drop down menu - History -->
<div id="sub_history" class="dropmenudiv_a" style="width: 150px;">
<a href="thismonth.php" title="This months observations">This Month</a>
<a href="thisyear.php" title="Observations since january 1st">This Year</a>
<a href="record.php" title="All time records">All time records</a>
</div>
In the file header_menu.php, you will see these structures. Some important things to know to understand your new menu system:
- There is only ONE main menu section.
- Each submenu has its own section.
- Identification (id) for main menu need to stay "mainmenu".
- id for submenus could be your own names.
- class=".." is used to style your menu.
- In <a href="#"...>, "#" could be replaced by a url on every item (submenu or not!)
So these menus are pretty alike those you've see in any other menu, apart that the menu file contain many menus. To link the main menu with submenus, the "trick" is the command rel="..." only available in main menu. This is a "relation" established between a main menu item and a submenu id. As usual, "id" need to be unique, then each submenu have to be identified by a unique "id".
Last thing, the "<a href="#"...>" link. When an item of main menu refer to a submenu, you're having 2 choices: Keep this main menu item "disabled" by using "#" or point to a file, acting as a category link.
Using your menu
To "call" your menu in each page, you will see an include like this: include('header_menu.php'). This tell Php to replace that line with content of file header_menu.php... isn't simple?
That kind of menu inclusion simplify a lot our pages management, but it lack an important feature: menu item highlighting! To show to the visitor where is he in our site, menu highlight is a must! But as we don't want to write in each page "your are on menu item X page", we have to use this "trick":
<script type="text/javascript">
// Select current menu item to highlight
//SYNTAX: tabdropdown.init("menu_id", [item menu, start from 0])
tabdropdown.init("mainmenu", 0)
</script>
You'll see the code above in every page, just after our menu inclusion. A comment remind you the way it's working: A function called tabdropdown.init do highlighting, with 2 parameters: first one is the id of your menu surrounded by quotes (eg. "mainmenu"). The last one is a number from 0, representing which menu item to highlight (0 = Index. 1 = Recent, 2 = History... and so on, from left to right).
In Weather Blues Main (index) page, have number 0, and only that page (because no submenu for this item). For menu items in Recent, all pages under this "category" have number 1; in case you create a page "recent" that page will also keep 1 as its init number. Then, remember, if you insert an item on mainmenu, you have to change numbers on each page following the new item.
For further details, you could see that link