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

[janicholson3]

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.

[JenORoss]

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.

[will777]

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 😎

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

[Author]

Posts