Simple techniques for customizing a Digital Repository Public Interface
using CSS
A hands-on presentation
Background (metaphorical)
What is CSS bull CSS stands for Cascading
Stylesheets bull HTML stylistic shortcut bull Completely reversible bull Allows for branding without
functionality customization
Why did we find it necessary bull Hosted repository solution
(Preservica CE) bull Able to hand-encode html
pages buthellip bull Appearance of standardized
functions not encodable bull Only able to input custom
CSS
Example of results
Example for the demo
CSS crash-course bull 3 types of CSS
ndash Inline in the header in an external css ndash For inline within the html tag insert style=ldquo[css code] [more css code]rdquo ndash For external css use the format [html tag or css class][css code name css code
value] [more css code] bull Applying CSS
ndash CSS is a simple text file with file extension css ndash Selectors are the way CSS identifies what to modify on a page ndash Selectors most commonly are applied using the html element name or class
bull Ex pwidth 25 padding-bottom 30px bull Ex col-lg-2width 25 padding-bottom 30px bull Ex pcol-lg-2width 25 padding-bottom 30px
ndash Less common selectors include id attributes and gt ndash Comment your code as much as you can to help others and yourself
remember what you did why and how bull Ex I did it because I could
Tools 1 W3Schools bull What is it
ndash Web developer reference site
ndash Not created by the W3C ndash httpwwww3schoolscom
bull Why use it ndash Books cost money and take
time to read ndash Readily available anywhere
with web access ndash ldquoTry It Yourselfrdquo gives the
ability to try something out ndash More than just CSS
Tool 2 ldquoInspect Elementrdquo bull What is it
ndash A code console (Chrome Firefox IE) for webpages
ndash Allows for modification or insertion of code without changing the file
bull Why use it ndash See how the web page is
structured ndash Identify classes and elements for
manipulation ndash Test out how modifications will
look and feel bull How to access it
ndash Right-click on a webpage and select it from the resulting menu
Tool 3 Notepad bull What to use
ndash An actual notepad for handwritten notes
ndash A good text editor such as Notepad++ Crimson Editor TextWrangler
bull Why ndash You WILL forget how you
saw something done or how you did it
ndash You WILL also forget how you did that really cool thing
ndash To create your CSS file
Method 1 Reverse engineering (aka borrowing code)
bull Why use it
ndash ldquoThatrsquos cool how did you do thatrdquo
bull What it lets you do ndash Look at part or all of the
stylesheet of a website to see what they did
Method 1 Reverse engineering (aka borrowing code)
bull How to do it ndash Right-click the part of the
webpage you are interested in and choose Inspect Element
ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file
ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a
new browser windowtab bull Save the file
bull NOW Puzzle over the code until you figure it out (w3schools helps here)
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull Why use it ndash A standardized system
will re-use classeshtml tags
ndash Branding
bull What it lets you do ndash Select a common
elementclass and apply a change to the entire site
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull How to do it ndash Right-click on a part of the page you
want to modify and select Inspect Element
ndash Identify the html elementclass that applies
ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your
CSS file bull Notes
ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other
types of pages on your site as it could affect other things
ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied
ndash Write the code you are testing on a scratchpad so you donrsquot lose it
Method 2 Broad strokes (expanded view)
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Background (metaphorical)
What is CSS bull CSS stands for Cascading
Stylesheets bull HTML stylistic shortcut bull Completely reversible bull Allows for branding without
functionality customization
Why did we find it necessary bull Hosted repository solution
(Preservica CE) bull Able to hand-encode html
pages buthellip bull Appearance of standardized
functions not encodable bull Only able to input custom
CSS
Example of results
Example for the demo
CSS crash-course bull 3 types of CSS
ndash Inline in the header in an external css ndash For inline within the html tag insert style=ldquo[css code] [more css code]rdquo ndash For external css use the format [html tag or css class][css code name css code
value] [more css code] bull Applying CSS
ndash CSS is a simple text file with file extension css ndash Selectors are the way CSS identifies what to modify on a page ndash Selectors most commonly are applied using the html element name or class
bull Ex pwidth 25 padding-bottom 30px bull Ex col-lg-2width 25 padding-bottom 30px bull Ex pcol-lg-2width 25 padding-bottom 30px
ndash Less common selectors include id attributes and gt ndash Comment your code as much as you can to help others and yourself
remember what you did why and how bull Ex I did it because I could
Tools 1 W3Schools bull What is it
ndash Web developer reference site
ndash Not created by the W3C ndash httpwwww3schoolscom
bull Why use it ndash Books cost money and take
time to read ndash Readily available anywhere
with web access ndash ldquoTry It Yourselfrdquo gives the
ability to try something out ndash More than just CSS
Tool 2 ldquoInspect Elementrdquo bull What is it
ndash A code console (Chrome Firefox IE) for webpages
ndash Allows for modification or insertion of code without changing the file
bull Why use it ndash See how the web page is
structured ndash Identify classes and elements for
manipulation ndash Test out how modifications will
look and feel bull How to access it
ndash Right-click on a webpage and select it from the resulting menu
Tool 3 Notepad bull What to use
ndash An actual notepad for handwritten notes
ndash A good text editor such as Notepad++ Crimson Editor TextWrangler
bull Why ndash You WILL forget how you
saw something done or how you did it
ndash You WILL also forget how you did that really cool thing
ndash To create your CSS file
Method 1 Reverse engineering (aka borrowing code)
bull Why use it
ndash ldquoThatrsquos cool how did you do thatrdquo
bull What it lets you do ndash Look at part or all of the
stylesheet of a website to see what they did
Method 1 Reverse engineering (aka borrowing code)
bull How to do it ndash Right-click the part of the
webpage you are interested in and choose Inspect Element
ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file
ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a
new browser windowtab bull Save the file
bull NOW Puzzle over the code until you figure it out (w3schools helps here)
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull Why use it ndash A standardized system
will re-use classeshtml tags
ndash Branding
bull What it lets you do ndash Select a common
elementclass and apply a change to the entire site
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull How to do it ndash Right-click on a part of the page you
want to modify and select Inspect Element
ndash Identify the html elementclass that applies
ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your
CSS file bull Notes
ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other
types of pages on your site as it could affect other things
ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied
ndash Write the code you are testing on a scratchpad so you donrsquot lose it
Method 2 Broad strokes (expanded view)
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Example of results
Example for the demo
CSS crash-course bull 3 types of CSS
ndash Inline in the header in an external css ndash For inline within the html tag insert style=ldquo[css code] [more css code]rdquo ndash For external css use the format [html tag or css class][css code name css code
value] [more css code] bull Applying CSS
ndash CSS is a simple text file with file extension css ndash Selectors are the way CSS identifies what to modify on a page ndash Selectors most commonly are applied using the html element name or class
bull Ex pwidth 25 padding-bottom 30px bull Ex col-lg-2width 25 padding-bottom 30px bull Ex pcol-lg-2width 25 padding-bottom 30px
ndash Less common selectors include id attributes and gt ndash Comment your code as much as you can to help others and yourself
remember what you did why and how bull Ex I did it because I could
Tools 1 W3Schools bull What is it
ndash Web developer reference site
ndash Not created by the W3C ndash httpwwww3schoolscom
bull Why use it ndash Books cost money and take
time to read ndash Readily available anywhere
with web access ndash ldquoTry It Yourselfrdquo gives the
ability to try something out ndash More than just CSS
Tool 2 ldquoInspect Elementrdquo bull What is it
ndash A code console (Chrome Firefox IE) for webpages
ndash Allows for modification or insertion of code without changing the file
bull Why use it ndash See how the web page is
structured ndash Identify classes and elements for
manipulation ndash Test out how modifications will
look and feel bull How to access it
ndash Right-click on a webpage and select it from the resulting menu
Tool 3 Notepad bull What to use
ndash An actual notepad for handwritten notes
ndash A good text editor such as Notepad++ Crimson Editor TextWrangler
bull Why ndash You WILL forget how you
saw something done or how you did it
ndash You WILL also forget how you did that really cool thing
ndash To create your CSS file
Method 1 Reverse engineering (aka borrowing code)
bull Why use it
ndash ldquoThatrsquos cool how did you do thatrdquo
bull What it lets you do ndash Look at part or all of the
stylesheet of a website to see what they did
Method 1 Reverse engineering (aka borrowing code)
bull How to do it ndash Right-click the part of the
webpage you are interested in and choose Inspect Element
ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file
ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a
new browser windowtab bull Save the file
bull NOW Puzzle over the code until you figure it out (w3schools helps here)
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull Why use it ndash A standardized system
will re-use classeshtml tags
ndash Branding
bull What it lets you do ndash Select a common
elementclass and apply a change to the entire site
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull How to do it ndash Right-click on a part of the page you
want to modify and select Inspect Element
ndash Identify the html elementclass that applies
ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your
CSS file bull Notes
ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other
types of pages on your site as it could affect other things
ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied
ndash Write the code you are testing on a scratchpad so you donrsquot lose it
Method 2 Broad strokes (expanded view)
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Example for the demo
CSS crash-course bull 3 types of CSS
ndash Inline in the header in an external css ndash For inline within the html tag insert style=ldquo[css code] [more css code]rdquo ndash For external css use the format [html tag or css class][css code name css code
value] [more css code] bull Applying CSS
ndash CSS is a simple text file with file extension css ndash Selectors are the way CSS identifies what to modify on a page ndash Selectors most commonly are applied using the html element name or class
bull Ex pwidth 25 padding-bottom 30px bull Ex col-lg-2width 25 padding-bottom 30px bull Ex pcol-lg-2width 25 padding-bottom 30px
ndash Less common selectors include id attributes and gt ndash Comment your code as much as you can to help others and yourself
remember what you did why and how bull Ex I did it because I could
Tools 1 W3Schools bull What is it
ndash Web developer reference site
ndash Not created by the W3C ndash httpwwww3schoolscom
bull Why use it ndash Books cost money and take
time to read ndash Readily available anywhere
with web access ndash ldquoTry It Yourselfrdquo gives the
ability to try something out ndash More than just CSS
Tool 2 ldquoInspect Elementrdquo bull What is it
ndash A code console (Chrome Firefox IE) for webpages
ndash Allows for modification or insertion of code without changing the file
bull Why use it ndash See how the web page is
structured ndash Identify classes and elements for
manipulation ndash Test out how modifications will
look and feel bull How to access it
ndash Right-click on a webpage and select it from the resulting menu
Tool 3 Notepad bull What to use
ndash An actual notepad for handwritten notes
ndash A good text editor such as Notepad++ Crimson Editor TextWrangler
bull Why ndash You WILL forget how you
saw something done or how you did it
ndash You WILL also forget how you did that really cool thing
ndash To create your CSS file
Method 1 Reverse engineering (aka borrowing code)
bull Why use it
ndash ldquoThatrsquos cool how did you do thatrdquo
bull What it lets you do ndash Look at part or all of the
stylesheet of a website to see what they did
Method 1 Reverse engineering (aka borrowing code)
bull How to do it ndash Right-click the part of the
webpage you are interested in and choose Inspect Element
ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file
ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a
new browser windowtab bull Save the file
bull NOW Puzzle over the code until you figure it out (w3schools helps here)
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull Why use it ndash A standardized system
will re-use classeshtml tags
ndash Branding
bull What it lets you do ndash Select a common
elementclass and apply a change to the entire site
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull How to do it ndash Right-click on a part of the page you
want to modify and select Inspect Element
ndash Identify the html elementclass that applies
ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your
CSS file bull Notes
ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other
types of pages on your site as it could affect other things
ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied
ndash Write the code you are testing on a scratchpad so you donrsquot lose it
Method 2 Broad strokes (expanded view)
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
CSS crash-course bull 3 types of CSS
ndash Inline in the header in an external css ndash For inline within the html tag insert style=ldquo[css code] [more css code]rdquo ndash For external css use the format [html tag or css class][css code name css code
value] [more css code] bull Applying CSS
ndash CSS is a simple text file with file extension css ndash Selectors are the way CSS identifies what to modify on a page ndash Selectors most commonly are applied using the html element name or class
bull Ex pwidth 25 padding-bottom 30px bull Ex col-lg-2width 25 padding-bottom 30px bull Ex pcol-lg-2width 25 padding-bottom 30px
ndash Less common selectors include id attributes and gt ndash Comment your code as much as you can to help others and yourself
remember what you did why and how bull Ex I did it because I could
Tools 1 W3Schools bull What is it
ndash Web developer reference site
ndash Not created by the W3C ndash httpwwww3schoolscom
bull Why use it ndash Books cost money and take
time to read ndash Readily available anywhere
with web access ndash ldquoTry It Yourselfrdquo gives the
ability to try something out ndash More than just CSS
Tool 2 ldquoInspect Elementrdquo bull What is it
ndash A code console (Chrome Firefox IE) for webpages
ndash Allows for modification or insertion of code without changing the file
bull Why use it ndash See how the web page is
structured ndash Identify classes and elements for
manipulation ndash Test out how modifications will
look and feel bull How to access it
ndash Right-click on a webpage and select it from the resulting menu
Tool 3 Notepad bull What to use
ndash An actual notepad for handwritten notes
ndash A good text editor such as Notepad++ Crimson Editor TextWrangler
bull Why ndash You WILL forget how you
saw something done or how you did it
ndash You WILL also forget how you did that really cool thing
ndash To create your CSS file
Method 1 Reverse engineering (aka borrowing code)
bull Why use it
ndash ldquoThatrsquos cool how did you do thatrdquo
bull What it lets you do ndash Look at part or all of the
stylesheet of a website to see what they did
Method 1 Reverse engineering (aka borrowing code)
bull How to do it ndash Right-click the part of the
webpage you are interested in and choose Inspect Element
ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file
ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a
new browser windowtab bull Save the file
bull NOW Puzzle over the code until you figure it out (w3schools helps here)
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull Why use it ndash A standardized system
will re-use classeshtml tags
ndash Branding
bull What it lets you do ndash Select a common
elementclass and apply a change to the entire site
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull How to do it ndash Right-click on a part of the page you
want to modify and select Inspect Element
ndash Identify the html elementclass that applies
ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your
CSS file bull Notes
ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other
types of pages on your site as it could affect other things
ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied
ndash Write the code you are testing on a scratchpad so you donrsquot lose it
Method 2 Broad strokes (expanded view)
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Tools 1 W3Schools bull What is it
ndash Web developer reference site
ndash Not created by the W3C ndash httpwwww3schoolscom
bull Why use it ndash Books cost money and take
time to read ndash Readily available anywhere
with web access ndash ldquoTry It Yourselfrdquo gives the
ability to try something out ndash More than just CSS
Tool 2 ldquoInspect Elementrdquo bull What is it
ndash A code console (Chrome Firefox IE) for webpages
ndash Allows for modification or insertion of code without changing the file
bull Why use it ndash See how the web page is
structured ndash Identify classes and elements for
manipulation ndash Test out how modifications will
look and feel bull How to access it
ndash Right-click on a webpage and select it from the resulting menu
Tool 3 Notepad bull What to use
ndash An actual notepad for handwritten notes
ndash A good text editor such as Notepad++ Crimson Editor TextWrangler
bull Why ndash You WILL forget how you
saw something done or how you did it
ndash You WILL also forget how you did that really cool thing
ndash To create your CSS file
Method 1 Reverse engineering (aka borrowing code)
bull Why use it
ndash ldquoThatrsquos cool how did you do thatrdquo
bull What it lets you do ndash Look at part or all of the
stylesheet of a website to see what they did
Method 1 Reverse engineering (aka borrowing code)
bull How to do it ndash Right-click the part of the
webpage you are interested in and choose Inspect Element
ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file
ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a
new browser windowtab bull Save the file
bull NOW Puzzle over the code until you figure it out (w3schools helps here)
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull Why use it ndash A standardized system
will re-use classeshtml tags
ndash Branding
bull What it lets you do ndash Select a common
elementclass and apply a change to the entire site
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull How to do it ndash Right-click on a part of the page you
want to modify and select Inspect Element
ndash Identify the html elementclass that applies
ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your
CSS file bull Notes
ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other
types of pages on your site as it could affect other things
ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied
ndash Write the code you are testing on a scratchpad so you donrsquot lose it
Method 2 Broad strokes (expanded view)
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Tool 2 ldquoInspect Elementrdquo bull What is it
ndash A code console (Chrome Firefox IE) for webpages
ndash Allows for modification or insertion of code without changing the file
bull Why use it ndash See how the web page is
structured ndash Identify classes and elements for
manipulation ndash Test out how modifications will
look and feel bull How to access it
ndash Right-click on a webpage and select it from the resulting menu
Tool 3 Notepad bull What to use
ndash An actual notepad for handwritten notes
ndash A good text editor such as Notepad++ Crimson Editor TextWrangler
bull Why ndash You WILL forget how you
saw something done or how you did it
ndash You WILL also forget how you did that really cool thing
ndash To create your CSS file
Method 1 Reverse engineering (aka borrowing code)
bull Why use it
ndash ldquoThatrsquos cool how did you do thatrdquo
bull What it lets you do ndash Look at part or all of the
stylesheet of a website to see what they did
Method 1 Reverse engineering (aka borrowing code)
bull How to do it ndash Right-click the part of the
webpage you are interested in and choose Inspect Element
ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file
ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a
new browser windowtab bull Save the file
bull NOW Puzzle over the code until you figure it out (w3schools helps here)
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull Why use it ndash A standardized system
will re-use classeshtml tags
ndash Branding
bull What it lets you do ndash Select a common
elementclass and apply a change to the entire site
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull How to do it ndash Right-click on a part of the page you
want to modify and select Inspect Element
ndash Identify the html elementclass that applies
ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your
CSS file bull Notes
ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other
types of pages on your site as it could affect other things
ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied
ndash Write the code you are testing on a scratchpad so you donrsquot lose it
Method 2 Broad strokes (expanded view)
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Tool 3 Notepad bull What to use
ndash An actual notepad for handwritten notes
ndash A good text editor such as Notepad++ Crimson Editor TextWrangler
bull Why ndash You WILL forget how you
saw something done or how you did it
ndash You WILL also forget how you did that really cool thing
ndash To create your CSS file
Method 1 Reverse engineering (aka borrowing code)
bull Why use it
ndash ldquoThatrsquos cool how did you do thatrdquo
bull What it lets you do ndash Look at part or all of the
stylesheet of a website to see what they did
Method 1 Reverse engineering (aka borrowing code)
bull How to do it ndash Right-click the part of the
webpage you are interested in and choose Inspect Element
ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file
ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a
new browser windowtab bull Save the file
bull NOW Puzzle over the code until you figure it out (w3schools helps here)
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull Why use it ndash A standardized system
will re-use classeshtml tags
ndash Branding
bull What it lets you do ndash Select a common
elementclass and apply a change to the entire site
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull How to do it ndash Right-click on a part of the page you
want to modify and select Inspect Element
ndash Identify the html elementclass that applies
ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your
CSS file bull Notes
ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other
types of pages on your site as it could affect other things
ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied
ndash Write the code you are testing on a scratchpad so you donrsquot lose it
Method 2 Broad strokes (expanded view)
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Method 1 Reverse engineering (aka borrowing code)
bull Why use it
ndash ldquoThatrsquos cool how did you do thatrdquo
bull What it lets you do ndash Look at part or all of the
stylesheet of a website to see what they did
Method 1 Reverse engineering (aka borrowing code)
bull How to do it ndash Right-click the part of the
webpage you are interested in and choose Inspect Element
ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file
ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a
new browser windowtab bull Save the file
bull NOW Puzzle over the code until you figure it out (w3schools helps here)
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull Why use it ndash A standardized system
will re-use classeshtml tags
ndash Branding
bull What it lets you do ndash Select a common
elementclass and apply a change to the entire site
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull How to do it ndash Right-click on a part of the page you
want to modify and select Inspect Element
ndash Identify the html elementclass that applies
ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your
CSS file bull Notes
ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other
types of pages on your site as it could affect other things
ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied
ndash Write the code you are testing on a scratchpad so you donrsquot lose it
Method 2 Broad strokes (expanded view)
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Method 1 Reverse engineering (aka borrowing code)
bull How to do it ndash Right-click the part of the
webpage you are interested in and choose Inspect Element
ndash In the Inspect Element footerpop-out box click on the [name]css[line number] to see the file
ndash OR bull Right-click on the css file name bull Select copy link location bull Paste the link location into a
new browser windowtab bull Save the file
bull NOW Puzzle over the code until you figure it out (w3schools helps here)
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull Why use it ndash A standardized system
will re-use classeshtml tags
ndash Branding
bull What it lets you do ndash Select a common
elementclass and apply a change to the entire site
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull How to do it ndash Right-click on a part of the page you
want to modify and select Inspect Element
ndash Identify the html elementclass that applies
ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your
CSS file bull Notes
ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other
types of pages on your site as it could affect other things
ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied
ndash Write the code you are testing on a scratchpad so you donrsquot lose it
Method 2 Broad strokes (expanded view)
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull Why use it ndash A standardized system
will re-use classeshtml tags
ndash Branding
bull What it lets you do ndash Select a common
elementclass and apply a change to the entire site
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull How to do it ndash Right-click on a part of the page you
want to modify and select Inspect Element
ndash Identify the html elementclass that applies
ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your
CSS file bull Notes
ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other
types of pages on your site as it could affect other things
ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied
ndash Write the code you are testing on a scratchpad so you donrsquot lose it
Method 2 Broad strokes (expanded view)
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Method 2 Broad stroke changes Basic Selectors class amp element amp elementelement amp elementclass
bull How to do it ndash Right-click on a part of the page you
want to modify and select Inspect Element
ndash Identify the html elementclass that applies
ndash Click on the + ndash Type in the correct elementclass ndash Begin adding CSS code to view changes ndash Once satisfied incorporate into your
CSS file bull Notes
ndash ALWAYS try code in the inspector first ndash ALWAYS try the same line of CSS in other
types of pages on your site as it could affect other things
ndash Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied
ndash Write the code you are testing on a scratchpad so you donrsquot lose it
Method 2 Broad strokes (expanded view)
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Method 2 Broad strokes (expanded view)
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull Why use it ndash Broad stroke changes donrsquot
work like you need ndash Or apply to too many
things ndash Or not the right things ndash Can make contextual
changes (like when hovering over a link)
bull What it lets you do ndash Identify a very specific
thing and apply changes
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Method 3 Refined Code Application Advanced Selectors id amp attribute amp gt amp beforeafter
bull How to do it ndash Right-click on an element you want to modify and select Inspect
Element ndash What makes this unique ndash Click on the + ndash Type in the probable combo of selectors
bull Ex breadcrumbgtli a bull Ex search_in select bull Ex abtn
ndash Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
bull Refine the selector combinations if needed ndash Begin adding CSS code to view changes ndash Incorporate into your CSS file
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Useful tips bull important will over-ride existing
inline CSS ndash Use with caution there could be a
reason bull after and before are used to select a
element and insert something beforeafter that element Great for explanatory text
bull class before element selects all elements with that class
bull Elementclass selects only that specific combination of an element and class
bull background-size 100 will make your background image tile only horizontally
bull Comment A LOT future ldquoborrowersrdquo of code will thank you
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Contact Information
Brian Thomas
Electronic Records Specialist Texas State Library and Archives Commission
bthomastsltexasgov 512-475-3374
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-
Demo (try it on your own computer by downloading from
httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
- Simple techniques for customizing a Digital Repository Public Interface using CSS
- Background (metaphorical)
- Example of results
- Example for the demo
- CSS crash-course
- Tools 1 W3Schools
- Tool 2 ldquoInspect Elementrdquo
- Tool 3 Notepad
- Method 1 Reverse engineering (aka borrowing code)
- Method 1 Reverse engineering (aka borrowing code)
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad stroke changesBasic Selectors class amp element amp elementelement amp elementclass
- Method 2 Broad strokes (expanded view)
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Method 3 Refined Code ApplicationAdvanced Selectors id amp attribute amp gt amp beforeafter
- Useful tips
- Contact Information
- Demo(try it on your own computer by downloading from httpstslaccesspreservicacomarchivesdb3AdeliverableUnit|e97202b2-e827-4ea6-bda9-b187bfc2b4b0 )
-