Versions Compared

Old Version 1

changes.mady.by.user Liza [RG]

Saved on

compared with

New Version 2

changes.mady.by.user Mickey [RG]

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Using CSS with the Toolkit

Cascading style sheets (CSS) is the way to define the look and feel of HTML. 

The CSS defines the color, size, and position of text and HTML tags such as body or paragraph, while the HTML delivers the content and defines how it is organized.  By separating the two, you can change the colors of your site without changing the entire website.  The cascading part of this means you only have to change a parent page, and all the children pages will change as well. Working with CSS is a time saver for you. But remember that if you have a problem, contact us for help.  You can view the methods of finding support in our Getting started with RescueGroups.org guide on the Getting support page.

With the three levels of CSS styles in the Pet Adoption Toolkit, you can go from basic changes to your own custom design.

Panel

The Toolkit includes three levels of CSS styles:

Styles

Location

Purpose

Default

Included in the Toolkit code, inaccessible to the user

Provides default styles

Search Container Options

Search container background color and search result hover color

Allows simple selection of colors

Key Styles (custom style sheet)

Located within each key, blank style sheet (enter custom CSS on the Style and Color Options)
Image Modified

Allows custom styles for advanced users

Advanced Styling of Toolkit (Custom CSS)

Panel

Within each toolkit layout there may be some elements that can be further styled to get a more customized look/feel.

Example of styling text under the animal photo in the grid view:

If you wanted to increase the font size of Bailey's name, and remove the breed.You , you would add the following CSS to the Custom CSS box in the toolkit Key Edit page.

Code Block
languagecss
div.petname {
font-size: 22px;
}

div.petbreed {
display: none;
}

Bailey's name is now 22px, and the petbreed field is not showing.

...