CSS in Live Chatby Jacklyn Stachurski

CSS in Live Chat• Business/VIP/Enterprise Users only• Helps with consistency• Guidelines in FG (

http://fieldguide.automattic.com/guide-to-live-chat/supporting-css-in-live-chat/)

CSS Basics - Selectors

• HTML - all specified HTML tags (ie: a, h1, p)• Class - marked with a period (.) and are not

unique. Can be used more than once on a page and elements can have more than one class

• ID - marked with a hashtag (#) and are unique. Can only be used once on a page and only one id per element

• Universal - marked by an asterisk (*) affects all HTML elements on the page

CSS Basics - Selectors

Order: Grouping and Combinatory

Grouping:

If you want two or more selectors to have the same declarations, you can group them together using commas to separate them:

p, .site-info, h1 { font-family: Helvetica,Arial,sans-serif; }

CSS Basics - Selectors

Order: Grouping and Combinatory

Combinatory:

If you want a specific style for one element you can give a very specific set of selectors, separated by a space:

p strong em { color: #d2d2d2;}

CSS Declarations

Made up of properties and values

Try it out! - Theme: Demand

Theme Quirksthemequirks.wordpress.com

FireFox

Safari

Chrome

Copyright• Can be added to Footer on WordPress.com• Difficult sometimes because of floats, grids,

centering• Basic starts with selector and pseudo

element:

.site-info::after { or .site-info::before {

Copyright• Add Declaration

.site-info::before { content: ‘c 2015’;}• Problem: Doesn’t line up!

Solution: Combinatory Selectors! orMOAR declarations (ie: display: inline/block;float: left/right; text-align: center; )

Copyright Practice

1. Fortune

2. Mirror

3. Edin

Go over these themes to add copyright