Customizing TR Pages - background, logo, colors

Jessica Kuhl

I am trying to customize our event pages. I cannot find where to change the background or the colors on scrolling lists, as well as a few buttons.



I found where to upload a new main logo (top), but even though it previews the new logo, it won't display it live.

 

http://pcmsec.convio.net/site/TR?fr_id=1040&pg=entry

Ryan O'Keefe

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. 

Kent Gilliam

Are you familiar with Firebug? You can use that to find the CSS for the elements you want to change. I would recommend creating a new CSS file and put the link to it in you head code for your wrapper.

Noah Cooper

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

Kent Gilliam:
Are you familiar with Firebug? You can use that to find the CSS for the elements you want to change. I would recommend creating a new CSS file and put the link to it in you head code for your wrapper.

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.

Ken Cantu

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.

Wow, neat. Back in my day we had to do web development in 2d, in IE 6, on a desktop, in the rain!

Kent Gilliam

Ken Cantu:
Wow, neat. Back in my day we had to do web development in 2d, in IE 6, on a desktop, in the rain!

Don't forget "uphill both ways." hahaha