Link color - Puro

This topic has 15 replies, 2 voices, and was last updated 8 years, 11 months ago by Andrew Misplon.

Tagged: link color ultra

Author
Posts
May 1, 2015 at 3:36 pm #1341

cloudontap
Participant
Hey Andrew,
Another quick question — how can I make the link colors change for all pages? I’ve tried in the stylesheet and it doesn’t appear to be responding to any changes. I want to make the link colors #1cc0e6.
Thanks!
May 1, 2015 at 3:50 pm #1342
Andrew Misplon
Keymaster
Hi 🙂 Great to hear from you again. I hope you have a premium version out soon. It would follow the same model as my first theme, pay what you want from $5 upwards. It’ll have a full Customizer section. For now I’ll help out with whatever Custom CSS you need.
(My usual reminder on editing files directly via Appearance > Editor. When themes update they overwrite themselves, so changes there will be lost.)
Please try changing the link color in your Custom CSS plugin as follows:
```
/* Gobal Link Colors */

a {
  color: #0896fe;
}
a:visited {
  color: #0896fe;
}
a:hover, a:focus, a:active {
  color: #0896fe;
}

/* Entry Content Specific Link Colors */

.entry-content p a,
.entry-content li a,
.entry-content dl a,
.entry-content pre a,
.entry-content code a,
.entry-content blockquote a {
  color: #0896fe;
  border-bottom: 1px dotted #0896fe;
}
.entry-content p a:hover,
.entry-content li a:hover,
.entry-content dl a:hover,
.entry-content pre a:hover,
.entry-content code a:hover,
.entry-content blockquote a:hover {
  border-bottom: 1px solid #0896fe;
}
```
Let me know how it goes. Thanks.
May 1, 2015 at 4:56 pm #1344

cloudontap
Participant
Awesome! I’ll definitely keep an eye out for the premium version.
I did your suggestion — it appears to have changed the link underline on, but not the actual link text color. It also made all of the links on the blog page the correct color — progress, haha!
Just having issues with the links on the homepage and contact pages: http://ccd.336.myftpupload.com/ | http://ccd.336.myftpupload.com/contact/
May 1, 2015 at 5:08 pm #1345

cloudontap
Participant
Oh, and one more thing — is there any way we can change the hover color for the social media buttons, too? I know this is picky, so if it isn’t possible, no biggie, haha.
May 1, 2015 at 6:10 pm #1350
Andrew Misplon
Keymaster
By all means, send away with the little stuff and I’ll get back to as soon as possible.
Social Icons Hover Color:
```
 /* Social Links Menu Hover */

 .social-links-menu ul li a:hover:before {
 	color: #0896fe; 
 }
```
Home Page/Page Builder
```
/* SiteOrigin Features Widget */

.panel-grid-cell .sow-features-list .sow-features-feature p.sow-more-text a {
  border: none;
  font-weight: 700;
}
.panel-grid-cell .sow-features-list .sow-features-feature p.sow-more-text a:hover {
  border: none;
  color: #0896fe;
  text-decoration: none;
}
```
```
/* SiteOrigin Post Carousel Widget */

.panel-grid-cell .sow-carousel-wrapper a,
.panel-grid-cell .sow-carousel-wrapper a:hover {
  border: none;
}
.panel-grid-cell .sow-carousel-wrapper .sow-carousel-title .widget-title {
  font-size: 1.1429em;
  text-transform: uppercase;
}
.panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item h3 {
  font-size: 1em;
  font-weight: 700;
}
.panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item h3 a:hover {
  color: #0896fe;
}
.panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a span.overlay {
  background: #0896fe;
}
```
Contact/Home
Please can you correct one value in your Custom CSS. Near the bottom there is a remaining #0896fe left.
May 1, 2015 at 6:11 pm #1351

Andrew Misplon
Keymaster
Thanks again for being an early adopter and for all the great feedback. The headings:
/* SiteOrigin Features Widget */
/* SiteOrigin Post Carousel Widget */
The rules underneath those headings that don’t contain a color value can be deleted after the next update. 0.9.4. Not a big deal if you don’t though.
Let me know how it goes.
May 1, 2015 at 6:34 pm #1352

