Im implementing a RTL version of my project. For that I already have dedicated css files that when imported to the main css file is doing the right job. The question is how to control from a button or toggle for the user to change the disposition ? Right now its only working when Im manually uncomment those specifics files, which is of course not an option for deployment. Thanks in advance for your help.
// RTL Mode
/* #import "./rtl/bootstrap-rtl";
#import "./rtl/components-rtl";
#import "./rtl/float-rtl";
#import "./rtl/general-rtl";
#import "./rtl/pages-rtl";
#import "./rtl/plugins-rtl";
#import "./rtl/spacing-rtl";
#import "./rtl/structure-rtl";
#import "./rtl/text-rtl";*/
body {
* {
outline: none;
}
}
Related
I would like to create bootstrap blocks based on bootstrap. For this I would write a custom plugin which registers the blocks in the backend.
Each block gets its own individual stylesheet as specified by WordPress documentation. However, in order to display correctly, the blocks still need a stylesheet with global settings such as the sizes for the header, settings regarding the border box and so on. Since I work with SASS, most of this is controlled by the reboot.scss file I import.
So I have two stylesheets: One for the individual block and one global.
The stylesheet for the individual block (block.scss):
#import "../assets/scss/variables";
.myblock {
padding: 120px 0;
color: $body-color;
.myblock__inner {
color: red;
}
}
The global styleheet (global.scss):
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
#import "../node_modules/bootstrap/scss/utilities";
#import "../node_modules/bootstrap/scss/utilities/api";
#import "../node_modules/bootstrap/scss/containers";
#import "../node_modules/bootstrap/scss/grid";
#import "../node_modules/bootstrap/scss/root";
#import "../node_modules/bootstrap/scss/reboot";
To see the correct preview of the blocks in the backend, I tried to include the global stylesheet via the hook enqueue_block_editor_assets:
add_action('enqueue_block_editor_assets', 'editor_style');
function editor_style() {
wp_enqueue_style('global', get_template_directory_uri() . '/assets/css/global.css',false,false,'all');
}
The problem now are the various global styles, which were defined by Bootstrap and destroy other blocks in the backend or make editing impossible.
Is there a way to make the global bootstrap styles work only for my blocks and not for all blocks and for the whole Gutenberg editor?
Try this
function cre8_add_editor_styles() {
add_theme_support('editor-styles');
add_editor_style([
'https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css',
'style.css'
]);
}
add_action('after_setup_theme', 'cre8_add_editor_styles');
Source: https://cre8.agency/blog/augmenting-the-wordpress-block-editor-with-bootstrap-utilities/
Is it possible to load property from class from different scss file? This side scss file is imported to main scss file. All properties are inherited, but margins, paddings, font styles not. Browser is not willing to load these properites. Are there any rules with extend?
Side scss file:
.section-headline {
font-size: em(30);
font-weight: 700;
line-height: auto;
color: $main-col-text;
margin-bottom: em(20);
}
Main scss file:
.i-headline {
#extend .section-headline;
}
In SASS you can declare classes in one file and import them into another without any problem, just make sure your import is done properly. And yes you can use #extend to access the rules of your imported selector.
Also try display: inline-block; and see if your margin/padding are working. Maybe you were trying to apply them to an inline element.
Does your em() function is imported somewhere ?
I found the problem. I have one scss file where are imported all scss sub-files. It looks like this:
#import 'gClass';
#import 'buttons';
#import 'general';
#import 'mixins';
#import 'typography';
#import 'pages/home';
In sub-file gClass is my class .section-headline. In pages/home is scss code with i-headline class. I tried to copy .section-headline to main scss file mentioned upper. In this case it works, but if i try to have .section-headline in gClass file, it doesnt.
<div class="column">
<button class="button is-primary has-tooltip-multiline" data-tooltip="Tooltip with a long Text. So we use has-tooltip-multiline modifier to force multiline display.">Multiline Tooltip</button>
</div>
Under _sass/main.scss:
#import "../node_modules/bulma/bulma";
#import "bulma/sass/utilities/_all.sass";
#import "bulma/sass/grid/columns.sass";
#import 'bulma';
#import '~bulma-tooltip';
I added the last two lines. Don't know if they are correct.
Also any suggestions for bulma-timeline..
I have installed it but don't know where to import for its functioning. Thanks in advance
If you want to use Bulma extensions, you can install the extension like that :
npm install bulma-tooltip
Then in the scss file where you import bulma you need to import the extension after the importation of Bulma.
For exemple, if your path to bulma is
#import "../node_modules/bulma/bulma.saas";
the bulma-tooltip package should be imported as below :
// Import the complete extension
#import '../node_modules/bulma-tooltip/src/sass/index.sass';
OR
// Import only what you need from the extension
#import '../node_modules/bulma-tooltip/src/sass/_animation.sass';
#import '../node_modules/bulma-tooltip/src/sass/_responsiveness.sass';
So the order in your scss file should be:
1) Customizing sass variables
2) Importing Bulma
3) Importing Bulma extensions
The order should be like below, you won't need to import full module
// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;
// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;
// Import only what you need from Bulma
#import "../node_modules/bulma/sass/utilities/_all.sass";
#import "../node_modules/bulma/sass/base/_all.sass";
#import "../node_modules/bulma/sass/elements/button.sass";
#import "../node_modules/bulma/sass/elements/container.sass";
#import "../node_modules/bulma/sass/elements/title.sass";
#import "../node_modules/bulma/sass/form/_all.sass";
#import "../node_modules/bulma/sass/components/navbar.sass";
#import "../node_modules/bulma/sass/layout/hero.sass";
#import "../node_modules/bulma/sass/layout/section.sass";
In my react app I'm trying to implement CSS modules to my project.
Here's my App.sass :
/*entry point for global styles*/
/*Include config files*/
#import "./style/utils/config"
#import "./style/utils/mixin"
// Font Icon
#import "./style/ionicons"
I just want to use my mixin in my css module as well.
Header.module.sass
#import "../../App"
.header
color: red
background: #000
.site-name
a
#include link
is there anyway to use mixin globally without using #import "../../App" on every css module file ?
I have a problem. I'm using vaadin inside liferay. I've successfully written a fully responsive (yeah, tables too) theme for vaadin, based on bootstrap. Now I'm importing it to liferay. Everything went fine 'till I needed to upgrade Liferay, where their new responsive theme is using same classes name as bootstrap, but with different behaviour (sad, very sad face).
The solution I've thought so far is to apply a class to the vaadin compiled css, like:
.daVaadinTheme {
#import bootstrap.css;
}
so the content will be compiled like:
.daVaadinTheme h1.insideTheFile{
}
.daVaadinTheme h2.insideTheFile{
}
But, as you may figured out, is not obviously working.
Do you have any solution?
Read carefully! This is NOT a duplicate of the answer you've posted. I'm trying to import a CSS file inside a CSS/SCSS class of another file, like the example I've written above. My problem is not to simply import a CSS file inside another one...
SOLUTION: (kudos to Mathias Jørgensen)
using #import from another scss file:
in test.scss:
.daVaadinTheme{
#import "bootstrap.scss";
}
Name your inner file with an underscore, and ending in scss. .Yes, even if it's plain css, i.e. foo.css → _foo.scss
Have an outer File like so:
#main .content { // if that's, where you want them to rule only
#import 'foo';
}
Reasons:
import only works with scss
underscore-files are glady skipped by sass (also as in gulp.src(<some wildcards).sass())
if you have no influence in your repo about the css filename whatsoever. or it's a major pain on upgrades, consider using a symbolic link under an .scss extension...
You need move your code into mixin:
// botstrap.scss
#mixin bootstrap {
h1.insideTheFile{
}
h2.insideTheFile{
}
}
Then, you can import normal:
// test.scss
#import "bootstrap"; // No extension
#include bootstrap; // The name of "mixin"
or with context:
// test.scss
#import "bootstrap"; // No extension
.daVaadinTheme {
#include bootstrap; // The name of "mixin"
}
If you want to add certain styles to a class using sass/scss I think what you're looking for is
.myClass { #import bootstrap.css; }