Simple techniques for customizing a Digital Repository Public - - PowerPoint PPT Presentation
Simple techniques for customizing a Digital Repository Public Interface using CSS A hands-on presentation Background (metaphorical) What is CSS? Why did we find it necessary? CSS stands for Cascading Hosted repository solution
– Inline, in the header, in an external css – For inline, within the html tag insert style=“[css code]; [more css code]” – For external css use the format [html tag or css class]{[css code name: css code value]; [more css code];}
– CSS is a simple text file with file extension .css – Selectors are the way CSS identifies what to modify on a page – Selectors most commonly are applied using the html element name or .class
– Less common selectors include #id, attributes, and > – Comment your code as much as you can to help others and yourself remember what you did, why, and how
– Web developer reference site – Not created by the W3C
– http://www.w3schools.com
– Books cost money and take time to read – Readily available anywhere with web access – “Try It Yourself” gives the ability to try something out – More than just CSS
– A code console (Chrome, Firefox, IE) for webpages – Allows for modification or insertion
– See how the web page is structured – Identify classes and elements for manipulation – Test out how modifications will look and feel
– Right-click on a webpage and select it from the resulting menu
– An actual notepad for handwritten notes – A good text editor, such as Notepad++, Crimson Editor, TextWrangler
– You WILL forget how you saw something done or how you did it – You WILL also forget how you did that really cool thing – To create your CSS file
– Right-click the part of the webpage you are interested in, and choose Inspect Element – In the Inspect Element footer/pop-out box click on the [name].css:[line number] to see the file – OR:
new browser window/tab
until you figure it out (w3schools helps here)
Basic Selectors: .class & element & element,element & element.class
Basic Selectors: .class & element & element,element & element.class
– Right-click on a part of the page you want to modify and select Inspect Element – Identify the html element/class that applies – Click on the + – Type in the correct element/class – Begin adding CSS code to view changes – Once satisfied, incorporate into your CSS file
– ALWAYS try code in the inspector first – ALWAYS try the same line of CSS in other types of pages on your site as it could affect other things – Clicking on the symbol that looks like the New Mexico logo will highlight all parts of a part where that code would be applied – Write the code you are testing on a scratchpad so you don’t lose it
Advanced Selectors: #id & attribute & > & :before/:after
– Broad stroke changes don’t work like you need – Or apply to too many things – Or not the right things – Can make contextual changes (like when hovering over a link)
– Identify a very specific thing and apply changes
Advanced Selectors: #id & attribute & > & :before/:after
– Right-click on an element you want to modify and select Inspect Element – What makes this unique? – Click on the + – Type in the probable combo of selectors
– Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want
– Begin adding CSS code to view changes – Incorporate into your CSS file
inline CSS
– Use with caution, there could be a reason
element and insert something before/after that element. Great for explanatory text
elements with that class
specific combination of an element and class
your background image tile only horizontally
“borrowers” of code will thank you */
(try it on your own computer by downloading from https://tsl.access.preservica.com/archive/sdb%3AdeliverableUnit|e97202b2- e827-4ea6-bda9-b187bfc2b4b0/ )