Customizing TR Pages - background, logo, colors

Hey Jessica,

Many of the Teamraiser pagewrappers use reusable pagebuilder pages to hold the styles of the different sections of the page.  Try looking under reus_TRheader.  There you will find all the styles to the page you are looking for and can add more styles if you wish. 

The scroll list background you will need to find the div that's associated with the list you're are going to change and then add the css to the styles. The buttons (donate, register, join a team) can be updated from the Greeting Page of the Teamraiser. 

Remember to make copies of the pages you are working on, just as a safety precaution. 

If you add &s_debug=true to any URL and view the source of that page, you'll see some HTML comments that indicate where styles are controlled. So for example, if you view source on http://pcmsec.convio.net/site/TR?fr_id=1040&pg=entry&s_debug=true, you'll see the following:

<!-- Begin content from page: reus_TR_style -->

This indicates that the styles are held within the reusable PageBuilder page reus_TR_style. This is where you'd need to go to make changes to, for example, the thermometer's background color. You'd need to change the following to use whatever new background color you want:

.thermometer { 
background-color: #8FC73E;
border: 0px solid #344163;
 }

Similarly, if you wanted to change the blue background on the Team Honor Roll, you'd need to change the following:

 .vScroll, .donorWall{ 
background-color: #364392;
border: 5px solid #364392;
width: 250px;
 }

The image at the top (http://pcmsec.convio.net/images/content/pagebuilder/mainrunlogo.gif) lives in the Image Library. To edit it, go to Library -> Image Library and search for "mainrunlogo.gif". In the search results, click "Edit" and then you can upload a new version.

Chris Backus:

In addition to Firebug, the newer versions of Firefox also have a built in "Inspect Element" option when you right click on something.  Firebug is better, but the built-in version has this really neat looking 3D view option.

 

 

 

If you're not using Firefox, Chrome also has a built-in right click > Inspect Element feature.

 

If you're using Internet Explorer (hopefully just to test cross-browser compatibility) there isn't a built-in right click feature, but there are still developer tools. (With IE9+, at least.  Not sure about IE8 and below.)  Press F12 to launch the developer tools.  From there, you can click the "Select element by click" button (looks like a cursor) or just press Ctrl+B (only works with the developer tools open, unless you want to organize your favorites) and then clicking the element you want to inspect.  It's not nearly as useful as the Firefox and Chrome options, but better than nothing.