- This topic has 7 replies, 3 voices, and was last updated 6 months, 2 weeks ago by
David.
-
AuthorPosts
-
July 11, 2020 at 1:54 am #1359817
ad
Sorry if I steal your time, but I’ve been searching for some hours now – without result.
I’m looking for the css-code to prevent background color appearing on two image links on a specific page (see url beneath). The paragraph code containing the two images:<p><a href="https://twitter.com/dharmoebe/" target="_blank" rel="noopener noreferrer"><img src="http://www.gedel.nl/wp-content/uploads/2020/05/twitter-vogel.png" alt="" width="34" /></a> <a href="https://instagram.com/dharmoebe/" target="_blank" rel="noopener noreferrer"><img src="http://www.gedel.nl/wp-content/uploads/2020/05/Instagram-icoon.png" alt="" width="33" height="33" /></a></p>
In extra css I put:
.page-id-4527 a:hover img {background-color: transparent}This noob can’t get it to work, unfortunately.
Thanks for any help!July 11, 2020 at 10:56 am #1360272Leo
StaffCustomer SupportHi there,
You will need add a custom class like
no-background-color
to the social icons links first.Then I can provide the CSS π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 11, 2020 at 11:21 pm #1360603ad
Thanks, Leo, for the fast reply!
Here’s the code with class added:<p><a href="https://twitter.com/dharmoebe/" target="_blank" rel="noopener noreferrer" class="no-background-color"><img src="http://www.gedel.nl/wp-content/uploads/2020/05/twitter-vogel.png" alt="" class="wp-image-7083" width="34"></a> <a href="https://instagram.com/dharmoebe/" target="_blank" rel="noopener noreferrer" class="no-background-color"><img src="http://www.gedel.nl/wp-content/uploads/2020/05/Instagram-icoon.png" alt="" class="wp-image-7082" width="33" height="33"></a></p>
Greetings,
adJuly 12, 2020 at 9:54 am #1361092Leo
StaffCustomer SupportThe wrong quotation mark is being used here.
Make sure it’s
class="no-background-color"
.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 12, 2020 at 10:56 pm #1361488ad
Mm, I opened source view in Chrome to check.
Both instances – my quote and yours – appear to have the same contents:
"no-background-color"Also, I convert all copied text standard to plain text via PureText application (shortcut).
Very curious to hear more details on this πJuly 13, 2020 at 2:29 am #1361641David
StaffCustomer SupportHi there,
this is how your HTML should look:
<p> <a href="https://twitter.com/dharmoebe/" target="_blank" rel="noopener noreferrer" class="no-background-color"> <img src="https://www.gedel.nl/wp-content/uploads/2020/05/twitter-vogel.png" alt="" class="wp-image-7083" width="34"> </a> <a href="https://instagram.com/dharmoebe/" target="_blank" rel="noopener noreferrer" class="no-background-color"> <img src="https://www.gedel.nl/wp-content/uploads/2020/05/Instagram-icoon.png" alt="" class="wp-image-7082" width="33" height="33"> </a> </p>
Then use his CSS to remove the color:
.inside-article a.no-background-color:hover { background-color: transparent; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 13, 2020 at 2:48 am #1361661ad
Perfect – thanks for your help!
July 13, 2020 at 3:21 am #1361693David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.