Hyperlink Text Color
Hi, I believe I've contact you several times in the past on this issue and we are still dealing with some issues regarding Hyperlinked text color. We want ALL links within the Body of Pages and Posts, including Bullet Lists and Caption text to be a light blue color but without an underline. But we have to manually update this color in the HTML inline CSS rather than it be automatic. Can you help provide the CSS so that all the Hyperlinked text in Bullet Lists and Numbered Lists is the color #0084b6 and does not have an Underline?
Here is an example to view:
https://visionzeronetwork.org/accelerating-advocacy-to-slow-our-streets/
You previously provided this CSS but it does not seem to be working anymore.
/*Add link color to bullet */ lists
.brz .brz-rich-text__custom a {
color: #0084b6;
}
This is very frustrating that I keep having to fix this issue.
Another example is here on this page and the bullets are not visible in the lighter blue color.
-
Hi Bertrand,
Please try using the below CSS and see if this works for you.
.brz-section--boxed a {
color: #0084b6 !important;
text-decoration: none !important;
}Please see this screenshot - https://prnt.sc/pdbqEThmj1n6
About the bullets, are they going to be the same color as the links?
I am looking forward to your response.
Kind regards,
Ariel H.0 -
Yes, I want ALL hyperlink text on the site to appear as #0084b6, including in bullet links, but only the links, the rest of the text within a Bullet should be the normal text color #1e414e.
0 -
Hi, The CSS you gave me is also impacting the Buttons and I am not able to manually override. You can see an example here:
https://visionzeronetwork.org/about/support-our-work/
the "Support our Work" button is now light blue, but we want the buttons to have dark blue text. I don't know why it is so difficult in Brizy to control colors for Hyperlinks and Body text while also manually choosing text color for certain elements. I have pasted a screenshot below
I have been struggling with this since we switched to the Brizy Builder. I am pasting below ALL the CSS you have provided through various support requests that we are using for Hyperlink color. I want a solution that only impacts the Hyperlinked text within Paragraph text, Bullets, Numbered Lists, and Captions but I still want the option to manually set the color using the Brizy Builder for Buttons or Header hyperlinks.
/*Add link color to regular texts */
p a {
color: #0084b6;
}.brz-section--boxed a {
color: #0084b6 !important;
text-decoration: none !important;
}/*Add link color to bullet */ lists
.brz .brz-rich-text__custom a {
color: #0084b6;
}/*Add link color to bold texts */
.brz .brz-rich-text strong a {
color: #0084b6;
}/* mouse over link */
.brz .brz-rich-text__custom a:hover {
color: #0084b6;
}0 -
Hi Eric,
Thank you for the update.
Could you please replace the last CSS I gave you with this one?
.brz .brz-rich-text .link--external {
color:#0084b6;
text-decoration: none;
}This should not impact the button - https://youtu.be/sABGLxjPpr0
Best regards,
Ariel H.0 -
Ok, thank you. That looks like it is working so far.
0 -
Hi again, I am still seeing the issue as it relates to Posts. I have created a Password Protected Post to test the issue and you can see that the Hyperlinks in the Bullet list are not light blue.
Password: brizy
https://visionzeronetwork.org/kf-is-testing-fonts/
Can you please review and provide CSS that will make these bullet hyperlinks blue so that we do not have to manually color the hyperlink text within bullets?
Thank you
0 -
Hi Eric,
Thank you for keeping in touch.
Please try the following CSS and see if this works for you.
I have tested it on a live CSS editor - https://prnt.sc/thXI0_G3zwZO.brz-columns.brz-css-cisxr.brz-css-tyzeq a {
color: #0084b6;
text-decoration: none;
}I am looking forward to your response.
Best regards,
Ariel H.0 -
Hi, this CSS fix you provided does not seem to be working anymore. Also, it does not work on links that are made Italic. Can you please review and provided an updated resolution?
View example here:
https://visionzeronetwork.org/kf-is-testing-fonts/
password: brizy
0 -
Hi Eric,
Unfortunately, I no longer have access to this page. Please provide a working link, so we can check it again.
Screenshot: https://prnt.sc/vYwk_LCSSlXIBest regards,
Ariel H.0 -
Apologies, I have restored this Post. Please try to access again.
https://visionzeronetwork.org/kf-is-testing-fonts/
password: brizy
0 -
Hi Eric,
Please try the following:
.brz .brz-columns .brz-column__items a {
color: #0084b6;;
text-decoration: none;
}
.brz .brz-columns .brz-wp-post-content em, i {
color: #0084b6;;
}Screenshot on live CSS editor - https://prnt.sc/N8UTlJReKnPL
Please try this and let me know how it goes.Best regards,
Ariel H.
0 -
This overrides the previous CSS and impacts the Text within Buttons, making them light blue. We are just focusing on the text within the Bullet lists to make sure when they are Hyperlink AND italic, they appear as the link color.
0 -
Hi Eric,
Please also add a button on the test page.
Also provide the affected pages, so we can also check them.Best regards,
Ariel H.0 -
That doesn't seem to be an issue now. However, there is a bigger typography issue I am having that I need help with as soon as possible.
For some reason now the Heading font style is changing size when I hover over the content area of a Post. You can see the issue here, and I have uploaded a video of the issue here:
Heading text changes size on Hover over Post content area
https://visionzeronetwork.org/calling-on-the-mayors-of-america/
https://drive.google.com/file/d/1RtKm0fW9SaC4hMcDPAaNoWpmBEckMbY_/view?usp=share_link
0 -
Hi Eric,
Upon checking, we have identified that a CSS marked as !important is causing the issue. To fix it, you will need to locate the specific CSS code and remove the !important declaration.
Otherwise, you may use the following CSS, as a temporary fix until you locate the above CSS on this page.
.single h3 {
font-size: unset !important;
line-height: unset !important;
}This is demonstrated on this screencast - https://youtu.be/X8RJp1G7NAk
Best regards,
Ariel H.0 -
That is not correct. I identified where this CSS is and even after I remove it, it does not address the issue. This CSS for the H tags was also provided by your support in the past to control the Typography. For some reason, I find that Brizy has a lot of issues controlling typography and everything has to be done with Custom CSS.
Please keep trying to figure this out as this is a problem if our fonts are changing sizes on Hover on our Post pages.
0 -
Hi Eric,
Thank you for the update.
The CSS that use !important is used to override a CSS property, it takes precedence over all other styles, including styles defined in external style sheets. This can make it challenging to determine which styles are actually affecting a particular element on the page. Please remove it, so I can continue working on this page.
I'll look into this again and get back to you as soon as possible.Best regards,
Ariel H.0 -
From what I can tell, it only seems to be an issue when the Heading font is assigned BOLD also <b> vs. <strong>. So we just need to make sure none of our Headings use the <b> tag which is coming from pasting from an external source.
0 -
Hi Eric,
How are you doing?
I have inspected your site today, but the issue no longer occurs. I assume that you did something at your end to address the issue?
I've prepared a short screencast for you on this link, to show you how it looks like at my end. This page is running in incognito mode - https://youtu.be/cxkhY_LOBlwBest regards,
Ariel H.0 -
If you see my previous comment, it seems to have to do with the font being assign Bold via the <b> tag vs. the <strong> tag.
Also, just for your information, I have noticed your Support login page does not load on Mozilla Firefox for some reason and I am only able to login to respond to comments via Chrome.
0 -
Hi Eric,
I checked Firefox today; however, I am unable to reproduce the issue as shown on this screenshot - https://prnt.sc/20KW4HBpedLW
Please try it in a private window and see if this makes any difference.
Best regards,
Ariel H.0 -
Here is a video where you can see when I view this string and then go to Sign In nothing happens,
https://drive.google.com/file/d/16D5MTCL-_IteCoZe_HkibmaqV8KDE-9A/view?usp=share_link
0 -
Hi Eric,
Thank you for bringing this issue to our attention. Upon checking, this only occurs in Firefox and Safari on macOS, this doesn't occur on Windows.
I have already reported this issue to our seniors team.Best regards,
Ariel H.0 -
Just so you are aware, I am on a PC/Windows machine with the most up to date version of Firefox and I am still experiencing the issue. So it appears me it occurs on BOTH macOS and Windows versions of Mozilla Firefox. Your sign in page only loads on Chrome, Safari, and Edge browsers from what I tested.
0 -
Hi Eric,
We have tested it on the latest version of Firefox on Windows, this appears to be working at my end - https://youtu.be/eic3rAZvkLo
This is the screen capture from a Mac - https://www.loom.com/share/c246f381f3b8482397f1fd2b0f5815ae
In any case, I will follow this up for you (ask them to try Firefox on Mac and Windows to confirm the issue) and get back to you as soon as I have any updates.
Best regards,
Ariel H.0
Please sign in to leave a comment.
Comments
25 comments