Format Rules/CSS: Difference between revisions

From All The Fallen Stories
Jump to navigation Jump to search
Elerneron (talk | contribs)
Created page with "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...."
 
Elerneron (talk | contribs)
m Protected "Format Rules/CSS" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))
 
(3 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 stylesheet category for the site.  You can also add it to your story category if you would like to, but it is not required.
* 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]
If you need help learning CSS, I recommend this site: [http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp]
If you need help learning CSS, I recommend this site: [http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp]


[[Category:Format Rules|CSS]]
[[Category:Format Rules|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