Tips and Tricks for Customizing Enterprise

Using CSSMichael L. BowdenSNRG Conference

June 10, 2014Harrisburg Area Community College

http://hacc.ent.sirsi.net/client/default

AgendaTools For Editing CSSSetting Up EnterpriseDemonstrationFiles used in Demonstration

◦CSS File:

◦Icon File:

PackageCustom.css

Compressed (zipped) FolderBridge_m

aterial_icons_1.0.zip

Double click on icons to open files.

ToolsPortableApps.com

◦ Software you can take with youFirefoxFirebug 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 FireFox only FireFTP Tutorial (YouTube)

Tools (continued)Notepad++

◦http://notepad-plus-plus.org/◦Good Notepad replacement◦Understands CSS

CSS ReferencesCheat Sheet

◦http://blog.hattersworkshop.com/wp-content/uploads/2011/01/css3-cheat-sheet.pdf

Tags◦body { }

Classes◦.header_container { }

IDS◦#header { }

Setting Up EnterpriseAsk ClientCare for an FTP account for

EnterpriseUse 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 ChangeChange the background color of

the bodyChange the background color of

the headerChange the background color of

the search barChange the background color of

the dropdown elements◦Active, hover, focus

Things To Change (cont.)Turn off the Cooliris iconTurn off pagination at the top of

the pageCenter the Number of Records

displayCenter the Did You MeanChange format icon

Questions?

Contact Information

Michael L. BowdenLibrary Central ServicesOne HACC DriveHarrisburg, PA 17110-2999e: mlbowden@hacc.edut: (717) 780-2503