Tagged: , , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #245127

    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 6 months ago by  de-sign-us.
    #245165

    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

    #245180

    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

    #245613

    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

    #245617

    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?

    #245626

    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

    #245638

    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

    #245642

    Hey!

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

    Best regards,
    Yigit

    #245662

    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.

    #245667

    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

    #245685
    #245686

    Hi!

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

    Cheers!
    Yigit

    #245687

    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;
    }
    
    #245700

    It’s always the little things :-).

    Fixed and thank you!

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.