Baskerville 2: Theme font issues
-
Hi,
This is a continuation of thread #2960357 from 2017, as I just started using this theme and my site displays this same issue in 2019 – very unprofessional and not great from the theme developer.
I’m on the premium plan, so how can I fix this please?
Many thanks
The blog I need help with is: (visible only to logged in users)
-
Hi –
I can see that you’ve been using live chat to reach our support team about 30 minutes ago. Please continue writing to us there. Starting multiple help requests – in multiple places – makes it difficult to keep track of things and increases the amount of time that it takes for us to provide the help you need.
-
Hi @lizkarloski
Thanks for your response.
Yes, I use live chat when I can’t solve an issue and haven’t received a response from the forum. I thought that this is what my Premium Plan offers – has this changed?
I was using live chat last night for a totally different issue that involved my WP dashboard preview, not for the issue I’ve posted in this ticket, so I still need help with this ticket thanks.
-
Forgot to mention @lizkarloski that when I’ve requested CSS from live chat support to change something, I’m usually directed to hire a developer or to the WP CSS forum.
Let me know if I’m not using the WP forum or live chat correctly.
Many thanks :)
-
@nilla2014 we do offer basic CSS help in chat, and a little more in our forums, however when it comes to advanced or extensive changes, we do recommend a developer:
https://en.support.wordpress.com/custom-design/css-support-in-live-chat/If you’d like, we can move this thread to the CSS forums for you. Please confirm, and include a description of the change you’re hoping to make. Please do avoid opening multiple issues in multiple places, though, as that really can get confusing for our support. Thanks in advance.
-
Thanks for the reply @supernovia
Although I’ve fixed most of the issues with CSS, this is not a CSS issue, it’s a bug with the Baskerville 2 theme, please see thread #2960357 from 2017.
I think this should stay here until the Baskerville 2 developer fixes this bug.
Thanks
-
Good morning –
nilla2014, can you send me a direct link from your browser for the thread #2960357?
Is it in the WordPress.com support forums, Baskerville theme forum, GitHub? Having the link will help us with follow up. Thanks so much.
-
Hi @lizakarkoski
This link is in the WP.com Theme forum: https://en.forums.wordpress.com/topic/baskerville-2-theme-font-issues/
I have a fast connection so it can’t be a connection issue and I’ve also cleared my cache. I didn’t have this display issue with my Visual theme.
Many thanks
-
Thank you for the link.
That is not a bug, and not an issue with any specific theme. What is described in that thread is called a Flash of Unstyled Text (FOUT), and is caused by how custom fonts are loaded on all WordPress.com themes. You can read a detailed explanation here:
https://en.forums.wordpress.com/topic/default-fonts-please-specify-them/#post-2870596
You can prevent it from happening by adding this CSS to your site:
.wf-loading body { visibility: hidden; } -
Thanks @kokkieh for the link and explanation, but I never saw this with my Visual theme and I did change its font also.
The same thing occurs with the default Teal colour also – displays for a second when clicking a heading before changing to the correct colour.
Many thanks for the fix. :)
-
It would have happened with Visual as well, but it’s very possible that you just didn’t see it – something like the font also gets cached in your browser, so often you would only see it the first time you open a page, and on subsequent visits of the page the custom font would already be loaded.
Regarding the colour, are you speaking of the Bluish colour that appears? That is the focus colour for links on your site:
Links have different states, and it’s possible to add different colours depending what state a link is in, i.e. unclicked, mouse hovering, focused, and clicked (think of how when you do a Google search and click on a link, if you go back to the search the result you’ve already visited is now shown in a different colour.)
With the colour scheme you have active on your site at the moment, the blue colour is the active link colour, so that shows while a link is busy loading, with teal being the unclicked and white the hover colour.
You can change the focused colour to be the same teal shade with this:
/* Change focus colour for post title links */ .post-header .post-title a:focus { color: #40d7bc; } -
Thanks @kokkieh. I’m sure I would have noticed this during the 3 years that I used Visual, but thanks for explaining everything.
This is what I have already:
.wf-active .single .post-header .post-title, .entry-title h1 {
font-size: 1.8em;
color: #40d7bc;
}.wf-active .single .post-header .post-title, .entry-title h1 a:focus {
color: #40d7bc;
}.wf-active .post-content h2, .wf-active .post-content h3 {
color: #40d7bc;
}
and this
.post-header .post-title a {
color: #40d7bc;
}.post-header .post-title a:hover {
color: #eeeeee;
}I’ll add the a:focus to the above.
I’m told by support that I can’t change the link within the line that displays beneath the sharing icons: “You and 49 other bloggers like this.”
I’ve tried all variations of CSS, but it won’t change over.Cheers :)
-
Do you mean you want to change the style of the button? CSS can style a link, but it can’t change where the link points.
-
Hi @supernovia, no, I don’t want to style any of the buttons, but this link span text, within the sentence:
“49 other bloggers”Sorry for the confusion.
Thanks for your response.
-
Hi @supernovia
I’ve been able to change the colour in Inspect of the span text in the ‘Sharing is caring’ area for:
You and “49 other bloggers” like this.However, I can’t seem to get this to work in my CSS, regardless of the combination I try:
.wpl-count-text .element.style
#other-gravatars a {
color: #a1ebde;
}Any ideas?
Many thanks :)
-
Hi @nilla2014,
I’m afraid you won’t be able to change that with custom CSS.
The code for the Like button section on the site does not come from your site itself, but from the Jetpack plugin, and is embedded into your site via an iframe. That means it’s appearance is controlled by Jetpack’s CSS, not your site’s, and it cannot be overridden by adding custom CSS to your site.
To change the styling of any element inside that iframe you’d need to change the
style.cssfile of Jetpack itself, which is not possible on WordPress.com. -
I thought as I could change it in Inspect then it was cool to change with CSS.
Not exactly, no.
An iframe is essentially a mini-website running inside your website – if you look at the source code for the like button section you’ll see it has its own
Doctypedeclaration, followed byhtml,headandbodytags, so that line containing the Like button and profile pics is an entire website in its own right.You can use Inspect to change it, because there you’re directly manipulating the code already loaded in the browser, so the CSS is getting applied on top of everything else already there.
But custom CSS you add in the Customizer only applies to your WordPress.com site, not to the Like button mini-site, as that site has its own CSS. So Inspect is handy for working out the code to change something, but it doesn’t necessarily mean that code will work if you add it to custom CSS, as that depends on the order in which stuff on the site loads as well as where the code is loading from.
-
Many thanks @kokkieh, I’m about to take a refresher CSS course, to make sure I’ve coded everything correctly – it’s been a while. :)
It’s a pain that I can’t change this last piece of inline text as for my site, this fails compliancy for visually impaired users. I work in usability, so this is a problem for me and hope that Baskerville 2’s designer can change this somehow in a future upgrade.
Thanks again for your response!
- The topic ‘Baskerville 2: Theme font issues’ is closed to new replies.
WordPress.com Forums 