Tips and Tricks for Customizing Enterprise Using CSS Michael L. Bowden SNRG Conference June 10, 2014 Harrisburg Area Community College

Agenda Tools For Editing CSS Setting Up Enterprise Demonstration Files used in Demonstration ◦ CSS File: ◦ Icon File: Custom.css Bridge_mat erial_icons_ 1.0.zip Double click on icons to open files.

Tools PortableApps.com ◦ Software you can take with you Firefox Firebug and Firebug Lite   Available for FF, IE, Safari, Chrome, and Opera  Quick & Easy CSS Development with Firebug Quick & Easy CSS Development with Firebug  The Firebug Tutorial Series: 01 – Introduction to Firebug (YouTube) The Firebug Tutorial Series: 01 – Introduction to Firebug  The Firebug Tutorial Series: 02 – Building Custom CSS (YouTube) The Firebug Tutorial Series: 02 – Building Custom CSS FireFTP   Available for FireFox only  FireFTP Tutorial (YouTube) FireFTP Tutorial

Tools (continued) Notepad++ ◦ ◦ Good Notepad replacement ◦ Understands CSS

CSS References Cheat Sheet ◦ content/uploads/2011/01/css3-cheat-sheet.pdf 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 e: t: (717)