Using CSS and JQuery to Manipulate Style and Markup

A Case Study of LAdrupal.orgby Helior Colorado

Drupal Learning Curve

Drupal Learning Curve

Drupal Learning Curve

Post-Installation stage

Post-Installation stage

Introducing the Garland Theme

Post-Installation stage

Introducing the Garland Theme

Post-Installation stage

Introducing the Garland Theme

3 stylesheets

Zen Theme

Zen Theme

Removes visual design

Zen Theme

Removes visual design

7 stylesheets!

Zen Theme

Removes visual design

7 stylesheets!

What are they doing?

Zen Theme

Removes visual design

7 stylesheets!

What are they doing?

nothing.

Zen Theme

Removes visual design

7 stylesheets!

What are they doing?

nothing.

restores default.

Zen Theme

Removes visual design

7 stylesheets!

What are they doing?

nothing.

restores default.

Why add complexity?

Don’t modify, override!

CSS - The Cascade

CSS - The Cascade

CSS - The Cascade

User !important

CSS - The Cascade

User !important

Author !important

CSS - The Cascade

User !important

Author !important

Author styles

CSS - The Cascade

User !important

Author !important

Author styles

User styles

CSS - The Cascade

User !important

Author !important

Author styles

User styles

Browser styles

CSS - The Cascade

‣Inline style=” ”User !important

Author !important

Author styles

User styles

Browser styles

CSS - The Cascade

‣Inline style=” ”

‣!important rule

User !important

Author !important

Author styles

User styles

Browser styles

CSS - The Cascade

‣Inline style=” ”

‣!important rule

‣#id selector

User !important

Author !important

Author styles

User styles

Browser styles

CSS - The Cascade

‣Inline style=” ”

‣!important rule

‣#id selector

‣.class selector

User !important

Author !important

Author styles

User styles

Browser styles

CSS - The Cascade

‣Inline style=” ”

‣!important rule

‣#id selector

‣.class selector

‣type selector

User !important

Author !important

Author styles

User styles

Browser styles

CSS - The Cascade

‣Inline style=” ”

‣!important rule

‣#id selector

‣.class selector

‣type selector

‣* (universal) selector

User !important

Author !important

Author styles

User styles

Browser styles

A(inline)

B(id)

C(class)

D(type)

x1000 x100 x10 x1

Specificity Calculator

A(inline)

B(id)

C(class)

D(type)

x1000 x100 x10 x1

Specificity Calculator

#main .block .nav li{display:inline;padding-left:5px;}

A(inline)

B(id)

C(class)

D(type)

x1000 x100 x10 x1

Specificity Calculator

#main .block .nav li{display:inline;padding-left:5px;}

= 121

A(inline)

B(id)

C(class)

D(type)

x1000 x100 x10 x1

Specificity Calculator

#main .block .nav li{display:inline;padding-left:5px;}

= 121

A(inline)

B(id)

C(class)

D(type)

x1000 x100 x10 x1

Specificity Calculator

#main .block .nav li{display:inline;padding-left:5px;}

#page #main .block li{display:block;font-weight:800;}

= 121

A(inline)

B(id)

C(class)

D(type)

x1000 x100 x10 x1

Specificity Calculator

#main .block .nav li{display:inline;padding-left:5px;}

#page #main .block li{display:block;font-weight:800;}

= 121

= 211

A(inline)

B(id)

C(class)

D(type)

x1000 x100 x10 x1

Specificity Calculator

#main .block .nav li{display:inline;padding-left:5px;}

#page #main .block li{display:block;font-weight:800;}

= 121

= 211

A(inline)

B(id)

C(class)

D(type)

x1000 x100 x10 x1

Specificity Calculator

#main .block .nav li{display:inline;padding-left:5px;}

#page #main .block li{display:block;font-weight:800;}

= 121

= 211

<li style=”display:none;”>item 1

</li>

A(inline)

B(id)

C(class)

D(type)

x1000 x100 x10 x1

Specificity Calculator

#main .block .nav li{display:inline;padding-left:5px;}

#page #main .block li{display:block;font-weight:800;}

= 121

= 211

<li style=”display:none;”>item 1

</li>

= 1000

A(inline)

B(id)

C(class)

D(type)

x1000 x100 x10 x1

Specificity Calculator

#main .block .nav li{display:inline;padding-left:5px;}

#page #main .block li{display:block;font-weight:800;}

= 121

= 211

<li style=”display:none;”>item 1

</li>

= 1000

Ready to move on.