Modern Portfolio: Link Hovering Color & "About" Background Image

Community Forums Forums General Discussion Modern Portfolio: Link Hovering Color & "About" Background Image

This topic is: not resolved

This topic contains 2 replies, has 3 voices, and was last updated by  will777 4 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #56224

    janicholson3
    Participant
    Post count: 1

    Greetings. I am almost always successful in finding answers to my theme-tweaking questions extant within the forum, but I’d love some crowdsourced help on two issues with the Modern Portfolio theme that I can’t seem to find any guidance on yet.

    1. How would one change the color a link turns while hovering over it WITHIN a plain text widget in the “Services” widget area on the homepage? After reading through the CSS file and playing around with different things I thought might work, nothing did. The links appear blue-ish, but when hovered upon they turn the same color as the widget area background, making them disappear.

    2. Is it possible to use an image for the background area of the “About” widget area? If so, how would one go about doing that within this theme?

    Thanks very much.

    #56401

    JenORoss
    Participant
    Post count: 4

    Hey there! For the links in the “services” widget (and “about” widget for that matter since they both have the same issue) you can add the following to your style.css:

    Around line 216 you will find:`a.cta-button,
    a.landing-button,
    a.social-buttons,
    button,
    input[type="button"],
    input[type="submit"],
    .btn,
    .enews,
    .footer-widgets,
    .footer-widgets a:hover,
    .genesis-nav-menu li a:hover,
    .genesis-nav-menu li li a:hover,
    .genesis-nav-menu .highlight-menu-item a,
    .genesis-nav-menu .highlight-menu-item a:hover,
    .navigation li a,
    .navigation li a:hover,
    .navigation li.active a,
    .navigation li.disabled,
    #about,
    #services {
    color: #fff;
    }`

    You can put this on it’s own line after that section, or include it in the section above before the {

    #about a:hover, 
    #services a:hover {
    	color: #fff;
    }

    Please note that you will need to add !importantin the section just below all this to keep your cta button hover from turning white as well.

    a.cta-button:hover,
    a.social-buttons:hover,
    .sidebar .enews-widget input:hover[type="submit"] {
    	color: #222 !important;
    }

    For the second question… To add a background image to the “About” widget area, look for this section around line 562 in the Homepage section of your style.css:

    #about,
    #services {
    	background-color: #222;
    }

    Replace this line:
    background-color: #222;

    with this line
    background: url(images/your-image-url.png) no-repeat center left !important;

    Of course you could also put an image in a widget of that section via a variety of methods, however I think you were asking about the actual background of that area that rund the length of the screen.

    Hope that helps! :)
    Jennifer


    I’m taking up The Challenge! ~ Help me answer some of the Unanswered Posts.

    • This reply was modified 11 months, 1 week ago by  JenORoss.
    • This reply was modified 11 months, 1 week ago by  JenORoss.
    #94215

    will777
    Member
    Post count: 1

    Hi jenORoss,

    I was just browsing through the forum looking for pointers and style help with the Modern Portfolio Pro theme and came across this post. I am going to use your background image solution for the About section as you have suggested as I saw that was done on the showcase Paone Creative that uses this theme and I had forgotten I wanted to do that 8-)

    I mainly wanted to write because I don’t see a thank you from anyone else for such an exact and elegant answer to the question asked. So Thank You! Very much appreciated.

    Namaste’,

    will

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

You must be logged in to reply to this topic.