Features / Usability

Posted by Torsten Fabricius 06 Oct 2012 10:36 GMT-0000 posts: 1563

Hi sergrlager,

I just "merge" your two threads now and answer both questions here.

a) in general:

To get a certain "design behaviour", like for ex. a box drawn around s.th., there are several selectors or combinations of selectors, which could do, what you want. But depending on which selectors you choose that might cause different "side effects".

For example you would choose different selectors, if you wanted all boxes, all modules, only left modules, modules but no boxes in pages, boxes in pages but no modules etc. drawn with a line.

A selector is that what you see before the brackets and the parameters and values are in the brackets.
You mostly have to consider class "." and Id "#" and the position of the selector in the css - cascade. (CSS = CasCading Stylesheets)

Same selectors with different values for same parameters overwrite in the way, that the LAST ONE will overwrite all same selectors before.

Example:
Set a font size of an element (Id) or or a class of elements (class) to 10 pixel in your css in line 100 and lateron you type the identical "code" in line 300, but there you type 20 pixel, then the element will have a 20 pixel font size in your browser.

99
100 #left_modules {
101	font-size: 10px;
102     }
103
...
300 #left_modules {
301	font-size: 20px;
302     }
303
...

The latest given value (20px) for a parameter (font-size) of an element/selector (#left_module) applies and the font-size is 20px.
Mind: whatever font-size you type in in line 101, it will never apply, as in line 301 it is overwritten anyway!

But:

99
100 #left_modules {
101	font-size: 10px !important;
102     }
103
...
300 #left_modules {
301	font-size: 20px;
302     }
303
...

Now the left modules will have a font-size of 10 px, whatsoever you might type in in line 301. That is the way, how CSS works and that is what saves you time and eats your time at the same time.
Always mind: it is strictly HIERARCHIC - it is a CASCADE.

So last one element is higher in the hierarchy of the css cascade than all same elements before ... same way the last one css file overrides all same element defined in included css files.

An Id overrides a class, an Id of a class overrides an Id and an !importand overrides the same without !important.

Just check a few css files in your local editor - take one with codehighlighting.
For Windows you could try "Notepad+" (plus) for Linux "gedit".

general css structure:

#selectorId .selectorclass {
	parameter: value;
}

.nextselectorclass: value;
	parameter-specification: value1 value2 url('optional/path/maybe/for/background/image.png'); 
}

b) borders around modules in fivealive.css

I assume you want left and right modules drawn with a border, but not to affect anything else, like boxes in the tiki-center (page) or in footer or in header.

Then try this:

#col2 .box,
#col3 .box {
	border: 1px solid #aaa;
}

This will draw a 1 Pixel wide grey (#aaa = #aaaaaa) line around the box with the modules.

Assuming you want to change the background color of the box (as example a highly visible orange ;-) ):

#col2 .box,
#col3 .box {
	border: 1px solid #aaa;
	background-color: #ff9900;
}

Now rounded corners, zero margin (outside), but bottom margin 10 px (to the next module/box blow)

#col2 .box,
#col3 .box {
	border: 1px solid #aaa;
	background-color: #ff9900;
	margin: 0px;
	margin-bottom: 10px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

-webkit... and -moz... are parameter variations, which are necessary as the new CSS3 standarts are sadly not implemented in the same way in all browsers.

If you wanted only the top left and the bottom right corner rounded, you did it this way;

#col2 .box,
#col3 .box {
	border: 1px solid #aaa;
	background-color: #ff9900;
	margin: 0px;
	margin-bottom: 10px;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-bottomright: 20px;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
}

For more css parameters and CSS3 effects like shadows and transitions, just google for "CSS3 shadow", "box shadow", "text shadow" or "CSS3 transition" - you'll find plenty of tutorials and further information.

c) borders around pages in fivealive.css:

Again you have to deside the appropriate selector for that what you want.
I suggest to try #tiki-center:

#tiki-center {
	border: 1px solid #aaa;
}

This should draw a 1px border line around your pages.

d) finding the appropriate selectors:

Please consider, that I cannot give you all possible selectors and parameters and it's millions of possible combinations and variations.

To fond the right selectors and then play with the values, you should use the options of Firefox and Chrome to "inspect" the elements of your websites. Just right click (right mouse button) on an element of the website and in the popping up menu on your screen you find a menu item "inspect element" -> click on that and find css selectors, options and parameters.

Try that, play with it for a while, google for it and lateron you might come back and ask further, more detailed questions.

e) editing css in Tiki instead of css-file:

Instead of typing the above in the original css-file, you'll find a place in Tiki for customisations.
Just go to /tiki-admin.php?page=Look (admin area Look and Feel) and there find the Tab for "customisation" -> there is a field "custom css" and post your changes there.

The custom css field behaves like a css-file in your cascade of css files with a high level in the hierarchy (it tops your fivealive.css)

Please mind to save your changes somewhere locally or on a wikipage - you need a backup, if you make some faults when you backup your website.
Please believe me, that there are ways to lose plenty of hours of work, if you do not backup your customisations and your data somewhere.

I hope, I could help you and that my explanations have been understandable well enough.

Good luck,
Torsten

EDIT: found some typo and added some info, just after saving the post.
EDIT: found another typo. If anybody finds more typos: just keep them ;-)