CSS: Link Box

raphaelledergerber · Member · Jan 14, 2016 at 3:33 pm
Copy link

Add topic to favorites
Dear all,

How can we change the color of the link box in the banner on homepage: http://ledergerber-partner.ch?

What’s the HTML code to use the same link box as we have it in this banner for other pages of our website? (same seen on other pages from other e.g. http://apricotconsulting.us/our-services/corporate-social-responsibility)

Thanks,
Raphael

The blog I need help with is: (visible only to logged in users)
staff-jeanpierreac · Staff · Jan 15, 2016 at 2:14 pm
Copy link
Howdy!

I assume you mean ‘mehr über uns >’ link. If so, you have two colors, the one when your mouse pointer is on it and the color in other case. First, the last. You can change this link box color, with this code in which you can alter values for background and color (this is the text color):

#hero .hentry .entry-content a.button {
color: #ffffff;
background: #ff0000;
}

And you would need to change the selector to apply your new colors to the link on hover.

#hero .hentry a.button:hover {
background: #00ff00;
color: #0000ff;
}

Of course, I am using arbitrary colors just to show the effect. You can use a tool to convert your preferred color to HEX values, for instance this.

What’s the HTML code to use the same link box as we have it in this banner for other pages of our website?

Well, for instance “zurück >” in your page http://ledergerber-partner.ch/angebot/unternehmensstrategie/?

In this case you could use once adapted to your preferred colors, this code. Take into account, this will apply to each link inside the content of an entry (post/page):

.entry-content a {
display: inline-block;
color: #ff0000;
border: 1px #00ff00 solid;
padding: 5px 10px;
border-radius: 2px;
background: #0000ff;
}
raphaelledergerber · Member · Jan 15, 2016 at 8:17 pm
Copy link
Hi Raulanton,

Thanks for this information. It works.

Using the code…
```
#hero .hentry .entry-content a.button {
color: #ffffff;
background: #ff0000;
}
```
…now the link box text have a shade. How to remove that?

Best regards,
Raphael
staff-jeanpierreac · Staff · Jan 15, 2016 at 10:29 pm
Copy link
Hi again, Raphael.

I think you mean the text shadow in links as “mehr über uns >” . If so:
```
#hero .hentry {
    text-shadow: none;
}
```
If not, please, tell me which one do you mean?
raphaelledergerber · Member · Jan 15, 2016 at 10:39 pm
Copy link
Hi Raulanton,

Yes, that’s it!
Thank you so much for your very appreciated help!

Best regards,
Raphael
staff-jeanpierreac · Staff · Jan 15, 2016 at 11:00 pm
Copy link
Hi!

Glad to be of help! :)

No items found.