Tips and Tricks for Customizing Enterprise Using CSS

Tips and Tricks for Customizing Enterprise Using CSS Michael L. Bowden SNRG Conference June 10, 2014 Harrisburg Area Community College http://hacc.ent.sirsi.net/client/default

Agenda • Tools For Editing CSS • Setting Up Enterprise • Demonstration • Files used in Demonstration • CSS File: • Icon File: Double click on icons to open files. Custom.css Bridge_material_icons_1.0.zip

Tools • PortableApps.com • Software you can take with you • Firefox • Firebug and Firebug Lite • http://getfirebug.com/ • Available for FF, IE, Safari, Chrome, and Opera • Quick & Easy CSS Development with Firebug • The Firebug Tutorial Series: 01 – Introduction to Firebug (YouTube) • The Firebug Tutorial Series: 02 – Building Custom CSS (YouTube) • FireFTP • http://firefpt.net/ • Available for FireFoxonly • FireFTP Tutorial (YouTube)

Tools (continued) • Notepad++ • http://notepad-plus-plus.org/ • Good Notepad replacement • Understands CSS

CSS References • Cheat Sheet • http://blog.hattersworkshop.com/wp-content/uploads/2011/01/css3-cheat-sheet.pdf • Tags • body { } • Classes • .header_container { } • IDS • #header { }

Setting Up Enterprise • Ask ClientCare for an FTP account for Enterprise • Use FireFTP to create a file structure to accommodate changes • Use different directories for your production and test environment • Example: • Create a directory called 4.3 for your customization to version 4.3 • Create a directory called images for your image files

Setting up Enterprise (cont.) Your file structure might look like this:

Setting up Enterprise (cont.) • Create the same file structure on your computer or flash drive. • Create a custom.css file in the new directory on your computer or flash drive. • This will be the file you will edit and upload to Enterprise

Setting up Enterprise (cont.) • Modify your profile to use the new CSS file. • Manage Profiles  Profile to change  Configure Custom Page Element. • Choose Profile Language and click Next • In the Custom CSS box, add the path to your new directory and custom CSS file. • For example: • /custom/web/4.3/custom.css or • /custom/web/default/default_custom.css

Setting up Enterprise (cont.) • Enterprise is now set up to use the new file structure and custom CSS file.

Things To Change • Change the background color of the body • Change the background color of the header • Change the background color of the search bar • Change the background color of the dropdown elements • Active, hover, focus

Things To Change (cont.) • Turn off the Cooliris icon • Turn off pagination at the top of the page • Center the Number of Records display • Center the Did You Mean • Change format icon

Questions?

Contact Information Michael L. Bowden Library Central Services One HACC Drive Harrisburg, PA 17110-2999 e: mlbowden@hacc.edu t: (717) 780-2503

Tips and Tricks for Customizing Enterprise Using CSS