using jquery and css to manipulate style and markup
DESCRIPTION
Using jQuery and CSS to manipulate style and markup by Helior Colorado. Presented at Drupal Camp LA 2008 for the Designer Track. Located at the Los Angeles Convention Center approximately at 4:15pm.TRANSCRIPT
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.