Custom color home featured widgets

Community Forums Forums Design Tips and Tricks Custom color home featured widgets

This topic is: resolved

This topic contains 4 replies, has 2 voices, and was last updated by  wizz6113 9 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #90844

    wizz6113
    Member
    Post count: 81

    I am using Outreach Pro which has four featured content widgets in the ‘home bottom’ area. I am using a combo of Genesis featured content sandbox widgets and featured page widgets in those slots. I’d like to be able to custom color the headers (entry titles) for those slots but don’t know where to edit the CSS – would it be .home-bottom .widget and then create separate first-child / second-child / etc to style each differently re entry-title color?

    I am guessing so otherwise if I edit the featured-content it would change also any sidebar widget styling and it’s just on the homepage I need these changes.

    Also, I’d like to add a horizontal line under those entry titles, again with own color, along the lines of this site: iied.org.

    Does anyone have any pointers on either featured home widget customisation? Tnx.

    http://localdev
    #90861

    braddalton
    Participant
    Post count: 10577
    #90915

    wizz6113
    Member
    Post count: 81

    Thanks for this tut Brad; I am now trying to see if I can make it work. I guess I put the CSS right at the bottom – but after media query CSS or where regular CSS ends? Also, if this is the ID for one of those featured homepage widgets, am I putting the right CSS as so far I can’t make the entry-title color change. ie:

    <section id=”featuredpage-extras-2″ class=widget featured-content featured page”>

    so I put CSS as follows, but wasn’t sure if I should put entire class info – neither seemed to work though:

    #featured-page-extras-2 .widget-title {
    color: #CC0000;
    }

    Any ideas of what I might be doing wrong?
    Tnx.

    #90916

    wizz6113
    Member
    Post count: 81

    Even with the hyphen, ie. #featuredpage-extras2 . widget-title is won’t work. I inadvertently put that hyphen in the eg CSS above.

    #90919

    wizz6113
    Member
    Post count: 81

    Ah resolved! I needed to put that a { as in:

    #featuredpage-extras-2 .widget-title a {
    color: #CC0000;
    }

    Tnx Brad and I’ll be breezing through the rest of your tut for various other widget custom styling. Bookmarked the link. Cheers.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.