A guide to advanced customisation of LVW sites using Cascading Style Sheets
Table of Contents
The examples given here are out of date and need revising.
About
This document is not to teach you how to become an expert in CSS as that is beyond me. What I hope to show is that the application of a little CSS here and there can easily give your site that polished look and the application of a lot of CSS can totally transform it.
CSS Resources
Your first step is to get some appreciation of what CSS can do for you:
www.csszengarden.com is a demonstration of how CSS can transform a web sites. Once you have read this you will understand why LVW has given you access to CSS.
www.htmldog.com/guides/cssbeginner/ is one of many beginners guides to CSS.
If you like buying books these are the two I use:
The ZEN of CSS Design: Visual Enlightenment for the Web which is an easy to read book of solutions to common CSS problems but more importantly its about design.
Dynamic HTML: The Definitive Reference, Second Edition. I live by this book for all HTML and CSS things. It's a boring and expensive reference book but fab.
If you want the authoritative version of what CSS is, then look at www.w3.org/Style/CSS/. Informative but not for beginners.
Getting Started
Your first task is to down load Firefox, the free multi–platform browser. See for download details www.lvw.makessense.co.uk/faq/#68. I can not stress enough how much easier your life will be using it instead of Internet Explorer.
Once you've installed my recommended extensions restart firefox and bring your site up. I'm assuming you have adopted one the LVW standard themes. Fire up the EditCSS extension and a new panel will open showing your site's CSS rules.
Near the top you will see:
a:link, a:visited {
color:#00CEF1;
}
replace the #00CEF1 with #FFFFFF and you will see all the links in the browser panel change to white. Don't worry you've not change any thing permanently, nothing in LVW has been changed only what is in the browser memory. If you closed EditCSS and refresh the web site things would be back to normal.
But this is great, you can try out your CSS ideas immediately, then once you are happy copy and paste your change in to LVW!
Now try this. Find the line that starts with #header which is the CSS rule name. It will look something like this:
#header {
font-size:3.2em; /* font size */
text-align:center; /* align text in middle */
letter-spacing:.1em; /* the distance between the letters */
margin:10px 10px 0px 10px;
font-family:arial, helvetica, sans-serif; /* OV */
color:#006400; /* color (in HEX) */
}
This bit of CSS controls the header at the top of your web site - the bit that says your site's name. Now change it to<:/p>
#header {
font-size:4.2em; /* changed */
text-align:center;
font-weight:bold; /* added */
letter-spacing:.2em; /* changed */
margin:10px 10px 0px 10px;
font-family:arial, helvetica, sans-serif; /* OV */
color:#444444; /* changed */
border:solid black 2px; /* added */
padding:20px; /* added */
background-image:url(/static_images/lava.jpg);/* added */
background-repeat:repeat; /* added */
}
Now look at your site. What we have done is set an image behind the header, changed the font is a number ways, added a border and increased its internal padding, effectively making it larger.You can do this trick with any element on your web site.
OK. We will pretend we think that looks great. We now need to make that CSS rule changes permanent in LVW.
Log into LVW and edit your active theme. Hit the CSS button. Copy your changed CSS rule from EditCSS, from the "#header {" line to the closing "}" and paste it into the the LVW form and Apply the changes.
Ensure you have closed EditCSS in firefox and refresh your web site. You should still see your changes and so can the rest of the world. Your updated CSS rule has been added to LVW CSS rules. Because it is declared later than LVW's default rules it takes precedence. In fact there is no need to repeat parts of the rule that were declared before by LVW, so you can reduced your new rule to:
#header {
font-size:4.2em;
font-weight:bold;
letter-spacing:.2em;
color:#444444;
border:solid black 2px;
padding:20px;
background-image:url(/static_images/lava.jpg);
background-repeat:repeat;
}
Adding new rules
LVW does not supply rules for all elements on your site but that does not stop you from adding them. But first you need to find some identifier to address the element on your page. From your reading of CSS selectors (css.maxdesign.com.au/selectutorial/) you will know there are many ways to select an element to apply CSS to it. The easiest is to use is the ID selector.
View the web site's source code in Firefox ("view->page source" ) and from that you can spot the identifiers. Have a look through the source code for
<div id="introtext">
This is the start of the container that hold the introduction text on your home page.
You can add a rule like :
#introtext {
color:yellow;
background-color:darkgreen;
margin:2%;
padding:5px 40px;
font-size:120%;
text-align:center;
}
and your introduction text will stand out from the page.
When adding HTML to your site you can create your own identifiers. You may wish to do some fun things with a particular section in one of your articles. Assuming some HTML like this:
<a id="u_special_effect_1">Hello every one </a>
If you always begin your CSS identifiers and classes with "u_" you will never accidentally override one of LVW default ones.
Now add a rule for it:
#u_special_effect_1:active {
color:yellow;
background-color:black;
font-size:400%;
}
and when you click on the link some thing strange will happen.
You may want the effect in many places so you will want to use a class instead of an ID.
<a class="u_special_effect_1">Hello every one<a> <a class="u_special_effect_1">Hello every one again<a>
and the rule could be:
.u_special_effect_1:active {
color:yellow;
background-color:black;
font-size:400%;
}
Making a news story stand out
Here is another simple example of using CSS on your events calendar page:
#calendar_info_268 {
font-size:1.3em;
}
The number in the CSS identifer (268) is the LVW event id, so they will be different for you site. This declaration just make one particular event stand out more.
If you do find a situation where you can not address an LVW HTML element just drop me a line and it can be added.
Differences between browsers
Not all browsers render CSS the same away and sometimes not at all. If you open up EditCSS again, and from the Action menu select clear, all your CSS will be removed and your site will be a shadow of its former self. All you are left with is it structure - it's not pretty but its still very readable. This is what your site will look like to browser that do not understand CSS.
Internet Explorer 5-6 are riddled with CSS bugs and it will make any ambitious plans you have for CSS a pain. The double horizontal menu used in LVW's HORIZONTAL templates took me days to get to work and that was purely down to IE bugs. If you examine LVW configuration men in both IE and Firefox you will notice many differences.
The easiest way I've found to approaching the problem is to always design initially for firefox, as its CSS implementation is pretty good and then see if the design survives exposure to IE. If it fails slowly make changes to bring IE on board whilst keeping and on Firefox to ensure you've not broken it there instead.
Here are some sites that list known problems:
Working around bugs in IE5/5.5/6 etc
Sadly, there is no escaping Internet Explorer as it is installed on so many PCs, so you have to ensure your site is still usable in all its wonder flavours .
No doubt you don't have all the browsers on your PC. BrowerShots may be your answer.
There are plenty of web sites with answers for IE bugs:
and Google.
Sometimes it is merely a matter of adding an extra instruction to your rule to wake IE up, but sometime you may need to create a rule especially for IE. A rule of this style:
* html .menu a {
display:inline-block; /* only seen by IE only */
}
can only be seen by IE5. Follow the "* html" with a CSS selector and then you can apply CSS instructions only to IE.
Sometimes you will need to add your own javascript to overcome IE bugs. The Go Veggie - sideways uses some to make the menus work in IE.
Going it alone
If your choose the skin Empty then LVW will not add any of its own CSS. This has the advantage that if you are overriding many LVW default CSS declarations you will soon end up with a very large amount of CSS being uploaded with your site. By using the USER template you can potentially make your CSS declaration much smaller.
The order in which your site content is produced can have an effect on what you can achieve with your CSS design and for that reason LVW supplies a number layout managers.
(They will be documented better later. Looking at your site with out using CSS (EditCSS->Action->clear) will allow you to see the structural differences.)
You can also add javascript for what ever reason. Again javascript is very browser dependent and expect to put in a lot of work if you go down this route.
How LVW applies CSS to your site
LVW applies CSS in a strict order and You will need to understand this to ensure your CSS rules are applied as you expected.
Locations have perhaps the longest chain of CSS insertion points, so we will use them as an example:
The first CSS applied has the lowest priority.
- The CSS in the Skin.
- The CSS in the active Theme.
- The "Location CSS" in Locations->CSS->Location CSS. This generic style for all locations.
- The location 's CSS in Locations->Edit->CSS. This styling for a particular location.