cloudontap
Participant
Hey Andrew,
So close! The only thing left to change is the white navigational bar (the one with the logo). Also, not sure if you saw this, but I posted another thread: https://purothemes.com/support/topic/full-width-pages/
Sorry for having so many questions, haha. So appreciative of your help!
May 1, 2015 at 6:45 pm #1353
Andrew Misplon
Keymaster
Ahh sorry, I did see that post earlier, did the usual thing were you see it on your phone and forget to check when you get back to your computer! I’ll jump in there now.
Here we go:
```
/* Site Header */

.site-header {
	background: #fff;
}

@media (min-width: 1024px)
	.home.header-overlap .site-header {
  		background: rgba(255, 255, 255, 0.9);
  	}
}
```
Both need to be set. 255, 255, 255 is RGB for white, 0.9 is opacity. Let me know if I can look up a color for you. I’m online for a while longer.
If for example you wanted to try #1cc0e6. These rules would look as follows:
```
/* Site Header */

.site-header {
	background: #1cc0e6;
}

@media (min-width: 1024px)
	.home.header-overlap .site-header {
  		background: rgba(28, 192, 230, 0.9);
  	}
}
```
May 1, 2015 at 7:53 pm #1355

cloudontap
Participant
Hey Andrew,
I tried plugging in the coding, and it didn’t work. It is telling me that the error is with “min-width:” and “{”
/* Site Header */
.site-header {
background: #1cc0e6;
}
@media (min-width: 1024px)
.home.header-overlap .site-header {
background: rgba(28, 192, 230, 0.9);
}
}
May 1, 2015 at 8:01 pm #1357

Andrew Misplon
Keymaster
Sorry about that. I’m missing an opening bracket. Let’s try:
@media (min-width: 1024px) {
.home.header-overlap .site-header {
background: rgba(28, 192, 230, 0.9);
}
}
I’ll be online a bit later or tomorrow to resolve if you don’t come right. I’m on my phone so hopefully that formats correctly.
May 1, 2015 at 8:08 pm #1358

cloudontap
Participant
No problem. Still didn’t work. :/ Same error. Feel free to get back whenever — as always, thanks.
May 1, 2015 at 8:28 pm #1359

cloudontap
Participant
Just noticed it did make a change — it made the background of the header turquoise, not the actual text/underlines.
May 2, 2015 at 5:03 pm #1360
Andrew Misplon
Keymaster
Ahh sorry, I see what you meant now. Please remove the Site Header section of Custom CSS and replace it as follows below.
Let me know how it turns out.
```
/* Top Bar Navigation */

.top-bar-navigation ul ul {
	border-top: 3px solid #0896fe;
}

.top-bar-navigation ul ul li:hover > a {
	background: #0896fe;
}

.top-bar-navigation div > ul > li > a:hover {
  border-bottom: 3px solid #0896fe;
}

@media (max-width: 1224px) {
  .top-bar-navigation div > ul > li.menu-item-has-children > a:hover, .top-bar-navigation div > ul > li.page_item_has_children > a:hover {
    border-bottom: 3px solid #0896fe;
  }
}

/* Main Navigation */

.main-navigation ul li:hover > a {
  color: #0896fe;
}

.main-navigation ul ul {
  border-top: 3px solid #0896fe;
}

.main-navigation ul ul li:hover > a {
  background: #0896fe;
}

.main-navigation ul ul .current_page_item > a,
.main-navigation ul ul .current-menu-item > a,
.main-navigation ul ul .current_page_ancestor > a {
  color: #0896fe;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
  color: #0896fe;
}

.main-navigation div > ul > li > a:hover {
  border-bottom: 3px solid #0896fe;
}

.main-navigation .menu-search .search-icon:hover:before {
  color: #0896fe;
}

.main-navigation .menu-search .searchform input[name=s] {
  border-top: 3px solid #0896fe;
}
```
May 2, 2015 at 11:25 pm #1361

cloudontap
Participant
Tried it with no such luck :/ Same color as before.
May 3, 2015 at 12:10 am #1363

cloudontap
Participant
Nevermind — it seems to have worked, now! Oh, the world of coding, haha. Thanks for all of your help!
Author
Posts