LibGuides Interface Customization Presented By: Christine Tobias ~ Kelly Sattler ~ Jenny Brandon Michigan State University Libraries

© Michigan State University Board of Trustees LibGuides Interface Customization Why Customize? Replicate the look and feel of your library’s web site. Promote resources through library branding. Give patrons a sense of place by “keeping” them on “your” web site. To see the standard look, go to =10436&sid=69212 which also contains links to many customized sites. =10436&sid=69212

© Michigan State University Board of Trustees LibGuides Interface Customization Goals of the Workshop Introduce the system settings page and standard interface options. Create code and use SpringShare documentation/help guides to obtain code for further customization. Identify page elements with Firefox web developer and use CSS to override main style sheet.Firefox web developer

© Michigan State University Board of Trustees LibGuides Interface Customization Signing On – Admin Sign In 1.Go to * 2.Click on admin sign in in upper right corner * We’re using CampusGuides to enable hands on participation by workshop attendees. Functionality learned in the workshop is applicable to LibGuides.

© Michigan State University Board of Trustees LibGuides Interface Customization Signing On – Admin Sign In 1. Enter address: 2. Enter password: ****** 3. Click on Sign In

© Michigan State University Board of Trustees LibGuides Interface Customization My Admin Page The MyAdmin Page is the editing console. Only administrators may access the System Settings to customize the interface. On the MyAdmin page, click on the Systems Settings tab to customize background, colors, banners, and headings.

© Michigan State University Board of Trustees LibGuides Interface Customization For Workshop Only: For purposes of the workshop, we are using CampusGuides which enable groups. Each group can have its own look. To edit your group: Under System Settings, select Group Management For your group number, click on the tool icon (wrench & screwdriver) under Actions

© Michigan State University Board of Trustees LibGuides Interface Customization Standard Interface Options Not all options are available at the group level in CampusGuides. Top Banner and Background Color/Gradient are.

© Michigan State University Board of Trustees LibGuides Interface Customization More Standard Interface Options Boxes and Tabs settings are found at the System level only.

© Michigan State University Board of Trustees LibGuides Interface Customization Upload New Banner (Standard) 1.In system/group settings, scroll down to top banner. 2.From dropdown menu, select Upload a new (group) banner to the server.

© Michigan State University Board of Trustees LibGuides Interface Customization Upload New Banner – Cont’d. 1. Click on Browse and navigate to the file, banner.gif in the folder named LGfiles on your desktop. 2. Click on Save. 3. Refresh the browser, scroll to the top and see new banner.

© Michigan State University Board of Trustees LibGuides Interface Customization To Remove Top Banner 1.Scroll down to Top Banner section 2.Select Remove … 3.Click Yes

© Michigan State University Board of Trustees LibGuides Interface Customization Customization Boxes What’s difference between Custom Code and Custom Header Code? This is where the CSS, scripts, and other code goes. This is where the html or code goes.

© Michigan State University Board of Trustees LibGuides Interface Customization Create a Custom Header Add a banner using the Custom Header Code box: Add the following code into the Custom Header Code box. The code can also be found in the file code.txt in the LGfiles folder for the workshop.

© Michigan State University Board of Trustees LibGuides Interface Customization Custom Header, Cont’d. Add a navigation bar: Type the following code or paste the code from code.txt into Custom Header Code box: About | Library Services | Research | Resources

Custom Header, Cont’d. Add styles to navigation bar: Insert the following code in the Custom Code box: #mynav {background-color:#FF9A34; color:#333333;} #mynav p {padding:.4em; font-weight:bold; font- size:medium;} LibGuides Interface Customization © Michigan State University Board of Trustees

LibGuides Interface Customization Changing the Favicon Favicons are the tiny 16 x 16 pixel images that appear next to the url in the web browser. Favicons are used as part of the branding of a site. The file name is always favicon.ico The favicon is in the root directory for your site. Link to it by adding favicon.ico to the end of the url of your home page, i.e.

Favicon, Cont’d. 1.To add the favicon to your LibGuides site, add the following code to the Custom Code box: * 2.Click on Save Custom Code 3.Reload page and see new favicon * Replace with your library’s url. LibGuides Interface Customization © Michigan State University Board of Trustees

