Description

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

August Webinar - Introduction to CSS

Presenters

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.

Agenda

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.

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

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.

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.

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.

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.

Definitions

• 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.

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

• 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

• 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

• 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.

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.

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

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.

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

• 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.

Other Webinars

• File:Templates Overview
• File:Wikia Mobile Apps & Skin
• File:Videos on your wiki
• File:Templates 101 Tips for editing & creating templates on Wikia
• File:Social Media & Your Wiki
• File:Best Practices for Structuring your Wiki Categories, Namespaces and Navigation
• File:SEO Tips and Tricks
• File:Wikia Webinars - Introducing the Message Wall & Wiki Navigation
• File:Managing your wiki - review of tools & special pages
• Webinars
• File:Mainpages 101 - How to make a great mainpage for your wiki
• File:Keeping The Peace - Best practices for handling conflict on your wiki
• File:Tips for Designing & Promoting Your Wiki
• File:What is your copyright - A webinar focused on content licensing with Creative Commons.wmv
• File:Wikia Copyright Basics Webinar
• File:Community Guidelines Webinar
• File:Tips & Tools for Community Discussions
• File:Advanced Ways to Customize Your Wiki Webinar
• File:Wikia Webinars - Admin Tools & Tips

This image was uploaded by Fandom Staff.

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