Simple techniques for customizing a Digital Repository Public Interface using CSS. A hands-on presentation

Size: px

Start display at page:

Download "Simple techniques for customizing a Digital Repository Public Interface using CSS. A hands-on presentation"

Chastity Hart
5 years ago
Views:

1 Simple techniques for customizing a Digital Repository Public Interface using CSS A hands-on presentation

2 Background (metaphorical) What is CSS? CSS stands for Cascading Stylesheets HTML stylistic shortcut Completely reversible Allows for branding without functionality customization Why did we find it necessary? Hosted repository solution (Preservica CE) Able to hand-encode html pages, but Appearance of standardized functions not encodable Only able to input custom CSS

3 Example of results

4 Example for the demo

5 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?

6 Tools 1: W3Schools What is it? Web developer reference site Not created by the W3C 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?

7 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

8 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 Tool 3: Notepad

9 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 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].

10 Method 1: Reverse engineering (a.k.a 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) borrowing code)

11 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

12 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

13 Method 2: Broad strokes (expanded view)

14 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

15 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

!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.

16 !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 */ Useful tips

17 Contact Information Brian Thomas Electronic Records Specialist Texas State Library and Archives Commission

Demo (try it on your own computer by downloading from https://tsl.access.

18 Demo (try it on your own computer by downloading from e97202b2- e827-4ea6-bda9-b187bfc2b4b0/ )

Navigation. Websites need a formalized system of links to allow users to navigate the site

Navigation. Websites need a formalized system of links to allow users to navigate the site Comm 244 Week 3 Navigation Navigation Websites need a formalized system of links to allow users to navigate the site Navigation Many larger websites have multiple forms of navigation For example, look