Format Rules/CSS: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
m Protected "Format Rules/CSS" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)) |
||
(2 intermediate revisions by the same user not shown) | |||
Line 5: | Line 5: | ||
* To use article based stylesheets, first make a link to the article the way you would any page but end it with <code>.css</code>. The logical place to do this is on the first page of a story if it is only designed for that story, or your user page if it is more general in nature. | * To use article based stylesheets, first make a link to the article the way you would any page but end it with <code>.css</code>. The logical place to do this is on the first page of a story if it is only designed for that story, or your user page if it is more general in nature. | ||
* Next write your CSS code like you would normally. | * Next write your CSS code like you would normally. | ||
* At the end of your CSS code place the following <code><nowiki>/* <noinclude>[[Category:StyleSheets]]</noinclude> */</nowiki></code>. This is treated as a comment in CSS, but puts it in the | * At the end of your CSS code place the following <code><nowiki>/* <noinclude>[[Category:StyleSheets]]</noinclude> */</nowiki></code>. This is treated as a comment in CSS, but puts it in the StyleSheets category for the site. You can also add it to your story category if you would like to, but it is not required. | ||
* On any page you want to use your custom CSS styles put the following: <code><nowiki>{{#css:MyStyles.css}}</nowiki></code> where '''MyStyles.css''' is the name of your CSS article. | * On any page you want to use your custom CSS styles put the following: <code><nowiki>{{#css:MyStyles.css}}</nowiki></code> where '''MyStyles.css''' is the name of your CSS article. | ||
* Use your CSS styles. | * Use your CSS styles. | ||
Line 21: | Line 21: | ||
* Use your CSS styles | * Use your CSS styles | ||
---- | |||
For more information on the use of CSS on the site consult this page: [https://www.mediawiki.org/wiki/Extension:CSS https://www.mediawiki.org/wiki/Extension:CSS] | For more information on the use of CSS on the site consult this page: [https://www.mediawiki.org/wiki/Extension:CSS https://www.mediawiki.org/wiki/Extension:CSS] |
Latest revision as of 00:55, 6 September 2020
You can now add custom stylesheets to your pages. This allows you a LOT of control over how your page looks. There are two methods for doing this: article based and inline.
Article Based
Article based usage is usually going to be the way you want to handle custom CSS on the site.
- To use article based stylesheets, first make a link to the article the way you would any page but end it with
.css
. The logical place to do this is on the first page of a story if it is only designed for that story, or your user page if it is more general in nature. - Next write your CSS code like you would normally.
- At the end of your CSS code place the following
/* <noinclude>[[Category:StyleSheets]]</noinclude> */
. This is treated as a comment in CSS, but puts it in the StyleSheets category for the site. You can also add it to your story category if you would like to, but it is not required. - On any page you want to use your custom CSS styles put the following:
{{#css:MyStyles.css}}
where MyStyles.css is the name of your CSS article. - Use your CSS styles.
Inline
Inline CSS is only useful if you are only wanting the styles for a single page. If you want to reuse styles over and over again, go with the article method.
- To use the inline stylesheet simply add something like the following to the page you want to use them on:
{{#css: body { background: yellow; font-size: 20pt; color: red; } }}
- Use your CSS styles
For more information on the use of CSS on the site consult this page: https://www.mediawiki.org/wiki/Extension:CSS
If you need help learning CSS, I recommend this site: http://www.w3schools.com/css/default.asp