Change default color by page in Mag Pro

[worldviewpr]

Magazine Pro is theme. I use the default black for theme color which appears most prominently in the widget title bars. black black black black black (LOL) . So I'd like to know what a snippet would look like to be able to color code some of the pages by having some code that argues

if page is '/page-name/'

use theme color 'Y'

Also, is it possible to select some other color(s) for adidtional pages, instead of just the built-in theme colors? Adn what would the snip be for that?

Many thanks in advance

http://halfwaytoconcord.com/nonprofits

[Sridhar Katakam]

Using body classes.

Can you give the URLs of a couple of pages in your site and specify what colors you would like to have as background for the widget titles?

---

Genesis Tutorials | Follow me on Twitter

[worldviewpr]

thanks for helping...all pages are halfwaytoconcrd.com/page-name/

also can the color be for not just the page but children underneath?

The first are (i believe) the Mag Pro default colors built in

page/(color)

/business/ (green)
/communities/ (orange) +children (so I have a template of how to add children pages in the regimen
nonprofits/ (blue)
/realestate/ (red)

/politics/ (purple if possible)

[Tom]

10:1 Sridhar is dreaming up a tutorial on a *cool* way to do this!

This is an alternative that is not too much work...

First, the "black black black" you are talking about is not controlled by the theme color selector in Genesis > Theme Settings > Color Style, The theme color selector changes the default color for accents like meta-data overlays on the home page images, link hover color, and so on. You can see the complete list in your stylesheet around line 1624.

You've asked to change the color of "widget title bars" on "some of the pages". To change these you need to define the page uniquely. If we want the accents to be blue, lets label the page "mag-blue". In the page editor for any page you want to dress up, go to "Layout Settings > Custom Body Class". Enter "mag-blue" and save the page.

Now you need to write some custom CSS for your stylesheet that selects the items you want to colorize, including a selector for a 'blue' page. For example:

.mag-blue .nav-primary, 
.mag-blue .sidebar .widget-title,
.mag-blue .enews-widget,
.mag-blue .site-footer,
.mag-blue .footer-widgets  {
    background-color: blue;
}

Any page you give a Custom Body Class of "mag-blue" will be affected. if you want green pages, add a Custom Body Class of "mag-green" and edit the CSS to match. You can use any color code you like.

If you want your category pages to display in different colors, you can add custom body classes to category archives (or any page) using code from these StudioPress snippets: http://my.studiopress.com/snippets/custom-body-class/

Your site is now a rainbow!

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[worldviewpr]

Thanks, that seems to work, although unregistered (as below) colors do not work, like purple. If I create same but for 'purple' and assign the hex color to #d1469b, would that be right way to add a color that then could be called in an argument?

/* Magazine Pro Blue
--------------------------------------------- */

.magazine-pro-blue a:hover,
.magazine-pro-blue .entry-content a,
.magazine-pro-blue .entry-title a:hover,
.magazine-pro-blue .genesis-nav-menu a:hover,
.magazine-pro-blue .genesis-nav-menu .current-menu-item > a,
.magazine-pro-blue .genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.magazine-pro-blue .nav-primary a:hover,
.magazine-pro-blue .nav-primary .sub-menu a:hover,
.magazine-pro-blue .nav-primary .genesis-nav-menu .current-menu-item > a {
	color: #469bd1;
}

.js.magazine-pro-blue .content .home-middle a .entry-time,
.js.magazine-pro-blue .content .home-top a .entry-time,
.magazine-pro-blue button:hover,
.magazine-pro-blue input:hover[type="button"],
.magazine-pro-blue input:hover[type="reset"],
.magazine-pro-blue input:hover[type="submit"],
.magazine-pro-blue .archive-pagination li a:hover,
.magazine-pro-blue .archive-pagination li.active a,
.magazine-pro-blue .button:hover,
.magazine-pro-blue .enews-widget input[type="submit"],
.magazine-pro-blue .entry-content .button:hover,
.magazine-pro-blue .home-middle a.more-link:hover,
.magazine-pro-blue .home-top a.more-link:hover,
.magazine-pro-blue .sidebar .tagcloud a:hover {
	background-color: #469bd1;
}

[Tom]

'Color registration' is irrelevant. You can declare any color in CSS using any number of value specifications (RGB, HEX,, etc.)

The important thing here is to match the custom class specified in the page (".mag-blue" in my example; ".magazine-pro-blue" in yours) with a custom selector coded in the stylesheet.

In your sample you are using ".magazine-pro-blue". This is the selector that already controls items that are specified in the core style setup for Magazine. In effect, you are trying to over-ride the spec already in place. To do so you must either fully replace the existing code or give it "more weight" by placing it lower in the stylesheet, in a separate stylesheet invoked after the stylesheet or by another, "weightier" method.

Also noting:
The color #469bd1 in your style statements is actually blue: http://www.colorhexa.com/469bd1
The color #d1469b in your intro para is 'Moderate Pink" http://www.colorhexa.com/d1469b
Is this part of your conundrum?

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[worldviewpr]

Got it, thanks, simple does it.

[worldviewpr]

This reply has been marked as private.

[Author]

Posts