Using Custom CSS

Custom CSS can be used to further change the visual aspects of iFeature Pro to your liking. Some knowledge of CSS is useful, but is not required to begin using this option. We highly recommend using one of the following tools to help you determine the necessary CSS selectors to apply your custom changes: Firebug (http://getfirebug.com/) or Inspect Element (available in Google Chrome or Apple’s Safari).

Finding the selector

 

(note for this example we will be using Inspect Element)

Let’s say that you wish to change the color of the contact area text to red. Point your mouse as close to the area that you wish to modify, right-click and press inspect element. This will bring up a new area at the bottom of your browser that looks like the following:

The selector for the contact area appears in the right-hand menu (in this case #header_contact). Now that we have our selector, we can use Custom CSS to make  our change. Here is the code we would use to make the header contact text red.

#header_contact {color: red;}

This tells the browser to display the text as red in addition to the default styles for that selector.

This is just one example, but there is really no limit to what you can accomplish with Custom CSS.

 

For more CSS resources, we recommend the following links:

http://www.w3schools.com/css/

http://htmlhelp.com/reference/css/

http://www.htmldog.com/guides/cssbeginner/

 

You may also post questions in the iFeature Pro Customization forum for help in achieving your desired customizations.

http://cyberchimps.com/forum/customization/

 

Permalink