Rich
05-09-2007, 21:31
With the introduction of drop-down Java menus to the Navigation Bar, I thought it would be a good idea to put together a mini-tutorial on how to modify the style of the drop-down element.
Due to the number of different ways this feature could be edited, we deemed it best to simply add the raw CSS (Cascading StyleSheet) code into the Additional CSS field in the Template Editor (for each Template).
These are the 4 lines if code you will see in the Additional CSS field:
.child { position: absolute; visibility: hidden; z-index: 10; background: #EEEEEE; border: 1px solid #003399; margin-top: 0px; padding: 2px; text-align: left; }
.child a { display: block; padding: 4px 18px; }
.child a:link, .child a:visited { background-color: transparent; color: #222222; font: normal normal 12px arial, sans-serif; text-decoration: none; }
.child a:hover, .child a:active { background-color: #CCCCCC; color: #222222; font: normal normal 12px arial, sans-serif; text-decoration: none; }
The drop-down menu uses a <div> element with a class called "child", hence the ".child" definitions above (the "." prefix indicates a class definition in CSS). Here's the basic HTML:
<div class="child"><a href="link.html">My Link</a></div>
Although you don't technically need to be aware of the above line, it helps to understand how the menu is constructed as we return to the CSS code:
.child { position: absolute; visibility: hidden; z-index: 10; background: #EEEEEE; border: 1px solid #003399; margin-top: 0px; padding: 2px; text-align: left; }
These values apply to the <div>. The values you may want to edit are in bold.
The menu's background colour is currently set to #EEEEEE, off-white, and there is a 1 pixel solid border surrounding it. What is particularly interesting is the padding, set to 2 pixels. This means that there will be a 2 pixel gap between the border and the menu's links. The margin-top, set to 0 pixels, ensures that the menu will touch the Navigation Bar. Set this to 1px or 2px to create a distance between the two.
.child a { display: block; padding: 4px 18px; }
The display: block; setting makes the <a> links display on top of each other as opposed to in a line. The padding value, in this case, has two pixel values, being the top/bottom (4px) and left/right (18px) values. These padding values, surrounding the link text, distance the links from the <div> border and padding already defined.
You may be wondering, "Why 18px?" - the reason is because, in this case, the link padding in the Navigation Bar is set to 20px. We want the text in the drop-down menu to be aligned with the text in the Navigation Bar's link. Since the <div> has a padding value of 2px, the <a> needs a padding value of 18px to create an overall distance of 20px.
.child a:link, .child a:visited { background-color: transparent; color: #222222; font: normal normal 12px arial, sans-serif; text-decoration: none; }
.child a:hover, .child a:active { background-color: #CCCCCC; color: #222222; font: normal normal 12px arial, sans-serif; text-decoration: none; }
These two lines relate to the <a> link in "normal" and "hover" conditions. The only difference is the background-colour of the links, set to #CCCCCC when "hovered" - creating the highlighted effect.
This is, by no means, an in-depth CSS tutorial, but hopefully it's given you some ideas as to how to modify your menus (and perhaps a better understanding of how Bluepark's Template system functions). After all, the Template Editor is essentially just an advanced CSS editor.
In addition to the background colours defined above, it is also possible to use background images. Adding such effects, however, requires a broader understanding of CSS. Please feel free to investigate this topic more via your favourite search engine. ;)
Due to the number of different ways this feature could be edited, we deemed it best to simply add the raw CSS (Cascading StyleSheet) code into the Additional CSS field in the Template Editor (for each Template).
These are the 4 lines if code you will see in the Additional CSS field:
.child { position: absolute; visibility: hidden; z-index: 10; background: #EEEEEE; border: 1px solid #003399; margin-top: 0px; padding: 2px; text-align: left; }
.child a { display: block; padding: 4px 18px; }
.child a:link, .child a:visited { background-color: transparent; color: #222222; font: normal normal 12px arial, sans-serif; text-decoration: none; }
.child a:hover, .child a:active { background-color: #CCCCCC; color: #222222; font: normal normal 12px arial, sans-serif; text-decoration: none; }
The drop-down menu uses a <div> element with a class called "child", hence the ".child" definitions above (the "." prefix indicates a class definition in CSS). Here's the basic HTML:
<div class="child"><a href="link.html">My Link</a></div>
Although you don't technically need to be aware of the above line, it helps to understand how the menu is constructed as we return to the CSS code:
.child { position: absolute; visibility: hidden; z-index: 10; background: #EEEEEE; border: 1px solid #003399; margin-top: 0px; padding: 2px; text-align: left; }
These values apply to the <div>. The values you may want to edit are in bold.
The menu's background colour is currently set to #EEEEEE, off-white, and there is a 1 pixel solid border surrounding it. What is particularly interesting is the padding, set to 2 pixels. This means that there will be a 2 pixel gap between the border and the menu's links. The margin-top, set to 0 pixels, ensures that the menu will touch the Navigation Bar. Set this to 1px or 2px to create a distance between the two.
.child a { display: block; padding: 4px 18px; }
The display: block; setting makes the <a> links display on top of each other as opposed to in a line. The padding value, in this case, has two pixel values, being the top/bottom (4px) and left/right (18px) values. These padding values, surrounding the link text, distance the links from the <div> border and padding already defined.
You may be wondering, "Why 18px?" - the reason is because, in this case, the link padding in the Navigation Bar is set to 20px. We want the text in the drop-down menu to be aligned with the text in the Navigation Bar's link. Since the <div> has a padding value of 2px, the <a> needs a padding value of 18px to create an overall distance of 20px.
.child a:link, .child a:visited { background-color: transparent; color: #222222; font: normal normal 12px arial, sans-serif; text-decoration: none; }
.child a:hover, .child a:active { background-color: #CCCCCC; color: #222222; font: normal normal 12px arial, sans-serif; text-decoration: none; }
These two lines relate to the <a> link in "normal" and "hover" conditions. The only difference is the background-colour of the links, set to #CCCCCC when "hovered" - creating the highlighted effect.
This is, by no means, an in-depth CSS tutorial, but hopefully it's given you some ideas as to how to modify your menus (and perhaps a better understanding of how Bluepark's Template system functions). After all, the Template Editor is essentially just an advanced CSS editor.
In addition to the background colours defined above, it is also possible to use background images. Adding such effects, however, requires a broader understanding of CSS. Please feel free to investigate this topic more via your favourite search engine. ;)