LibGuides Interface Customization Content Boxes These are boxes that contain your content on your guide. Go to LibGuides Documentation Guide: &sid= &sid= The above guide provides CSS class styles that modifies the design and layout of content boxes. It shows several examples of content box styles.

Content Boxes, Cont’d. 1.Pick a style LibGuides Interface Customization © Michigan State University Board of Trustees 3.Type code listed next to it into Custom Code box 2.In the standard settings, you set the Design of the Boxes and Tabs Settings. This affects all groups.

© Michigan State University Board of Trustees LibGuides Interface Customization Link Color 1.In browser, open url for help guide: Scroll down to bottom box, Customizing Link colors 3.Copy the code from the guide 2.In CampusGuides, go to MyAdmin 1.Under System Settings, click on Group Management and select the tools icon for your group. 2.Scroll down to Custom Code box to insert code to customize link color. 3.Replace YOURHEXCODE with hex values. A color chart can be found at:

© Michigan State University Board of Trustees LibGuides Interface Customization Background Background color is in the body tag. To find your background color: 1.On Web Developer toolbar, click on CSS and select Edit CSS. 2.Under libguides.css tab, look for the body tag with color #fff. 3.Try typing in different colors/hexcodes, i.e. #ccc. To change the color within your guide so it stays…

© Michigan State University Board of Trustees LibGuides Interface Customization Background, Cont’d Within your group settings in the Custom Code box add the following style: body {background:#ccc} The code should be typed between the existing tags.

© Michigan State University Board of Trustees LibGuides Interface Customization Background, Cont’d Notice that the gradient border on the sides has not changed color. That is because it is a repeating image. 1.Go back to the Web Developer toolbar, click on CSS and select View Style Information. 2.Move your cursor so that the red line is next to the gradient border. 3.Under the toolbars, a box appears with the label “Web Developer”. In the box is the nesting path for the highlighted item. 4.You can see by the path, the image information is most likely in the style #wrapper.

© Michigan State University Board of Trustees LibGuides Interface Customization Background, Cont’d 5.Go to the Edit CSS box for the libguides.css file (tab) 6.Scroll down to #wrapper 7.Copy the style information for background color and the id: #wrapper { background:#ffffff

© Michigan State University Board of Trustees LibGuides Interface Customization Background, Cont’d 8.In Custom Code box for your group, paste copied text between the tags and add closing bracket “}” 9.Change the color to the same as the background color in body tag, i.e. #wrapper {background:#ccc;} 10.Click on Save Custom Code and look at one of your group’s guides to see the change

© Michigan State University Board of Trustees LibGuides Interface Customization Background – Adding an Image Add a grayscale gradient image to the background: In the Custom Code, add the following to body and #wrapper background styles: url( repeat-x;

© Michigan State University Board of Trustees LibGuides Interface Customization Customizing Guide Tabs 1.From your group’s home page, select the sample guide 2.On Web Developer Toolbar, click CSS and select View Style Information 3.Roll mouse over tabs 4.All of the tabs are in the div with id name #tabsI 5.Close View Style Information, if you like 6.On Web Developer Toolbar, click CSS and select Edit CSS 7.Click on the Embedded Styles tab

© Michigan State University Board of Trustees LibGuides Interface Customization Customizing Tabs, Cont’d 8.Look at the style information for #tabsI 9.For styles “tabsI a” and “tabsI a span” replace background image with a color, i.e. #tabsI a {background:#ccc;} #tabsI a span { background:#ccc; color:#24618E;} 10.See how the tabs are now displayed as a nav bar 11.Copy these styles from the Edit CSS window, and paste in between the tags in Custom Code box, save and view your group guide

© Michigan State University Board of Trustees LibGuides Interface Customization Change Tabs, Cont’d Change text color of active tab: 1.Within your guide, click on View Style Information on Web Developer Toolbar and rollover active tab 2.Notice the last tag id is #current 3.To change the color of the active tab text, paste the following code in between tags in the Custom box: #tabsI #current a span {color:#fff;}

© Michigan State University Board of Trustees LibGuides Interface Customization Contact Jenny Brandon phone: Kelly Sattler phone: Christine Tobias phone:

© Michigan State University Board of Trustees LibGuides Interface Customization References Springshare Libguides Help & Documentation Guides: – – =69137http://demo.libguides.com/content.php?pid=10436&sid =69137 Color chart: Firefox Web Developer: