From Youtube


Aired August 3, 2012

This webinar provides an introduction to using CSS on your wiki. The basic elements, where to apply them and design advice are offered by Wikia Engineer Lucas Garczewski.

Slides & Transcript

Intro to CSS Slide01
August Webinar - Introduction to CSS

Intro to CSS Slide02

I’m Sarah Manley a community manager at Wikia and today we have with us  Lucas Garczewski, who is better known as Tor, and is an engineer at Wikia.

Intro to CSS Slide03

Today we are going to give you an introduction to CSS, what are the basic elements of CSS, pointers on how you can get started with using CSS and how it is used on Wikia. I want to start by saying that this will be a basic intro. CSS is a complex language, and we could spend hours describing all of its elements and capabilities, but as we don’t have time to do that, we are going to start with the basics. At the end we will list where you can get more advanced help, and please feel free to submit questions throughout the session. At the end we will do a Q&A as well as a live demo.

Intro to CSS Slide04

So what is CSS? It’s a Brazilian rock band of course!

Intro to CSS Slide05
What is CSS?

Well besides a band, CSS is also a programming language whose long name stands for Cascading Style Sheets. CSS interacts with html to allow you to stylize text, images and the layout on your wiki. Html is the structure of a page, css defines the look of the page. Modifying your wiki’s CSS is a way to create unique designs to areas not touched in the theme designer.

Intro to CSS Slide06

So as you might have guessed, being familiar with html is fairly important when trying to understand CSS. The more you know of html, the easier it will be for you to pick up CSS. But, if you are willing to learn the basics, and are ok with copying and pasting from other wikis as well as testing and learning, then you will be able to create a great look using CSS on your wiki.

Intro to CSS Slide07
Using CSS on your wiki

So where can you use CSS on your wiki? You can set up your own personal CSS which will apply to all wikis you visit or if you are an admin, you can edit your wiki’s CSS page. This will apply only to your wiki and to do so you edit the Mediawiki:Common.css page on your wiki. In this webinar we are going to focus on modifying this page and tips for the best way to do that.

Intro to CSS Slide08

Hi all, I am Tor, an engineer here at Wikia - and long time wiki editor. In my job here I work on fixing bugs, developing products and helping to users with their technical issues.

Intro to CSS Slide09

  • A style sheet is made up of a series of rules - which define how the elements of the page are displayed.
  • Before you apply a rule, you need to tell the browser which elements you want to style.
  • selector - specifies the html elements you are referring to
  • declaration - contains a property and a value - this lets you say what you want to be styled and how
  • In this slide, the selector is a header and are declaring that the color of the header will show as blue.

Intro to CSS Slide10

Selectors can be any html element - so a paragraph, a header, links, images - or essentially anything that exists on within structure of your webpage

  • Table here shows the html tag for common selectors people use

Intro to CSS Slide11
  • There is a basic pattern you need to follow in order for your browser to understand the css you are telling it - if there’s an error, say a typo, your browser will skip applying whatever you defined there
  • So what do you need? To head to make sure there is a selector, an open curly bracket, and then a property with a designated value.
  • After each property there is a colon, then the value and finally a semi-colon.
  • After this, you can move onto defining another property & value

Intro to CSS Slide12
  • If you want to change one specific unique area or element, you can use something called an element id.
  • This allows you to specifically call out this element on your css page, and modify the element.
  • On your wiki this might include notification bubbles, the wordmark, navigation or the search box

Intro to CSS Slide13
  • Here is an example of the element id, the wikia notification bubble, being changed
  • To do this, You find the element id in html for the wikia notification bubble, then go to your wikis css page, list that and then state that you would like it to display as red.

Intro to CSS Slide14
CSS Classes

So now suppose want to set a specific style, which you want to apply to a group of elements, but not your entire wiki, you would then find an existing or create a new class. The class can include any html elements.

Intro to CSS Slide15

Once the class exists, you can then use CSS to adjust it - changing the size, placement, color, so and so forth

Intro to CSS Slide16

So lets use a basic example that you likely have seen across wikia, the class that includes links to non-existent pages. By default on Wikia, we use css to style that class to say that those links should appear as red.

Intro to CSS Slide17

If you change the css to say green, then all of the non-existent links turn from red to green.

Intro to CSS Slide18
  • Across Wikia you will find many of the same classes being modified on wikis - including images & their borders, templates and most often, infoboxes.
  • Lets look at an example of that now on Harry Potter.

Intro to CSS Slide19

Intro to CSS Slide20

Intro to CSS Slide21

Intro to CSS Slide22

Intro to CSS Slide23

Intro to CSS Slide24

Intro to CSS Slide25

Intro to CSS Slide26

Intro to CSS Slide27

Intro to CSS Slide28

Intro to CSS Slide29

Intro to CSS Slide30

Other Webinars

This image was uploaded by Fandom Staff.
This image file was uploaded to be used on the thread namespace.

Appears on these pages

File history

Click on a date/time to view the file as it appeared at that time.

current16:31, August 6, 2012Thumbnail for version as of 16:31, August 6, 2012480 × 269 (21 KB)Sarah Manley (wall | contribs)created video