Link Colors
-
So this can be very frustrating. It’s impossible to recognize the links on my home page because they are all the same color as the rest of the text and are not underlined. I did find a section under “colors” where you can choose a different color for links but it only changes when you hover over it. It does not change anything when looking at the page. Anybody have any advice with how to make links recognizeable thru underlining or color changes in a non-hovering state? Much appreciate your time, as always!
The page I need help with: [log in to see the link]
-
Hello @holdthatmayo,
Thank you for reaching out,
For the home with the archive of posts, you can use the following CSS:
.home.blog .blog-entry-summary a { color: #ff0000; } .home.blog .blog-entry-summary a:hover { color: #000; }
Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.
Result: https://postimg.cc/grQ914XN.Also, for the single posts, you can navigate to the following path and set the link colors: Customizer > Blog > Single Post > Typography and Colors.
Result: https://postimg.cc/8FbfR0Ft.Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).
I hope it helps.
Best RegardsWow Shahin, That worked perfectly. And it was so easy to do! Is there a way to do the same thing with the links in the widgets in my right nav sidebar as well?
Hello @holdthatmayo,
Thank you for reaching out,
I’m glad the previous issue was resolved.
About the link on the sidebar, you can add the following CSS:.sidebar-box.widget_block a { color: #000; } .sidebar-box.widget_block a:hover { color: #ff0000; }
Also, you can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/I hope it helps.
Best RegardsThank you Shahin for the quick followup. I added the sidebar code but unfortunately, this time it did not make any changes. Maybe the widget is not part of a sidebar and just considered part of the main home page? Here is the url: [ redundant link removed ]All of the links listed below the “Red The Reviews ” widget on the right, should have turned red.
Thank you so much for your time!
Hi @holdthatmayo,
Thank you for reaching out,
I apologize, I wrote the opposite, the first hex color is black #000 and the second one is red which is in the hover: #ff0000
https://postimg.cc/XpBvshDF
So you can use this one if you want the link to be red and on hover change it to black:.sidebar-box.widget_block a { color: #ff0000; } .sidebar-box.widget_block a:hover { color: #000; }
I hope it helps.
Best RegardsYes, that worked perfectly! Thank you!! Is there any way that CSS can be used to increase the size of he font in the link below the devil on the upper right hand side? WordPress defaults all image captions to a very small font so I was wondering if there is some way to increase the size of the caption link that I have beneath my devil image on the top right widget? (at [ redundant link removed ] )
Hi @holdthatmayo,
Thank you for reaching out,
It is better to use the widget settings and set your desired font size; You can find the widget /block settings here: WP Dashboard > Appearance > Widgets.
However, you can add the following CSS:
.widget_block .wp-element-caption { font-size: 18px; line-height: 36px; }
Feel free to modify the CSS as needed.
I hope it helps.
Best RegardsWorked like a charm! This CSS option is so great cause it makes things so easy! One last question. The text box for “tag line” in general settings does not allow for any html. Is there a way to use CSS to change the type of font used for the tagline copy that appears in the header?
Hello @holdthatmayo,
Thank you for reaching out,
Please provide a screenshot to show exactly which part of your site you want to modify it, also, please describe how you would like it to look. I didn’t find a tagline on your URL.
You can upload your files to one of the following online services:
https://postimages.orgBest Regards
Hi Shahin, The “tag line” copy I filled out in the general settings page is, “HoldThatMayo.com- The Official Site of The Mayo Conspiracy” . If you click on this link to my site, you will see that copy appears directly beneath the header image: [ redundant link removed ]
I am good with the size of the default font. My goal is to change the type of font in this section. I hope this helps clarify things!
Hello @holdthatmayo,
Thank you for reaching out,
It would be great if you could share a screenshot.
I know where the tagline is but I couldn’t understand where the copy appears.If you just want to change the site’s color, please go to WP Dashboard > Appearance > Customizer > Color: https://docs.oceanwp.org/article/897-customizer-colors.
If you want to change the logo or text color in the header as a logo in Customizer, go to header > Logo and adjust the “Textual Logo Color” option.
If you want to change the page title (under the header), please go to Customizer > Pages & Special Pages > Page Title; all styling for the page title is here: https://docs.oceanwp.org/article/899-customizer-pages-special-pages#Page-Title-_X3BW
I hope it helps.
Best RegardsHi Shahin,
I created two screenshots to help clarify the issue. The first one , called settings, shows exactly where I entered the copy for the tagline. It is highlghted in blue: “Holdthatmayo.com – The official Site of The Mato Conspiracy”
The second screenshot of my homepage shows exactly where that copy appears on my site, which is direct beneath the header image. The settings input box does not let me add html. The size and color of the font are font. I am looking to change the type of font in this tagline section.
Unfortunately I do not seem to have access to adding screenshot attachments in this forum. Perhaps there is a setting I can change? Regardless, you can still view the placement of the above copy if you go to my homepage, at [ redundant link removed ] You will see it displayed directly beneath the header image at the top.
Hope this helps and as always, appreciate your time!
Hello @holdthatmayo,
Thank you for reaching out,Did you check this part of my previous reply:
https://www.ads-software.com/support/topic/link-colors-12/#:~:text=If%20you%20want%20to%20change%20the%20page%20title%20(under%20the%20header)%2C%20please%20go%20to%20Customizer%20%3E%20Pages%20%26%20Special%20Pages%20%3E%20Page%20Title%3B%20all%20styling%20for%20the%20page%20title%20is%20here%3A%20https%3A//docs.oceanwp.org/article/899%2Dcustomizer%2Dpages%2Dspecial%2Dpages%23Page%2DTitle%2D_X3BWAlso, you can try this method: https://docs.oceanwp.org/article/872-page-title-oceanwp-settings.
________
You can upload your files to one of the following online services:
https://postimages.org
https://loom.com
https://drive.google.com
https://dropbox.com
Or any other service you know.I hope it helps.
Best RegardsThat worked! Thank you!!
You’re welcome.
I’m glad we could help.
- You must be logged in to reply to this topic.