41,821
edits
Help:CSS: Difference between revisions
m
no edit summary
No edit summary |
mNo edit summary |
||
| (9 intermediate revisions by 3 users not shown) | |||
| Line 3: | Line 3: | ||
---- | ---- | ||
'''CSS''' (officially known as '''Cascading Style Sheets''') sets how a page looks. On a special | '''CSS''' (officially known as '''Cascading Style Sheets''') sets how a page looks. On a special subpage of your user page, you can override the ''MonoBook skin'' to create your own personal look for the wiki. | ||
==Background== | ==Background== | ||
| Line 9: | Line 9: | ||
Consider the following line: | Consider the following line: | ||
<pre>body { | <pre> | ||
body { | |||
color: #00FF00; | |||
} | |||
</pre> | </pre> | ||
The selector/element that was edited was ''body'' - all the general text on a page. The property/attribute was ''color'' - text color. The value was ''#00FF00'' - making all text a green color. | The selector/element that was edited was ''body'' - all the general text on a page. The property/attribute was ''color'' - text color. The value was ''#00FF00'' - making all text a green color. | ||
Note the syntax for CSS. The selector is defined first, then an opening brace (<tt>{</tt>) "opens" the element for editing. Then the property appears, with a colon (<tt>:</tt>) after it, then the value (hex colors must have the # sign). Each time a value is set, a semicolon (<tt>;</tt>) is required at the end (except for the last line). Multiple lines of properties and redefined variables can occur within the curly braces (<tt>{ }</tt>), and all affect the same selected element. | Note the syntax for CSS. The selector is defined first, then an opening brace (<tt>{</tt>) "opens" the element for editing. Then the property appears, with a colon (<tt>:</tt>) after it, then the value (hex colors must have the # sign). Each time a value is set, a semicolon (<tt>;</tt>) is required at the end (except for the last line). Multiple lines of properties and redefined variables can occur within the curly braces (<tt>{ }</tt>), and all affect the same selected element. | ||
<pre>selector { | <pre> | ||
selector { | |||
property1: value; | |||
property2: value; | |||
property3: value; | |||
} | |||
</pre> | </pre> | ||
It is also possible to apply values to the properties of multiple selectors at once, separating them with a comma (<tt>,</tt>): | It is also possible to apply values to the properties of multiple selectors at once, separating them with a comma (<tt>,</tt>): | ||
<pre>selector1, | <pre> | ||
selector1, | |||
selector2 { | selector2 { | ||
property: value; | |||
} | } | ||
</pre> | </pre> | ||
| Line 34: | Line 37: | ||
Let's take a look at the "body" and "a" selectors: | Let's take a look at the "body" and "a" selectors: | ||
<pre>body { font-family:Arial; font-size:10px;} | <pre> | ||
body { font-family: Arial; font-size: 10px;} | |||
a { color: #080; text-decoration: none; } | a { color: #080; text-decoration: none; } | ||
a:visited { color: #050; } | a:visited { color: #050; } | ||
a:active { color: #111; } | a:active { color: #111; } | ||
#p-personal a.new { color: #b00; } | #p-personal a.new { color: #b00; } | ||
#p-personal a.new:visited { color:#800; } | #p-personal a.new:visited { color: #800; } | ||
#bodyContent a.external { color: #0a0; } | #bodyContent a.external { color: #0a0; } | ||
#bodyContent a.extiw:active { color: #020; } | #bodyContent a.extiw:active { color: #020; } | ||
| Line 63: | Line 67: | ||
Since element selectors refer to HTML tags, they are common on all websites; classes and IDs, however, are different on every site, and those used in wikis will only work in wikis. Keep in mind that some selectors will only take certain values (experiment!). The following is a table of some important simple selectors for wiki skins: | Since element selectors refer to HTML tags, they are common on all websites; classes and IDs, however, are different on every site, and those used in wikis will only work in wikis. Keep in mind that some selectors will only take certain values (experiment!). The following is a table of some important simple selectors for wiki skins: | ||
{|border=1 cellpadding=3 cellspacing=0 style="border-collapse:collapse; border-color: #f77; background: #fee | {|border=1 cellpadding=3 cellspacing=0 style="border-collapse:collapse; border-color:#f77; background:#fee" | ||
!Selector!!Element(s) selected | !Selector!!Element(s) selected | ||
|- | |- | ||
| Line 74: | Line 78: | ||
|pre||the content in pre tags | |pre||the content in pre tags | ||
|- | |- | ||
|textarea||large input areas for text, including the edit box | |textarea||large input areas for text, including the edit box. | ||
|- | |- | ||
|ul||unordered (bullet) list | |ul||unordered (bullet) list | ||
| Line 128: | Line 132: | ||
===Advanced selectors=== | ===Advanced selectors=== | ||
Firstly, there are ''pseudo-classes''. These are not really there, and are "created" by the CSS. A normal element must be used for the pseudo-element to be based on, and these are separated by a colon (<tt>:</tt>). For example: | Firstly, there are ''pseudo-classes''. These are not really there, and are "created" by the CSS. A normal element must be used for the pseudo-element to be based on, and these are separated by a colon (<tt>:</tt>). For example: | ||
<pre>a:hover {color: #aaa;}</pre> | <pre>a:hover { color: #aaa; }</pre> | ||
makes links | makes links gray when the cursor hovers over them. The following is a list of some useful pseudo-classes: | ||
{|border=1 cellpadding=3 cellspacing=0 style="border-collapse:collapse; border-color: #f77; background: #fee | {|border=1 cellpadding=3 cellspacing=0 style="border-collapse:collapse; border-color:#f77; background:#fee" | ||
!Selector!!Effect | !Selector!!Effect | ||
|- | |- | ||
| Line 150: | Line 154: | ||
Next, + and > can be used to select elements more precisely. For example: | Next, + and > can be used to select elements more precisely. For example: | ||
<pre>ul + p {border-top: 1px solid #aaa;}</pre> | <pre>ul + p { border-top: 1px solid #aaa; }</pre> | ||
puts a solid | puts a solid gray border at the top of every paragraph directly after an unordered list, and: | ||
<pre>ul > li {background-color: #ddf;}</pre> | <pre>ul > li { background-color: #ddf; }</pre> | ||
gives a light blue background to every list item directly inside an unordered list - as opposed to being in an element that itself is inside the ''<nowiki><ul></nowiki>'' tag. | gives a light blue background to every list item directly inside an unordered list - as opposed to being in an element that itself is inside the ''<nowiki><ul></nowiki>'' tag. | ||
| Line 170: | Line 174: | ||
*4 values: assigned in the order top, right, bottom, left. | *4 values: assigned in the order top, right, bottom, left. | ||
Some properties take a | Some properties take a color value. This can be either: | ||
*A pre-defined color name (check out [[wikipedia:Web_colors#X11_color_names|this list]]); | *A pre-defined color name (check out [[wikipedia:Web_colors#X11_color_names|this list]]); | ||
*a hex color in the form ''#000000'' or ''#000'', where each digit is a hexadecimal digit representing red, green or blue; or | *a hex color in the form ''#000000'' or ''#000'', where each digit is a hexadecimal digit representing red, green or blue; or | ||
*''rgb(red, green, blue)'', where red, green and blue are numbers up to 255 or 100%. | *''rgb(red, green, blue)'', where red, green and blue are numbers up to 255 or 100%. | ||
{|border=1 cellpadding=3 cellspacing=0 style="border-collapse:collapse; border-color: #f77; background: #fee;" | {|border=1 cellpadding=3 cellspacing=0 style="border-collapse:collapse; border-color:#f77; background:#fee; margin-top:10px" | ||
!Property!!Description!!Possible values | !Property!!Description!!Possible values | ||
|- | |- | ||
| Line 182: | Line 186: | ||
|font-size||self-explanatory||takes a measurement | |font-size||self-explanatory||takes a measurement | ||
|- | |- | ||
|font-style||sets italics||''normal'', ''italic'', ''[[ | |font-style||sets italics||''normal'', ''italic'', ''[[wikipedia:Oblique type|oblique]]'' | ||
|- | |- | ||
|font-variant||sets small-caps||''normal'', ''[[ | |font-variant||sets small-caps||''normal'', ''[[wikipedia:Small caps|small-caps]]'' | ||
|- | |- | ||
|font-weight||sets bold||''normal'', ''bold'' (other values are possible, but barely distinguishable - ''bolder'', ''lighter'' a number up to about 1000) | |font-weight||sets bold||''normal'', ''bold'' (other values are possible, but barely distinguishable - ''bolder'', ''lighter'' a number up to about 1000) | ||
| Line 208: | Line 212: | ||
|background-color|| ||takes a color value | |background-color|| ||takes a color value | ||
|- | |- | ||
|background-image|| ||takes a ''complete'' url or a color value preceeding a URL - ''background: url(<nowiki>http://www.imagesite.com/youralbum/bgpic.jpg</nowiki>);'' or ''background: #055 url(<nowiki>http://www.example.com/image.png</nowiki>);''. In the latter case, the | |background-image|| ||takes a ''complete'' url or a color value preceeding a URL - ''background: url(<nowiki>http://www.imagesite.com/youralbum/bgpic.jpg</nowiki>);'' or ''background: #055 url(<nowiki>http://www.example.com/image.png</nowiki>);''. In the latter case, the color is shown if the image cannot be found, and it shows through transparent or translucent images. | ||
|- | |- | ||
|background-repeat||repeating pattern of a background image||''repeat'', ''repeat-x'', ''repeat-y'', ''no-repeat''; with x being repeating horizontally only and y being repeating vertically only. | |background-repeat||repeating pattern of a background image||''repeat'', ''repeat-x'', ''repeat-y'', ''no-repeat''; with x being repeating horizontally only and y being repeating vertically only. | ||
| Line 261: | Line 265: | ||
Here's another excerpt from Wayoshi's CSS: | Here's another excerpt from Wayoshi's CSS: | ||
<pre> | <pre> | ||
#p-logo a { background: url(http://img.photobucket.com/albums/v506/Kimi12715/MarioWiki/Wayoshilogo3.png) 35% 50% no-repeat !important; } | |||
#content, #content table, #p-cactions ul li a { background: #fcfffc; } | |||
h1 { font-family: Jokerman; font-size:28px; color:#117611; } | |||
h2, h3, h4, h5, h6 { color: #020; } | |||
ul { list-style: url(http://img.photobucket.com/albums/v506/Kimi12715/MarioWiki/uldot.png); } | |||
pre { border: 1px dashed #060; } | |||
#catlinks { | |||
border: 1px dotted #272; | |||
background-color: #fdfffd; | |||
padding: 4px; | |||
} | |||
#siteNotice { | |||
background: #fcfffc; | |||
} | |||
.usermessage { | |||
background: #00E400; | |||
border: 1.1px dashed #060; | |||
} | |||
select { | |||
border: 1px solid #2f6f2f; | |||
} | |||
input { | |||
background-color: #fdfffd; | |||
} | |||
textarea { | |||
font-family: Boukman Old Style; | |||
font-size: 14px; | |||
} | |||
</pre> | </pre> | ||
Result: Text background is a very light green. The usermessage table is redesigned to be green and have a dashed border. The logo has changed (notice after the url some specifications - these are important to have for the logo). The pre border is green. The bullet image has changed (to a green circle). The title of each page is shown in a different font and color. The rest of the headers are a dark green. The categories table has a green background, border, and some space between the text and the border. The sitenotice has the same background as the content. The select box has a green border. The input box has a light green bg. Textarea has a different font. | Result: Text background is a very light green. The usermessage table is redesigned to be green and have a dashed border. The logo has changed (notice after the url some specifications - these are important to have for the logo). The pre border is green. The bullet image has changed (to a green circle). The title of each page is shown in a different font and color. The rest of the headers are a dark green. The categories table has a green background, border, and some space between the text and the border. The sitenotice has the same background as the content. The select box has a green border. The input box has a light green bg. Textarea has a different font. | ||
| Line 301: | Line 302: | ||
With the above selectors, properties, and values above, you should be able to stylize your wiki to your needs very well. | With the above selectors, properties, and values above, you should be able to stylize your wiki to your needs very well. | ||
==Creating your | ==Creating your monobook.css== | ||
You have your own skin page at <tt>User:''Username''/monobook.css</tt>, with stress on the lower case '''m'''. When editing it, you should see some new text: | You have your own skin page at <tt>User:''Username''/monobook.css</tt>, with stress on the lower case '''m'''. When editing it, you should see some new text: | ||
<blockquote> | <blockquote> | ||
| Line 310: | Line 311: | ||
To see the changes after saving, ''hard'' refresh (press the F5 key, sometimes Ctrl + F5). Congratulations, you now have your own unique skin. | To see the changes after saving, ''hard'' refresh (press the F5 key, sometimes Ctrl + F5). Congratulations, you now have your own unique skin. | ||
{{ | {{MarioWiki}} | ||
{{Shortcut|SMW:CSS|SMW:STYLE}} | |||
[[Category:Help]] | |||