I want to create a theme very closely based on the default (valo) theme but with a few extra CSS rules.
I am following the basic instructions here
I have my own CSS under VAADIN/themes/mytheme/styles.css
I have the annotation #Theme("mytheme") on my UI class
The css file contains:
#import "../valo/styles.css";
.my-additional-styles {...}
The rendered page picks up my additional styles OK but none of the valo style are applied at all. Looks like the #import is not working.
When I check the validity of the valo/styles.css URL in the browser, the correct css is retrieved.
What I am doing wrong?
Related
I'm trying to get my custom css to take priority over conflicting style properties in the theme.
What I think I know
My custom CSS files are loading: If I remove everything else from the "head" section, my custom CSS is implemented.
My custom CSS properties are being overwritten: As the page loads, for just a split-second I see the page with my custom CSS implemented, before it gets overwritten.
Something in the wp_head() function in the "head" tag (this is most of the section) is causing it: If I remove wp_head() my custom CSS loads (but everything else is broken).
What I've Tried
Sample WP_enqueue code I found online
Manually adding my custom CSS file to the end of the "head" section so it loads last
The plugin Real Simple CSS that claims to give your custom CSS priority
The "Additional CSS" feature in Wordpress that is intended to give that custom CSS priority
All of these solutions "work" in that the custom CSS is loaded near/at the very end of the "head" section and should therefore take priority. Despite being the very last CSS loaded, it's still being overwritten.
The page in question
https://kingatlaw.attorney/courses/simple-uncontested-divorce-in-north-carolina/
Right now, my custom CSS makes the text on the tabs 100+ pixels large for testing purposes.
It's a question of "specificity". If I'm understanding this correctly, you're attempting to override a body text style (body .stm_lms_course__content) with the .active class applied to the parent div containing the body text. Because the theme's own style for body .stm_lms_course__content has more specificity, it's being applied over your own addition. In this instance, even applying !important won't help you unfortunately. You will have better luck to applying your custom styling to the exact classes set in the original theme. If you're using the Chrome browser, you can see the exact classes applying which styles using the 'Inspect' feature when right-clicking an on-page element.
Unfortunately, a lot of "off-the-shelf" WordPress themes do have some very specific styling which makes it difficult to overwrite (especially if paired with WYSIWYG editors like Elementor or WPBakery)
Problem
I want to integrate angular material scss, but scope and isolate it to only apply its styles to my application. I need this, because my angular application will be embedded in a big monolith. Therefore, we need to prefix our applications scss and have it scoped as it could style other parts of the application. The problem is, that if somebody uses the same class names like angular material does, the styles will win by specificity and this is uncontrollable and will lead to bugs.
Our Idea
The styles should be isolated/scoped to just be applied to our <my-app></my-app> tag by prefixing all selectors automatically.
Generated styles should look like this:
my-app .mat-button {}
Current Attempt
Our current attempt is to include it where we need it. It looks like the following:
styles.scss
#import "~#angular/material/theming";
my-app {
#include mat-core();
#import "~#angular/material/prebuilt-themes/deeppurple-amber";
}
The Problem with this solution is, that the scoping is applied to some classes, but not to all.
Demo/Showcase
I created a demo on stackblitz as showcase.
You can see the problem in the in the following screenshot:
Is there another option to have angular material styles isolated/scoped?
The styles applied are still within the project.. If you want some app-wide styles that should not be in the top-level styles.scss, put them in app.component.scss and make sure that all other components are children of app.component.ts. Angular scopes (s)css files to its related component by default.
We are working on an MVP in vue.js and we decided to use bootstrap to have the element styled in a consistent way.
Now we are starting to add the skin/theme to our single-page app, and we found an issue with the css rendered on the page.
We successfully managed to override the styles by using higher specificity css selectors, but we would like to optimise the output code rendered in the browser by removing the unused "base" bootstrap css code.
The question:
How can we setup our environment to make the bootstrap sass code to output clean and non-redundant css code?
Details:
Bootstrap loads its own _buttons.scss file
We are loading our own "theme" _buttons.scss file after bootstrap's one and we managed to have our css with higher specificity.
We run the sass code compiler (on node-sass)
The output css contains BOTH the bootstrap style and our own themed style for the buttons.
(As an example, see the following screenshot)
As you can see our own button style is applied as intended but we still carry over the bootstrap original style.
We would like to have OUR STYLE ONLY rendered in the browser.
Update:
The UI I'm working on uses some classes straight from bootstrap, and obviously some classes specific of our own app.
Sometimes these classes are necessary to override the bootstrap default styles.
We need to override not only the colours (which are customisable through the _variables.scss), but also some other css attributes.
We find ourselves struggling with duplicated css code rendered in the browser, where there is our own style applied and also the default bootstrap generated style which will never be applied as it's low in specificity.
I wonder if there is a way to avoid to compile sass code that doesn't need to be rendered in the browser, and at the same time avoid to "touch" the bootstrap code in ./node_modules/.
Here's how you override Bootstrap (4.x) defaults.
Examine the source
First, look inside bootstrap.scss where you can see how the framework is built, component by component. You could, if you like, comment out optional components you don't need, to downsize Boostrap. But don't do that right now.
Next, look inside _variables.scss. Skim through this file and it should be clear that all customisable Bootstrap styles are defined here, including colors. Thus you can have your custom colors apply not just for buttons but throughout the whole framework. Again, you could start changing the variables you want here right now... but don't, for there is a Best Practice.
Create customisation file
Instead of editing the original source, create a new source file we'll call myproject.scss, somewhere other than the Bootstrap source folder. By keeping all changes separate, we make any future Bootstrap upgrades easy.
Add variable overrides
Now you can start copying variables you want to change. Note that variables in _variables.scss have the !default flag, which means they can be overridden elsewhere. For example if you want a different secondary color, you'll find it defined as $secondary, and so add it to myproject.scss with a new value:
$secondary: #dd5679;
Add as many variable overrides as you want.
Import Bootstrap
After that, import Bootstrap into the file. EITHER take bootstrap.scss wholesale:
#import "relative/path/to/bootstrap/bootstrap";
OR copy-paste the contents of bootstrap.scss, update the pathnames, and comment out the components you don't want:
#import "relative/path/to/bootstrap/functions";
#import "relative/path/to/bootstrap/variables";
#import "relative/path/to/bootstrap/mixins";
...
// #import "relative/path/to/bootstrap/popover";
// #import "relative/path/to/bootstrap/carousel";
#import "relative/path/to/bootstrap/utilities";
#import "relative/path/to/bootstrap/print";
The first 3 imports, "functions", "variables" and "mixins" are core and not optional components; don't exclude them.
Add project styles
After that, add your own styles. If you have a significant amount, organise them into their own partial files e.g. _mybuttons.scss (start names of partial files with an underscore), and import them.
#import "mybuttons";
Your custom Bootstrap source file is now ready.
Compile to CSS
The resulting myproject.css file is what you want to load instead of the original Bootstrap CSS file.
I downloaded a free HTML theme named dashgum from the internet. I'm implementing it for an Angular2 application using angular-cli. I converted the css files to .scss and pasted the code to the angular application. I then imported the files in the global styles file named styles.scss to apply the styles to the application like this:
#import url('./scss/bootstrap.scss');
#import url('./scss/font-awesome/css/font-awesome.scss');
#import url('./scss/zabuto_calender.scss');
#import url('./scss/gritter/css/jquery.gritter.scss');
#import url('./scss/lineicons/style.scss');
#import url('./scss/style.scss');
#import url('./scss/style-responsive.scss');
The problem that I'm facing during debugging is that all the styles appear as embedded styles in the browser like this (notice the style tag):
I want the style to appear as external styles while inspecting like in the theme. Please notice it in the following screenshot:
These are the default settings in Angular 2 as I made no apparent changes for the styles to appear embedded when inspecting. Is there any known way to change the settings in Angular 2 for the styles to appear as external styles when inspecting? The embedded styles make it harder for me to debug. Any help pointing out towards the solution would be appreciated.
My first advice (like official Angular CLI documentation says) is to put your global library inside .angular-cli.json like this:
...
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"styles.scss"
],
...
Then just run the app with the --extract-css parameter to see in the browser inspector the source files:
ng serve --extract-css
And you will have this:
I have learned that the styles imported in the global styles.scss file always appears embedded when inspecting in the browser. If we want the css to appear as external styles, we will have to use it in components.
Edit:
See toioski's answer above.
I am building a module in Bootstrap for Joomla. It has its own stylesheet, but the activated template (where I test it in) also uses Bootstrap and classes which adds some CSS to my module (tables, buttons, etc.).
I want my module to look the same in all different templates of Joomla. Is there a way of disabling the CSS of the template for my module so it just looks same on every template? Or do I have to declare every single line in CSS (with !important, because I think that's a lot of work?)
The CSS is rendered within an HTML document, so you can't just "disable" it on a piece of the page (which is your module).
One possible approach is to render your module inside an <iframe> so it would be a separate document into the main HTML document. But I'm not sure if this would be good/recommended, so I would rather rewrite my CSS rules so they all are inherited from my module.
For example: if your module is the "Fancy Contact Module", you can use an wrapper div like <div class="fancy-contact-module"> and write all your CSS rules like:
.fancy-contact-module p {
color: green;
}
.fancy-contact-module a {
text-decoration: none;
}
and so on.
You can also use your wrapper div to apply Reset CSS or Normalize CSS (or any other similar tool), so you won't need to override all CSS rules manually. You can see more about Reset and Normalize here: What is the difference between Normalize.css and Reset CSS?