Help:Custom css - Revision history

ShadowWolf: /* id selectors */ make a note about this being the preferred type of selector

2009-02-16T04:25:10Z

id selectors: make a note about this being the preferred type of selector

← Older revision		Revision as of 23:25, 15 February 2009
Line 14:		Line 14:
	==== id selectors ====		==== id selectors ====
	An 'id selector' uses the 'id' property that can be given to an HTML tag. It has the form: #<id> and uniquely identifies a single element in the entire page. By using an 'id selector' you do not have to know what type of element is being specified, just the name. A good example of an 'id selector' is the one that is used to reference the part of a page that contains the text of a story—#bodyContent—and while this name might seem specific to just the "Monobook" skin that is the default look of a Wiki based on the MediaWiki software, it is referenced even in the 'common' CSS files that all skins use, so it should be valid regardless of the current skin.		An 'id selector' uses the 'id' property that can be given to an HTML tag. It has the form: #<id> and uniquely identifies a single element in the entire page. By using an 'id selector' you do not have to know what type of element is being specified, just the name. A good example of an 'id selector' is the one that is used to reference the part of a page that contains the text of a story—#bodyContent—and while this name might seem specific to just the "Monobook" skin that is the default look of a Wiki based on the MediaWiki software, it is referenced even in the 'common' CSS files that all skins use, so it should be valid regardless of the current skin.

			This is the preferred format of selector because id's are unique—no element can have the same id as another if the page is expected to be considered standards compliant. Since the MediaWiki engine (and hence, Shifti) tries to only output standards compliant pages, there will only ever be one element with any given id. If you're using [http://spreadfirefox.com FireFox] you can use the [[wikipedia:Firebug (Firefox extension)\|Firebug]] extension to find out which ID is used by which element of the page. If you are not using FireFox you can use the 'view source' command to see the HTML that a page is built from—however it can be tricky to figure out which element covers the part of the page you are referencing this way.

	==== element selectors ====		==== element selectors ====

ShadowWolf: make sure that it is exceptionally clear that the custom css is unique to each individual user

2009-02-16T03:59:13Z

make sure that it is exceptionally clear that the custom css is unique to each individual user

← Older revision		Revision as of 22:59, 15 February 2009
Line 1:		Line 1:
	In the past people styled HTML by using inline tags such as <FONT> and that was good. But as time progressed people began searching for easier and easier ways to maintain consistent styling across large websites. In the end the [http://www.w3c.org W3C] (Worldwide Web Consortium) settled on CSS (cascading stylesheets). This is the technology that provides the style for all websites that seek to be compliant with the standards that the W3C has published. Since the MediaWiki engine that runs Shifti is the exact same code that runs Wikipedia, it outputs HTML that is compliant with one of the more recent forms of HTML (XHTML 1.0/Transitional).		In the past people styled HTML by using inline tags such as <FONT> and that was good. But as time progressed people began searching for easier and easier ways to maintain consistent styling across large websites. In the end the [http://www.w3c.org W3C] (Worldwide Web Consortium) settled on CSS (cascading stylesheets). This is the technology that provides the style for all websites that seek to be compliant with the standards that the W3C has published. Since the MediaWiki engine that runs Shifti is the exact same code that runs Wikipedia, it outputs HTML that is compliant with one of the more recent forms of HTML (XHTML 1.0/Transitional).

	But because of it's reliance on CSS for all styling, we get a bonus. MediaWiki<ref>The software that Shifti is built on</ref> allows all users to create custom CSS files that are loaded and can override settings in the sites own stylesheets.		But because of it's reliance on CSS for all styling, we get a bonus. MediaWiki<ref>The software that Shifti is built on</ref> allows all users to create custom CSS files that are loaded and can override settings in the sites own stylesheets. '''NOTE:''' These Custom CSS files are unique to each user—styles or formatting you have in your own is not visible or accessible by another user—and you must be logged in for this to work.
	__TOC__		__TOC__
	== Basics ==		== Basics ==

ShadowWolf: oops - forgot to flag as a help page

2009-02-16T03:47:01Z

oops - forgot to flag as a help page

← Older revision		Revision as of 22:47, 15 February 2009
Line 52:		Line 52:
	== Footnotes/References ==		== Footnotes/References ==
	<references/>		<references/>
			{{help}}

ShadowWolf: Custom CSS Hacks has been created - lets change the note to an invitation to modify that page

2009-02-16T03:44:06Z

Custom CSS Hacks has been created - lets change the note to an invitation to modify that page

← Older revision		Revision as of 22:44, 15 February 2009
Line 48:		Line 48:
	</pre>		</pre>

	For more ideas, see the [[Custom CSS Hacks]] page. (Go ahead and create it if ~~the page doesn't exist~~!)		For more ideas, see the [[Custom CSS Hacks]] page. (Go ahead and add your own hacks - even create new headings if you need to!)

	== Footnotes/References ==		== Footnotes/References ==
	<references/>		<references/>

ShadowWolf: We need this...

2009-02-16T03:30:03Z

We need this...

New page

In the past people styled HTML by using inline tags such as <FONT> and that was good. But as time progressed people began searching for easier and easier ways to maintain consistent styling across large websites. In the end the [http://www.w3c.org W3C] (Worldwide Web Consortium) settled on CSS (cascading stylesheets). This is the technology that provides the style for all websites that seek to be compliant with the standards that the W3C has published. Since the MediaWiki engine that runs Shifti is the exact same code that runs Wikipedia, it outputs HTML that is compliant with one of the more recent forms of HTML (XHTML 1.0/Transitional).

But because of it's reliance on CSS for all styling, we get a bonus. MediaWiki<ref>The software that Shifti is built on</ref> allows all users to create custom CSS files that are loaded and can override settings in the sites own stylesheets.
__TOC__
== Basics ==
The basic format of a stylesheet is:
<pre><selector> { <rules> }</pre>

A 'selector' is how the element or section of the page that the style applies to is defined. There are various forms of them and we'll get into that in a bit. The 'rules' are a series of name/value pairs and the end of a rule is specified with a semicolon (;). These will 'cascade' to all parts of a page that are at a 'lower level' than the part specified by the selector.

=== Selectors ===
As stated above, there are multiple forms of selectors. There are 'id selectors', 'element selectors', 'path selectors', 'class selectors' and 'pseudo-selectors'. Each of these has a specific and different format—although a 'path selector' is a special form of 'element' selector that specifies a specific element (or set of elements) based on how they are nested in the document.

==== id selectors ====
An 'id selector' uses the 'id' property that can be given to an HTML tag. It has the form: #<id> and uniquely identifies a single element in the entire page. By using an 'id selector' you do not have to know what type of element is being specified, just the name. A good example of an 'id selector' is the one that is used to reference the part of a page that contains the text of a story—#bodyContent—and while this name might seem specific to just the "Monobook" skin that is the default look of a Wiki based on the MediaWiki software, it is referenced even in the 'common' CSS files that all skins use, so it should be valid regardless of the current skin.

==== element selectors ====
Element Selectors are used to apply the same base styles to all elements with a certain name in the entire page. For instance, using 'div'<ref>Yes, without the quotes</ref> as a selector will cause that set of CSS rules to apply to all the <div> elements in a page. This is a very generic selector and unless you are extremely skilled at styling websites, you should avoid using it.

==== path selectors ====
No, this isn't formatted like the path to a file. Instead it is actually a list of 'id' and 'element' selectors that specifically identifies either a section of the document or a specific element based on the way the various HTML tags are nested. For instance you can specify all <p> tags inside the body of a page using the path selector: #bodyContent p

==== class selectors ====
Class selectors either start with a period or have a period in them and specify a name that can be used as the value of the "class" property of an HTML tag. It is unclear, but generally no element in a page output by the MediaWiki engine has a class parameter so this type of selector is of no real use on Shifti. Class selectors, like all other types of selector (save the pseudo-selectors) can be used as an element in a path selector.

==== pseudo-selectors ====
A pseudo-selector does not, actually, identify an element in the page. Instead it identifies a special property or action. Pseudo-selectors are nominally used for providing proper styling to links<ref>Since the <a> element doesn't just mean 'link' (it can also create an 'anchor point' in the text of a page that can then be linked to) this is rather important</ref> and for having things happen when you 'hover' the mouse-pointer over them.
The only pseudo-selector that is used in the CSS for Shifti is :link<ref>Which, as the name suggests, is used for styling links</ref>—though there are many others.

=== Rules ===
As previously stated, a rule in CSS has the format:
<pre><name>:<value>;</pre>

It should not need to be said, but the 'name' part is pre-defined. These range from things such as 'font-family' (for defining which font to use) to 'text-align' (for defining how to 'align' the elements<ref>Okay, so only 'inline' elements are actually affected.</ref> and text contained in a given element). For more information about the various names of 'CSS Properties' look for a reference on [http://www.google.com/ Google].

The value part changes based on what property you are modifying. For instance, to set a page to use a 'serif' font<ref>These are typefaces that have the little 'lines' on the edges—the (in)famous 'Times New Roman' is an example of a serif font</ref> you'd use the 'font-family' name and the value 'Times, Roman, serif'<ref>That is, 'Specific Font', 'Generic Font', 'Font Type' - ie: if you wanted to use 'Times New Roman' as the exact font and 'Georgia' as the fallback, you'd specify it as 'Times New Roman, Georgia, serif'</ref>. The complete rule would be: font-family: Times, Roman, serif; – don't worry if that's too complex for you, there isn't going to be a quiz.

== Custom CSS ==
=== Creating the File ===
This one is actually simple… Okay, maybe not that simple, but it is really easy to understand. To create a custom CSS for Shifti you'd just go to Special:MyFiles/<skin name>.css—for the basic 'MonoBook' skin this means you'd go to [[Special:MyFiles/monobook.css]]. This will redirect you to a sub-page of your User: page and you then click on the 'create' link and you're editing CSS that will then be loaded every time you are logged in and viewing Shifti.

=== Simple Ideas ===
One of the most requested features of Shifti is for paragraphs to start with an indent like you see in print. To achieve this on Shifti you'd put the following into your custom CSS file:
<pre>
#bodyContent p {
text-indent: 2em;
}
</pre>

For more ideas, see the [[Custom CSS Hacks]] page. (Go ahead and create it if the page doesn't exist!)

== Footnotes/References ==
<references/>