Tagged: , , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • March 30, 2014 at 2:59 pm #245127
    de-sign-us

    Hello,

    I’m creating several portfolio pieces using the Enfold Theme. Example: http://marcaarons.me/portfolio-item/seo-web-design-health-consulting/

    I would like to change the header’s alternate_color to match the styling with this specific page as follows:

    — Go From This —

    .alternate_color {
background-color: #3a3a3a;
color: #f0f0f0;
}

    — To This —

    .alternate_color {
background-color: #9dd09f;
color: #5b3b01;
}

    How can either use the Quick CSS function within the theme to target this page or use the Avia framework to accomplish this? I would like to do this for additional portfolio pieces as well (and think this would be an excellent feature request).

    • This topic was modified 11 years, 7 months ago by de-sign-us.
    March 30, 2014 at 5:38 pm #245165
    Devin

    Hi de-sign-us!

    You can use the page id in your selector to target a specific page: http://en.support.wordpress.com/pages/#how-to-find-the-page-id

    Ex:

    
#top.page-id-200 .alternate_color {
background-color: #9dd09f;
color: #5b3b01;
}

    Best regards,
    Devin

    March 30, 2014 at 7:05 pm #245180
    de-sign-us

    Thanks Devin!

    I tried adding the following to my child theme’s css but see no changes. Although it’s a post, I tried it with ‘page’ as you described above as well.

    #top.post-id-332 .alternate_color {
background-color: #9dd09f;
color: #5b3b01;
}

    Unfortunately, I’ve seen no change. Did I miss something?
    http://marcaarons.me/portfolio-item/seo-web-design-health-consulting/

    Best,
    Marc

    March 31, 2014 at 6:38 pm #245613
    Yigit

    Hi!

    You have a little mistake in your custom CSS code. Please use following code

    #top.postid-332 .alternate_color {
background-color: #9dd09f;
color: #5b3b01;
}

    Cheers!
    Yigit

    March 31, 2014 at 6:45 pm #245617
    de-sign-us

    Thanks Yigit!

    I’ve updated from:

    #top.post-id-332 .alternate_color {
background-color: #9dd09f;
color: #5b3b01;
}

    to:

    #top.postid-332 .alternate_color {
background-color: #9dd09f;
color: #5b3b01;
}

    Unfortunately, no changes upon saving to the enfold child theme’s style.css.

    Did I somehow miss something again?

    March 31, 2014 at 6:53 pm #245626
    Yigit

    Hi!

    Please try adding !important rule as following 

    #top.postid-332 .alternate_color {
background-color: #9dd09f !important;
}
.postid-332 .alternate_color.title_container * { color: #5b3b01!important; }

    It does work fine on my local installation. Please try flushing browser cache after applying the code

    Best regards,
    Yigit

    March 31, 2014 at 7:01 pm #245638
    de-sign-us

    Thanks Yigit!

    Added the above to the style.css (and deleted the old) before launching “private” / incognito mode for IE 11 and Firefox 27.0.1 to avoid cache issues. Unfortunately still no change.

    Any ideas as to what could be causing it?
    Marc

    March 31, 2014 at 7:04 pm #245642
    Yigit

    Hey!

    Please try adding the code to bottom of Style.css file of your child theme in Appearance > Editor

    Best regards,
    Yigit

    March 31, 2014 at 7:35 pm #245662
    de-sign-us

    Hello Yigit,

    Added to the bottom of the Style.css file. No change.

    However, I then tried adding it to the Enfold “Quick CSS” option and it worked! Any idea why it might work in the Quick CSS but not the /enfold-child/style.css ?

    Ideally, I’d like to keep all the CSS in one place for potential future edits.

    March 31, 2014 at 7:42 pm #245667
    Yigit

    Hi!

    You may have punctional mistake in custom css code. You can paste the content of your style.css file on http://pastebin.com/ and post the link here so we can check it

    Regards,
    Yigit

    March 31, 2014 at 7:59 pm #245685
    de-sign-us

    Thanks!

    http://pastebin.com/ef7AsQWL

    March 31, 2014 at 8:02 pm #245686
    Yigit

    Hi!

    There is closing curly bracket missing. Please replace your Style.css file with this one http://pastebin.com/f4s5M6sd

    Cheers!
    Yigit

    March 31, 2014 at 8:03 pm #245687
    Devin

    At the end you have an unclosed h5 rule:

    
h5 {
font-weight: 400;
font-size: 26px;

    It needs the } so that the css after that rule actually works.

    
h5 {
font-weight: 400;
font-size: 26px;
}
    March 31, 2014 at 8:21 pm #245700
    de-sign-us

    It’s always the little things :-).

    Fixed and thank you!

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Customize Alternate Background Color In Enfold Theme To A Specific Post or Page’ is closed to new replies.