So, I am working on a drupal 9 based website, and developing a bootstrap 5 based subtheme.
I have more categories, so I want to implement some more colours, and merge it (with map merge) with the bootstrap basic colour palette (primary, secondary, danger, success etc)
But in the generated subtheme style.scss file there is no #import bootstrap function, only #import bootstrap variables (amongst others)
So the map merge just refusing to work.
At this point I am out of ideas. Hit me up with any thought you have.
Cheers!
I tried to copy paste the OG bootstrap functions file to the subtheme folder and link it: Nothing Tried to link it back to the og bootstrap5 folder: nothing.
yes in all generated bootstrap 5 subthemes, in style.scss the functions are missing when I used this website
Related
I recently started using Drupal for a new website I am trying to build. Front-end is normally what I focus on and I'd use external services to integrate backend functions. In this (and potentially from now on) I want to start using Drupal. Now, I have installed a bootstrap module and want to start adding own css from there but I can't seem to figure out how/where. I can't do it straight into the bootstrap style files so I - apparently - need to create my own theme and place css files in there. This is what I have done so far:
1: Have my css file with the code.
2: Created a new folder next to the bootstrap folder in sites/all/themes.
3: Put the css file in there.
4: Created an my_theme.info file.
But it is not resulting in any changes on the website (it also does not show up in the source code) most likely because it is not being called by Drupal. How can I make sure Drupal calls my css code?
Thanks in advance and take care!
Assuming this is DRUPAL 7 (Drupal 8 uses yaml)
Create a subtheme of the theme you choose.
In the YOURTHEME.info you add a line like stylesheets[all][] = css/style.css
In YOURTHEME/css directory, here you can start writing your css rules in the file style.css
Make sure caching is off or else you will not see your css being updated.
I am building an app with theming requirements that can only be determined at run time. At build time it is possible to have theme variables available for all themes.
Is it possible to get webpack to build node modules - in this case bootstrap - with different variables file? I guess at build time I would want it to build multiple versions/themes of bootstrap. Then at run time I could reference the correct css file based on some prefix.
e.g.
theme1.bootstrap.css
theme2.bootstrap.css
theme3.bootstrap.css
I am using bootstrap 4, with webpack 2.
Is possible with webpack and how can I achieve this?
Definitely. I'm assuming you are determining the themes based on a user profile type system. Take a look at below and add an if statement to look for the variable in sql then simply apply the css. simple. Try creating it and if you run into trouble post the code you have on here and i'm sure someone can help. Add stylesheet to Head using javascript in body script-in-body. also if you aren't using already bootstrap allows for theme file so you can keep the overall style loading and simply apply the color scheme you want so that you only need to load the bulkier script once.
You can use the webpack plugin themes-switch, put all your theme files in a directory, the plugin would compile themes to individual files. Then use function changeTheme to switch themes at runtime.
https://github.com/terence55/themes-switch
I am now taking care of a website built on Zurb Foundation, the previous developer made some custom icons (like 15) for that website using the foundation syntax - He took the i tag in all CSS files and renamed the CSS variables like .icons-custom-phone .The foundation-icons.css is added to the page and all the font files are on the server but when i try to name a class="fi-phone" it won't show... as he added a custom.css just after the foundation-icons.css and created custom.svg custom.eot custom.woff etc.
I was wondering how can use the foundation icons in that case since some are really nice
Thanks for your help
I am trying to include Zurb Icon Fonts 3 into my Moovweb project. First off, is it supported? Second, what do I have to do to get them to work. I have tried a few different combinations of importing them, but each time it brings up a blank local host page.
Thank you in advance.
One way to do this is to create a fonts folder under the assets/images folder where you would place the foundation fonts.
Then you would include the foundation-icons.scss file in the stylesheets folder, but rename it so it's a partial: _foundation-icons.scss
Edit the references in _foundation-icons.scss so they point to image-url("fonts/foundation-icons.ttf"), etc.
Then you can #import "_foundation-icons.scss"; so the styles get compiled in your main stylesheet.
So I'm using the Bootstrap Customize and Download page to generate a version of the Bootstrap files with custom colors. I got the idea that I wanted to add some other colors (e.g. #purpleLight) to make upkeep of the site design easier, so I look through the downloaded contents the site generates, and my customizations don't appear to be anywhere, let alone somewhere for me to add others.
Here's what comes in the bootstrap.zip the site spits out:
css
bootstrap.css
bootstrap.min.css
img
glyphicons-halflings.png
glyphicons-halflings-white.png
js
bootstrap.js
bootstrap.min.js
...and that's it.
So, no colors anywhere in these files as far as I can tell. No LESS files included in the download. Am I doing something wrong? Is the site doing something wrong? Am I just not seeing something that is in fact there? To the best of my diffing abilities, the downloads seem identical regardless of the customization options I choose...
And, pending whose messing up here, what would be the alternative best way for me to customize a color palette for my Bootstrap site?
You can't add more LESS variables with the custom download tool. You can only redefine the values of the existing variables. Upon download, the tool compiles with those set variables but since you don't get the LESS files, you won't be able to add more variables afterwards, like #purpleLight you mentioned.
If you want to extend Bootstrap with more LESS variables, you have to download the full source and compile your css from the included LESS files. There's a file variables.less in the less/ folder where can add your #purpleLight.