Problems with default templates? Maybe this could help.
Posted: Fri Apr 25, 2008 2:31 pm
If you having problems with default templates you might want to read this before posting to forum. These are typical problems that has been asked here in forum as well solutions and more info if you willing to learn more...
Before you ask help search the forum. There is plenty of information and good answers for many problems allready.
If you need to ask from forum then 1. post a link to problematic page, 2. tell what is the browser causing problems and 3. what is the problem. This will help people to help you.
First things first: Validate your (x)html code (and CSS).
Many problems can fixed by making sure your code validates. Missing closing tags, repeating id's, extra or missing etc. can cause different problems with different browsers. Problems in CSS can make your browser to ignore your CSS styles.
Good tool to validate your online pages can be found from: http://validator.w3.org/
CSS http://jigsaw.w3.org/css-validator/
Firefox has also excellent addon called HTML Validator which can found from http://users.skynet.be/mgueury/mozilla/
Check your document DOCTYPE.
DOCTYPE tells to your browser how your pages should be rendered. Changing DOCTYPE does change how your page looks.
More about DOCTYPES: http://www.alistapart.com/stories/doctype/
There is also many addons that helps you when working with layouts and solving problems. Make sure you have least these:
Firefox: Web developer toolbar - http://chrispederick.com/work/web-developer/
IE: http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
In IE6 page content behaves strangely, text and/or images jumps when hovered over links, page drops etc.
IE6 has problems with floated layouts CCSMenu top + 2 columns and Left simple navigation + 1 column. Try adding * html #main {height:1%;} to the end of stylesheet. This will put div#main into "hasLayout" mode and fixes several problems. You most likely you get rid of jumping images and few other problems.
Missing list-items, text etc. in IE6
Again * html #main {height:1%;}
More about hasLayout can be found from: http://www.satzansatz.de/cssd/onhavinglayout.html
Content Drops down below side navigation.
Check that you do not have images or something else that IE finds wider than content area. Reduce width of tables or forms from 100% width to 1-3% smaller until page does not drop. In floated layouts IE6 likes to add extra 3px margin in "hasLaout" mode that causes problems with content which looks fine in Firefox or other browsers.
More about 3px bug: http://www.positioniseverything.net/explorer/threepxtest.html
CSS Menu does not work in IE6.
IE6 relies on some javascript to do DropDown / FlyOut menu. Check that you have following code in your header and correct javascript file in right directory.
That javascript file looks for id "primary-nav" so check that you have not changed or removed id in .
How do I style dropdown menu items in IE6? All the other browsers show them correctly.
CSSMenu.js used by IE6 to display menu changes the element class name by adding "h" at the end of it. You should also remember to change your CSS styles to match that. "menuparent" becomes "menuparenth" and so on. Some info can also be cound from CSSMenu.js file.
I have numbers 1.1, 1.2, 2.1... in my menu and text "Current page is :" How do I remove those.
Menu and page templates have built in accessibility features and those are normally hidden with accessibility stylesheet. Check that you have accessibility stylesheet attached to you template.
Where do I change how search box looks.
Look in "Extensions >> Search >> Search Template". There you will find search box template.
Your search module call in page template should be inside {search} so you can style it with CSS.
Give CSS styles like:
#Search input {background-color:pink;}
#Search label {border:1px solid pink;}
You can also style the search button giving it class and it becomes .
and you style it with CSS:
#Search input.searchBtn {border:1px solid pink; background:lime;}
Can I use image as search button.
Yes. If you look at search template you find the search button is made with following code . You use image bu making it
More info: http://www.echoecho.com/htmlforms14.htm
How do I use unique background image for menu items.
If you look your menu template i.e. "simple_navigation" there you find . By making it alias}"> will add page alias name to its class. Since alias is unique to each page you have unique identifier on current page tag. Adding same to other in menu template tags you can create your menu as you want it by editing your CSS.
How can I change the left sidebar to right?
Look for the CSS. You need to alter 3 things.
div#sidebar {
float: right; /* change this to right and sidebar floats to right */
width: 26%;
display: inline;
margin-left: 0;
}
div#main {
margin-right: 29%; /* now you need to give some space for the sidebar */
margin-left: 2%; /* and some air on the left */
}
I've been trying to find some documentation about changind colors, fonts, margins etc. in default templates. Where is that done.
Look for the stylesheets as they got lot's of comments. If you don't understand a thing you might need to learn some CSS.
Good place to start is http://www.w3schools.com/
Before you ask help search the forum. There is plenty of information and good answers for many problems allready.
If you need to ask from forum then 1. post a link to problematic page, 2. tell what is the browser causing problems and 3. what is the problem. This will help people to help you.
First things first: Validate your (x)html code (and CSS).
Many problems can fixed by making sure your code validates. Missing closing tags, repeating id's, extra or missing etc. can cause different problems with different browsers. Problems in CSS can make your browser to ignore your CSS styles.
Good tool to validate your online pages can be found from: http://validator.w3.org/
CSS http://jigsaw.w3.org/css-validator/
Firefox has also excellent addon called HTML Validator which can found from http://users.skynet.be/mgueury/mozilla/
Check your document DOCTYPE.
DOCTYPE tells to your browser how your pages should be rendered. Changing DOCTYPE does change how your page looks.
More about DOCTYPES: http://www.alistapart.com/stories/doctype/
There is also many addons that helps you when working with layouts and solving problems. Make sure you have least these:
Firefox: Web developer toolbar - http://chrispederick.com/work/web-developer/
IE: http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
In IE6 page content behaves strangely, text and/or images jumps when hovered over links, page drops etc.
IE6 has problems with floated layouts CCSMenu top + 2 columns and Left simple navigation + 1 column. Try adding * html #main {height:1%;} to the end of stylesheet. This will put div#main into "hasLayout" mode and fixes several problems. You most likely you get rid of jumping images and few other problems.
Missing list-items, text etc. in IE6
Again * html #main {height:1%;}
More about hasLayout can be found from: http://www.satzansatz.de/cssd/onhavinglayout.html
Content Drops down below side navigation.
Check that you do not have images or something else that IE finds wider than content area. Reduce width of tables or forms from 100% width to 1-3% smaller until page does not drop. In floated layouts IE6 likes to add extra 3px margin in "hasLaout" mode that causes problems with content which looks fine in Firefox or other browsers.
More about 3px bug: http://www.positioniseverything.net/explorer/threepxtest.html
CSS Menu does not work in IE6.
IE6 relies on some javascript to do DropDown / FlyOut menu. Check that you have following code in your header and correct javascript file in right directory.
That javascript file looks for id "primary-nav" so check that you have not changed or removed id in .
How do I style dropdown menu items in IE6? All the other browsers show them correctly.
CSSMenu.js used by IE6 to display menu changes the element class name by adding "h" at the end of it. You should also remember to change your CSS styles to match that. "menuparent" becomes "menuparenth" and so on. Some info can also be cound from CSSMenu.js file.
I have numbers 1.1, 1.2, 2.1... in my menu and text "Current page is :" How do I remove those.
Menu and page templates have built in accessibility features and those are normally hidden with accessibility stylesheet. Check that you have accessibility stylesheet attached to you template.
Where do I change how search box looks.
Look in "Extensions >> Search >> Search Template". There you will find search box template.
Your search module call in page template should be inside {search} so you can style it with CSS.
Give CSS styles like:
#Search input {background-color:pink;}
#Search label {border:1px solid pink;}
You can also style the search button giving it class and it becomes .
and you style it with CSS:
#Search input.searchBtn {border:1px solid pink; background:lime;}
Can I use image as search button.
Yes. If you look at search template you find the search button is made with following code . You use image bu making it
More info: http://www.echoecho.com/htmlforms14.htm
How do I use unique background image for menu items.
If you look your menu template i.e. "simple_navigation" there you find . By making it alias}"> will add page alias name to its class. Since alias is unique to each page you have unique identifier on current page tag. Adding same to other in menu template tags you can create your menu as you want it by editing your CSS.
How can I change the left sidebar to right?
Look for the CSS. You need to alter 3 things.
div#sidebar {
float: right; /* change this to right and sidebar floats to right */
width: 26%;
display: inline;
margin-left: 0;
}
div#main {
margin-right: 29%; /* now you need to give some space for the sidebar */
margin-left: 2%; /* and some air on the left */
}
I've been trying to find some documentation about changind colors, fonts, margins etc. in default templates. Where is that done.
Look for the stylesheets as they got lot's of comments. If you don't understand a thing you might need to learn some CSS.
Good place to start is http://www.w3schools.com/