How to stop theme overrides?
-
I’m noticing the plugin sets it’s own typography. How do I make sure the plugin does not override my theme’s typography? The plugin alters the size, color, font-family, weight and so forth. Is there some way to have the plugin respect the theme without writing a bunch of CSS just to override the plugin – or without having to go through all the plugin’s customizer settings (which don’t allow for responsive typography)?
-
Hello dabeed,
Greetings Hope you are doing well.
Actually, our BetterDocs uses it’s own style for the font-color and font-weight only, but it doesn’t affect the font-family as it is adapted from the theme that you are using on your end. Will you please tell me if you are using which theme on your website? Also, are you using any custom CSS for any style? Please check if you have set the typography from the theme globally or not. If you set the style globally, then it should change the style for the BetterDocs content also.
We are looking forward to your response.
Thank you.Hi Amit! I’m doing great and hope the same is true for you!
I’m using GeneratePress without a child theme. I’m setting fonts in the Customizer – fonts are being set globally. These are the only fonts loading as seen in payload:
Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic|Inter:100,200,300,regular,500,600,700,800,900
BetterDocs is overriding font-family for h1’s in these 5 css files.
- /wp-content/plugins/betterdocs/assets/public/css/toc.css
- /wp-content/plugins/betterdocs/assets/public/css/social-share.css
- /wp-content/plugins/betterdocs/assets/public/css/reactions.cs
- /wp-content/plugins/betterdocs/assets/public/css/category-grid.cs
- /wp-content/plugins/betterdocs/assets/public/css/single.cs
Sample from toc.css (specificity 0,7,0) where .betterdocs-entry-title is added to the page h1:
.betterdocs-wrapper.betterdocs-single-layout-8 .betterdocs-content-wrapper .docs-content-full-main .betterdocs-content-inner-area .betterdocs-entry-header .betterdocs-entry-title {
color: #1d2939;
font-family: Lora;
font-size: 42px;
font-weight: 700;
line-height: 1.2em;
margin: 0;
padding-bottom: 24px;
text-transform: unset
}This is overriding the theme code (specificity 0,0,1):
h1 {
font-family: Inter, sans-serif;
font-weight: 300;
font-size: 2.98rem;
}The result in this case is that a system font is loaded for all h1’s on all BetterDocs generated pages (since Lora isn’t loading).
Unless I’m missing something, it does seem BetterDocs CSS is doing much more than color and weight.
There’s also a content area font-size being injected that overrides the theme:
.betterdocs-wrapper.betterdocs-single-wrapper.betterdocs-single-layout-8 .betterdocs-content-wrapper .docs-content-full-main .betterdocs-content, .betterdocs-wrapper.betterdocs-single-wrapper.betterdocs-single-layout-9 .betterdocs-content-wrapper .docs-content-full-main .betterdocs-content {
font-size: 18px;
}The issue is compounded if trying to use fluid typography (which I am, again through the Customizer for GeneratePress).
There is even some BetterDocs CSS where one area is trying to change the font-size in a media query but other BetterDocs CSS overrides that and cancels out the responsiveness:
From toc.css
@media only screen and (max-width: 1280px) {
.betterdocs-wrapper.betterdocs-single-layout-8 .betterdocs-content-wrapper .docs-content-full-main .betterdocs-content-inner-area .betterdocs-entry-header .betterdocs-entry-title {
font-size: 30px;
padding-bottom: 18px;
}
}But then injected CSS…
.betterdocs-wrapper.betterdocs-single-wrapper.betterdocs-single-layout-8 .betterdocs-content-wrapper .docs-content-full-main .betterdocs-content-inner-area .betterdocs-entry-header .betterdocs-entry-title, .betterdocs-wrapper.betterdocs-single-wrapper.betterdocs-single-layout-9 .betterdocs-content-wrapper .docs-content-full-main .betterdocs-content-inner-area .betterdocs-entry-header .betterdocs-entry-title {
font-size: 42px;
}… font-size: 42px; wins on specificity (and order).
I may be wrong, but it sure seems like there is a great deal one has to fight in order to maintain theme styles for standard elements like headings and body content.
Hello dabeed,
Thanks for getting back to us and for sharing the details with us. To adapt the styles with the theme, will you please use the following custom CSS code on your end?body .betterdocs-container {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
line-height: inherit !important;
}
You can simply add custom CSS by navigating to your WordPress Dashboard -> Appearance -> Customize.After you are on the Customizer page, search for the “Additional CSS” option. You can then go ahead and insert CSS Code. Please check this screencast to learn more – https://d.pr/v/QrrfTw
Please let us know the update after checking on your end.
Thank you.Hi Amit
Thanks for the super fast reply – very much appreciated!
Unfortunately, that isn’t how CSS works. This suggestion made no impact for two reasons.
First, there is no .betterdocs-container class. I even opened the plugin files in VSCode and did a search, and that class doesn’t exist anywhere. Perhaps you meant betterdocs-wrapper? But even that wouldn’t work due to the second reason.
Second, inherit works on the element to which it is applied and instructs that element to inherit the property’s value from its parent HTML element in the DOM. It does not mean “find another CSS rule that would have applied to this element and use that value instead.” Inherit is tied to the hierarchical structure of the DOM, not the CSS Cascade. Therefore, even using h1.betterdocs-entry-title { font-family: inherit !important; } will not apply the theme’s h1 styles — because that style will now be inherited from whatever the parent element is for h1.betterdocs-entry-title, not from the CSS Cascade (or some sort of reverse specificity).
The code you provided would tell the browser to use the styles set on whatever the parent element of .betterdocs-container is (but only if .betterdocs-container existed). If .betterdocs-wrapper was intended, this code would inherit those properties from div.site-content on the site I’m working on – but it would likely be different depending on the theme. So the code provided would likely only have some very odd results (if any), and would certainly be inconsistent from site to site.To the best of my knowledge there are only 2 ways to resolve this issue.
Option 1: The site dev re-writes any and all necessary code to override BetterDocs CSS that changes theme styles.
Pro: It (usually) works.
Cons: More work (initially and for theme changes) as it requires duplication of code, resulting in greater potential for error and inconsistencies. This will also break if the classes and/or class structure used by BetterDocs change at some point in the future. It’s not a good long-term solution.
Option 2: BetterDocs provides a means (such as a single toggle) to turn off any BetterDocs CSS that alters any standard elements – for example heading and body content area typography.
Pros: It works out of the box, easier for non-devs, no need for code duplication – there’s a single source of truth for styles reducing possible errors and inconsistencies. Site owners that want the BetterDocs CSS overrides can still have them. Site owners that prefer theme style consistency can have that too. Potential changes to classes/structure within BetterDocs would no longer be a concern (for the site owner).
Cons: I can’t think of any – other than more work for BetterDocs to provide this ability.
My original question was if there was a way to get the plugin to honor theme settings, which would be Option 2. At this point my assumption is that this is not currently available (but please correct me if I’m wrong). So I’ve already written all the overrides with the proper specificity for my needs.
I understand it may be a bit of work to implement Option 2 (I’ve been in dev for 30 years and have developed plugins as well), but I think it would be a great addition to the plugin – especially for those who aren’t devs yet still want theme consistency even on the BetterDocs pages.
I also understand it is ‘par for the course’ to have to override plugin CSS now and then. And I understand that as a ‘system’ plugin with its own Post Type(s) and layout requirements, these factors increase the potential need for some theme overrides. But I’d also argue that typography for headings and the content area ‘reading font’ do not require styling from BetterDocs, and that these styles should either be avoided by BetterDocs, or provided only as an option via a toggle.
To summarize, here are the benefits I see should BetterDocs implement Option 2:
- It would actually be true to say “it works with all themes”.
- Less confusion for non-devs and easier on devs (including maintenance).
- Greater optimization (less code to load since no overrides are needed).
- Single source of truth that would need to be maintained for CSS (rather than 2 that must be kept in sync).
- Provides the easiest way for site owners to maintain theme consistency throughout the site.
- Much less likely that class/structure changes to the plugin would break theme styles.
That said, I am very impressed with this plugin. I only recently came across BetterDocs (I am using it for documentation on a site for a new plugin we are developing) and I am loving it! I will certainly be thinking about several client sites that may also benefit from this plugin.
Adding something like Option 2 would make BetterDocs even better – would that be BetterBetterDocs, or BestDocs? 😉
Hi @dabeed,
Greetings. Hope you are doing well.Regarding your query, it would be great if you could share exact URL of your BetterDocs page where you are seeing the override issue so that I can check and assist you further.
Thanks.
It’s all local for now.
But you should be able to look at the plugin files I mentioned and see the code where BetterDocs is setting styles for font-family, font-size and things on the h1.Or you could look on your demo, for example on this page: https://demo.betterdocs.co/docs/community-support-for-sleek-layout-expert-guidance/
The theme you use (Flexia) sets the h1 to font-size: 2em; and font-family: Merriweather,sans-serif;. BetterDocs then overrides these and sets the h1 font-size: 22px; and font-family: “Lora”, Sans-serif;. So you should be able to see everything I have mentioned occurring on your site.The only ways to ‘fix’ this is for either the site dev to write all the overrides just to allow the theme to work, or, BetterDocs removes CSS that overrides basic theme code (like typography). In my option this CSS should be removed from BetterDocs – or at least a toggle provided to turn it off.
Hi @dabeed,
Greetings. Hope you are doing well.Thanks for sharing in details. I really appreciate this. I am now transferring this issue to our Dev Team now. Will notify you ASPA with an update. Don’t worry.
Best Regards.
Hi @dabeed,
Greetings. Hope you are doing well. Thanks for allowing me time. I really appreciate your patience.Regarding your query, I have checked the URL you shared and found that the page was created using Elementor and the font-family was set from there to Lora. Now we have set that to Inter. And if you check the source of the font-family you will find that it coming from Elementor. If you disable the font-family: Lora from inspect element you will find that this is taking the font from dynamically loaded CSS from Flexia theme. For reference please check this screencast – https://d.pr/v/q5gBmQ
Hope this will help you out. I would like to suggest you to check your website settings and make sure you didn’t set any other font-settings maybe from FSI settings or from Gutenberg. If this is still causing issue then we have to check the issue from your website end or set up the same environment on our side as yours.
Can you please provide us your Site Health Information from Dashboard > Tools > Site Health > Info > Copy site info to clipboard: https://d.pr/i/KDbAny
Thanks and Regards.
You are using Elementor to override the BetterDocs typography CSS. I am using straight CSS to do the same thing. So it seems that you recognize that BetterDocs does have typography CSS that hijacks the theme, and that to fix this you must have additional CSS to override BetterDocs. You do that with Elementor, I did it with straight CSS.
The point being that the BetterDocs plugin loads typography CSS that will override the theme (unless you add more code to override BetterDocs).
Again, I have already written the additional CSS needed to override the typography CSS from BetterDocs – just like you did with Elementor.
I’m not seeking help to code CSS to override the BetterDocs typography CSS (again, I have already done this).
My question was whether there was a toggle to turn off the BetterDocs CSS rather than writing more CSS just to override BetterDocs from hijacking the theme. (You never answered that question – though I can infer that there is no toggle.)
The only thing I am doing now is pointing out that typography is the domain of the theme. What BetterDocs is doing with typography is not best practices for plugin development, and the typography CSS should be removed from the plugin. Not only does it hijack the theme, it provides no benefit at all. And there are many benefits from removing that CSS (see the list I provided in an earlier post).
Hi @dabeed,
Greetings. Hope you are doing well. Thanks for your reply.Regarding your query, on our BetterDocs we don’t use any built-in typography CSS for font-family. The font-family affects from the theme css or the page builder global css or if user set the font-family on page builder widgets/blocks specific.
It would be great if you could create a staging site by copying the full site from your local and share URL so that I can check in details and assist you further.
Thanks and Regards.
BetterDocs CSS sets font-family in 16 different CSS files:
Those files are in /plugins/betterdocs/assets/public/css.
Here’s an example from toc.css:
.betterdocs-wrapper.betterdocs-single-layout-8 .betterdocs-content-wrapper .docs-content-full-main .betterdocs-content-inner-area .betterdocs-entry-header .betterdocs-entry-title {
color: #1d2939;
font-family: Lora;
font-size: 42px;
font-weight: 700;
line-height: 1.2em;
margin: 0;
padding-bottom: 24px;
text-transform: unset;
}The CSS above is applied to the page heading <h1> where you add the class .betterdocs-entry-title to the <h1> for a BetterDocs page (with a specificity of 0,7,0).
That should be all that is needed to see that BetterDocs adds typography CSS with a specificity that will override just about any theme (probably all themes).
Even so, I’ve spun up a new site, installed the GeneratePress theme and BetterDocs (and no other plugins) I set the theme’s h1 to font-family: Arial, font-weight: 100, and font-size: 100px via the Customizer. You can see this on this page:
https://betterdocs.flywheelsites.com/sample-page/
The page heading based on theme settings looks like this:
Then I created a single BetterDocs page here:
https://betterdocs.flywheelsites.com/docs/betterdocs-page-heading/
The page heading looks like this:
Clearly BetterDocs is changing the h1 to something different than what is defined by the theme. It is also doing this for the content area font-size as noted on those pages.
-
This reply was modified 1 month, 1 week ago by
dabeed.
As an update and for more clarification, BetterDocs is adding the typography I am referring to via Customize > BetterDocs – and in most (if not all) the sections (Docs Page, Single Doc, Sidebar… etc.).
Here’s just one example from Single Doc for the Post Title:
If a user want’s to maintain theme consistency even on the BetterDocs pages, they “might” be able to use the settings in the image above to duplicate their theme. But they shouldn’t have to do that – they shouldn’t have to ‘re-apply theme settings in multiple places’. There should be an option to turn this off and let the theme work.
font-size: BetterDocs resets the font-size for h1. While I can go in and try to match font-size for desktop/tablet/mobile via settings in BetterDocs, I can’t change the breakpoints, or add more breakpoints, nor can I use clamp() for font-size for a perfect responsive font. If I want to do any of that, I have to write additional CSS to override the forced BetterDocs CSS.
color: BetterDocs resets the color for h1. While there is a color picker provided, this means I have to go find the hex for my theme’s h1 and paste that in. It would be better to use color-palette here as at least then you could directly pick the theme color (https://developer.wordpress.org/block-editor/reference-guides/components/color-palette/). However, this still means that you have to ‘reset’ this in Customize > BetterDocs rather than just let the theme do it’s job.
font-weight: This is set by BetterDocs CSS files but there is no ability to change this in Customize > BetterDocs that I can see. So the only way to override BetterDocs’ forced CSS is to write more CSS to override BetterDocs.
margin: Same thing here. The user has to find the margins used by the theme and copy those over, for each breakpoint. And if fluid margins are used via clamp(), custom CSS overrides are needed just to match what is already done by the theme.
font-family: This is like font-weight in that the BetterDocs CSS files (the 16 noted earlier) set the font-family to ‘Lora’. But there is no option that I have found that allows me to reset font-family back to the theme’s font-family for h1. The only way (that I can find) to override this h1 font-family is to write additional CSS with enough specificity to win over BetterDocs’ 0,7,0 specificity.
This is just one area of many where BetterDocs hijacks the theme by forcing a pre-made ‘layout’ in a way that makes it more difficult to maintain theme styles within BetterDocs pages.
This makes site set up more difficult and time consuming. It also means there is no longer a single source of truth for theme styling. Any change to the overall theme for this CSS means you also have to come into Customize > BetterDocs and make the same changes, or, you may have to write additional CSS to override. If a user decides to change the BetterDocs pre-made layout to another pre-made layout, that will break their theme styling as the overrides would have to be made on a BetterDocs layout by layout basis.
Providing pre-made layout options is great! I love that! But forcing all the typography that comes with these layouts is too heavy handed in my opinion. Yes, someone with 30 years of front-end dev experience like myself can easily write the necessary overrides. But that still means there is no single source of truth for theme typography. For the novice, if they want to maintain theme typography even on the BetterDocs pages, they may be unable to do so without quite a bit of help.
BetterDocs should provide a way to only use the basic, absolutely required styles for BetterDocs while relying on the theme for everything else. You can still provide the option for the full typography take-over within the layout options. But the full typography take-over layouts should not be the only option (without further customizations required). A great example of this is done by The Events Calendar:
https://theeventscalendar.com/knowledgebase/basic-template-settings/
Hopefully this and my most recent prior post explain things better. Looking forward to your reply!
Hello dabeed,
Hope you are doing well.
Thank you for your message and for sharing your valuable insights with us. We appreciate your feedback and will review it thoroughly to incorporate improvements in the next update of our BetterDocs plugin, no worries.
Your patience and cooperation are greatly appreciated.Hello dabeed,
Hope you are doing well.
I am glad to inform you that this override/font issue is resolved in our latest version of the BetterDocs plugin. Please update the BetterDocs plugin to the latest version 4.0.0 to get this issue resolved.
Please let us know the update after checking on your end.
Thank you.Hi Amit!
I just updated on two sites and notice that font-family for the <h1> now uses theme CSS (that’s great!). However, font-size, font-weight, line-height, and text-transform are still being overridden by BetterDocs CSS. For <p> BetterDocs is also still overriding font-size and line-height. And those are just the rules I’m noticing off-hand, there may be other overrides occurring.
I also can’t seem to find any setting similar to the one I shared provided by The Events Calendar. Something like that would be the optimal solution.
Also, I noticed when I updated to 4.0.0 it automatically changed the layout option from the Essence layout (which was what it was set to prior to the update) to the Classic layout. Is there a reason the layout selection is changed when updating the plugin?
- You must be logged in to reply to this topic.