Changing link headings

[designerwriter]

How do I change the link headings in my posts (that hyperlink to the article) so that they are a different color from the hover color in the nav bar? I think this blue is too light and it doesn’t look good. I believe this is part of the blue theme but I want a different blue. Plus, it doesn’t seem to be bold enough. It must be part of the nav hover font weight. Is there a way I can make it bolder by adding an extra ? Thanks in advance.

http://magazinepro.eagleheartdynamic.com/2015/09/16/mass-megawatts-wind-power-2/

[designerwriter]

Even if I can make the title bigger, it would look better but I am not sure how to do this to override the existing code.

[Brad Dalton]

Try this https://www.youtube.com/watch?v=s2JINyKD_Xo

---

Tutorials for StudioPress Themes.

[designerwriter]

Well thanks Brad but the first link I can’t see what they’re really doing, there’s no talking instructions and the second link is a paid service. I am on EI trying to get my new website up so that it is mobile responsive. Any other suggestions?

[Susan]

Get Firebug, so you can identify what you need to change 🙂

[designerwriter]

I am using Inspect Element on Google Chrome. The blue color is part of the blue group color designation. How do I separate the code to apply it to specific headings that will change color?

[Brad Dalton]

Are you referring to this link?

http://magazinepro.eagleheartdynamic.com/wp-content/uploads/2015/09/wrprmassmegawattswind.pdf

Try this:

.magazine-pro-blue .entry-content a  {
    color: pink;
}

As Susan suggested, you will need to spend some time yourself playing around with Firebug or Googles Inspector to work out which classes and CSS you need to modify to get the styling you want.

---

Tutorials for StudioPress Themes.

[designerwriter]

Yep. So I put this code with the color I want at the bottom of the CSS page correct so that it overrides the blue group color? What if I wanted to add a hover color to this...what code would I have to add?

Thanks for your help. I need to take some CSS courses in code but I just haven’t had the time yet. I will though.

[Brad Dalton]

I think its better to create a test site with a copy of your theme and play around with it.

Here's a CSS reference w3 schools

Here's how to change the hover http://wpsites.net/web-design/find-test-modify-the-css-in-your-themes-style-css-file/

---

Tutorials for StudioPress Themes.

[designerwriter]

Well this code didn’t work...
.magazine-pro-blue .entry-content a { color: pink;
}

It’s ok though I left it #333. I will look at the other link about the hover color. Thank you for your help Brad.:-)

[designerwriter]

Well I am not sure where to find the code to change this blue sentence since it is part of the blue group.

http://magazinepro.eagleheartdynamic.com/2015/09/17/general-fusion-revolutionary-technology/?preview=true&preview_id=1287&preview_nonce=b362c31c44

It’s the Download sentence I would like to have change color but I am not sure how to change it since it’s part of that blue group! Even if I can add an underline that would be ok too but I don’t want the underline to show up in the nav bar hover.

Grace

[designerwriter]

Just looking at this paragraph, is there any way I can move the line underneath the title with the date? It’s a dumb place to have it since it interferes with the title and body copy.

[Brad Dalton]

This works, i tested it.

.magazine-pro-blue .entry-content a  {
    color: pink;
}

---

Tutorials for StudioPress Themes.

[designerwriter]

I put it at the bottom of the css page and it didn’t work. I will put it at the bottom of the blue section and see if it works.

[designerwriter]

It worked but I am still not getting a different hover color. I do get a change from the pointer to a hand though. Is that good enough for the viewer? For some reason, even when I tried adding hover and visited, the color did not change on this line. So I will just leave it as is going from the pointer to the hand for the link.

[designerwriter]

Ok I went over the notes of the link you sent me. So here is what I did. Initially, I changed this code

a {
background-color: inherit;
color: #222;
font-weight: 400;
text-decoration: underline;

to have underline in there. So I changed it from none to underline. However, this added an underline to the name bar menu names so I went back and changed underline back to none and they disappeared. I initially wanted the underline on the hyperlink but decided it didn’t look good on the Nav bar menu names so I reverted back to none.

a {
background-color: inherit;
color: #222;
font-weight: 400;
text-decoration: none;

Here’s the code I added after the blue code section:

.magazine-pro-blue .entry-content a {
color: #00add0;
}
.magazine-pro-blue .entry-content a:hover {
color: #0075b0;

...and it worked. So I have the lighter blue initially and then it hovers to the darker blue which is what I wanted. I can live without the underline but just in case I change my mind, what code would I put after this hover code if I wanted the underline? Thank you!

[designerwriter]

Nevermind I figured it out...all I had to do to get the underline was put the line of code for text decoration (see the bold copy) after the lines of code referring to the 2 colors as such:

.magazine-pro-blue .entry-content a {
color: #00add0;
}
.magazine-pro-blue .entry-content a:hover {
color: #0075b0;
text-decoration: underline;
}

It worked!

[Brad Dalton]

ok.

---

Tutorials for StudioPress Themes.

[Author]

Posts