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 Stylesheets (Preservica CE) • HTML stylistic shortcut • Able to hand-encode html pages, but… • Completely reversible • Appearance of standardized • Allows for branding without functions not encodable functionality customization • Only able to input custom CSS

Example of results

Example for the demo

CSS crash-course 3 types of CSS • – 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];} Applying CSS • – 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 Ex. p{width: 25%; padding-bottom: 30px;} • Ex. .col-lg-2{width: 25%; padding-bottom: 30px;} • Ex. p.col-lg-2{width: 25%; padding-bottom: 30px;} • – 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 Ex. /* I did it because I could */ •

Tools 1: W3Schools • What is it? – Web developer reference site – Not created by the W3C – http://www.w3schools.com • Why use it? – 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

Tool 2: “Inspect Element” What is it? • – A code console (Chrome, Firefox, IE) for webpages – Allows for modification or insertion of code without changing the file Why use it? • – See how the web page is structured – Identify classes and elements for manipulation – Test out how modifications will look and feel How to access it? • – Right-click on a webpage and select it from the resulting menu

Tool 3: Notepad • What to use? – An actual notepad for handwritten notes – A good text editor, such as Notepad++, Crimson Editor, TextWrangler • Why – 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

Method 1: Reverse engineering (a.k.a. borrowing code) • Why use it? – “That’s cool, how did you do that?” • What it lets you do – Look at part or all of the stylesheet of a website to see what they did

Method 1: Reverse engineering (a.k.a borrowing code) How to do it • – 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: • Right-click on the css file name • Select copy link location • Paste the link location into a new browser window/tab • Save the file NOW: Puzzle over the code • until you figure it out (w3schools helps here)

Method 2: Broad stroke changes Basic Selectors: .class & element & element,element & element.class • Why use it? – A standardized system will re-use classes/html tags – Branding • What it lets you do – Select a common element/class and apply a change to the entire site

Method 2: Broad stroke changes Basic Selectors: .class & element & element,element & element.class How to do it • 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 Notes • 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

Method 2: Broad strokes (expanded view)

Method 3: Refined Code Application Advanced Selectors: #id & attribute & > & :before/:after • Why use it? – 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) • What it lets you do – Identify a very specific thing and apply changes

Method 3: Refined Code Application Advanced Selectors: #id & attribute & > & :before/:after • How to do it – 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 • Ex. .breadcrumb > li a • Ex. #search_in select • Ex. a.btn – Click on the icon that looks like the New Mexico logo to verify that the selectors match only what you want • Refine the selector combinations if needed – Begin adding CSS code to view changes – Incorporate into your CSS file

Useful tips !important will over-ride existing • inline CSS Use with caution, there could be a – reason :after and :before are used to select a • element and insert something before/after that element. Great for explanatory text .class before element selects all • elements with that class Element.class selects only that • specific combination of an element and class background-size: 100%; will make • your background image tile only horizontally /* Comment A LOT , future • “borrowers” of code will thank you */

Contact Information Brian Thomas Electronic Records Specialist Texas State Library and Archives Commission bthomas@tsl.texas.gov 512-475-3374

Demo (try it on your own computer by downloading from https://tsl.access.preservica.com/archive/sdb%3AdeliverableUnit|e97202b2- e827-4ea6-bda9-b187bfc2b4b0/ )