So I've tried to load the css on to my page, but with no luck. I used this approach https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme I am using a sub theme of bootstrap and have this in my
.libraries.yml:
global-styling:
css:
theme:
css/style.css: {}
and try to change css in style.css but doesn't work.
My .info.yml has:
libraries:
- 'SUBTHEME/global-styling'
You should rewrite the'SUBTHEME' word to your theme name. If yout theme name is bootstapsubtheme, you sould write
libraries:
- 'bootstrapsubtheme/global-styling'
Be careful, there is this "SUBTHEME" text in other files, that you sould rewrite to your themename.
And yes, like as they wrote above, you sould switch off the aggregate css and js files in the configuration-> development -> performance menu or clear all cache.
Figured it out. I had to go to admin > configuration > Development > Performance and uncheck "Aggregate CSS files".
I'd also recommend setting up theme debugging on your local environment: https://www.chapterthree.com/blog/drupal-8-theming-setting-up-theme-debugging (I'm not affiliated with them, just use it all the time).
Related
I need to edit class .col-lg-8 on my website
Here is what I am trying to locate
And
Here is what my FTP looks like when trying to locate the less folder
Due to this I'm assuming I can just find the class in the bootstrap.css file? I have found and edited the required class in this stylesheet but no change on my website. The cache takes a while so veryifying here in the meantime.
Fyi I'm using Joomla.
Thanks
You must disable the less in your template to do this go to : Extensions > Templates > styles and should click on active template in theme panel , There is probably an option to disable the less
When I enable smart cache for css, prestashop frontend will be messed up totally, like only using some of the css.
However, I can see there is all my custom css rules, also blocks and modules in that same file, but I can't understand why it messes it up so bad. Basically its just html dumped together with float effects when I enable it.
It it better to look for other css compiler/minifier and not to use prestashop one? is this general issue ?
Site works perfectly fine after I disable it again...
Using prestashop 1.6.1.6
Any idea how to debug ?
This is not a general issue, this must be happening because of the custom theme that you are using on your store.
You can try removing the theme specific cache from the following directory:
/themes/YOUR_THEME/cache/
You may refer to the following link as well if you have upgraded from 1.6.1.4 to 1.6.1.5 recently.
https://www.prestashop.com/forums/topic/520452-update-from-1614-to-1615/page-2
i want to make some changes into my wordpress css file. i downloaded the style.css and other css file via ftp and made all the changes into the codes i wanted to. I uploaded the files and replace it with the other files. I waited for some time to take it affect but nothing happened, i left it and open my site the other day but the things were still same, no changes. I was using the WP Minify cache plugin. I even deleted it and re upload the css files again but still no changes. I tried out so many things but no success.
I than changed the name of the theme main directory via ftp, it help me a bit and made me happy for awhile, all the changes appeared. I again needed some changes in css files but unfortunately again suffering the same process. Please help :(
P.S. No theme is taking the effects of modifications in the css files codes. i tried different themes, but same results. Even if i delete the style.css nothing happened, but when i delete the entire directory of that theme then blank white page appear on my website.
It doesn't sound like you activated the new theme from your administration panel.
http://codex.wordpress.org/Themes#Selecting_the_Active_Theme
When using any cache plugins you should delete its cache when you do any changes to the website. Have you already done that?
Are there any other css files being loaded after style.css that may alter what you are trying to change?
It's generally not a good idea to edit the themes style.css directly b/c when you upgrade that theme you will lose all of your customizations.
Doesn't your theme have some place for custom CSS? Some themes have it in Appearance >> Theme Options, or something of that nature. What theme is it? Do you have a framework, or child themes? More info needed ... but every theme has a spot for custom css; as was mentioned, it's not best practice to make your modifications in the actual main theme stylesheet, due to updates, etc. ... and anything in the custom css section overrides the default theme stylesheet.
How do I use Wordpress together with Twitter Bootstrap? I know how to set up a Wordpress page and I've already worked with Bootstrap, but now I want to use these two together for the first time.
For my Wordpress projects I normally just installed Wordpress and started from scratch with creating a new theme. For my Bootstrap projects I always used Initializr to build a template.
Now using Google I found various "Bootstrap themes" and plugins , do I need one of those? I want to customize the bootstrap look with my own colors etc. using LESS, that's why I am asking. I am just having trouble to understand how these two will work together and I haven't found any good resource for it.
There will be a few ways to tackle this, but here's what I've been doing...
Take a copy of your favorite starting point theme
Download the full bootstrap repo (less and everything) and pop it into your theme folder.
Create a folder called 'css' inside the bootstrap folder and set this as your location to output your compiled 'bootstrap.css' file.
Then up in the theme root, open 'styles.css', change the theme name etc as you would if you were creating a new theme, delete all the styles and add just one line of code #import url("bootstrap/css/bootstrap.css");
You should now be able to select this new theme from your 'appearances' menu in 'wp-admin'.
It'll obviously look horrific, but once you add a few of your theme classes/IDs into 'layout.less'. Then run through 'variables.less' to add you base theme you'll be getting somewhere.
Other than that you'll have to go through each template file and consider all the classes/IDs, sometimes edit the theme to make better use of existing bootstrap classes, but other times you'll need to add you're own custom classes to bootstrap.
It's quite time consuming, but once its done it can obviously be re-used to speed up future projects.
Incidentally, I've also been building a theme using this same principle but based on http://stuffandnonsense.co.uk/projects/320andup/ both great projects. I'd recommend seeing which best suits you.
You could always us the Twitter Bootstrap WordPress plugin. It's completely free on WordPress.org here: http://wordpress.org/extend/plugins/wordpress-bootstrap-css/
There's also lots of shortcodes included so you can include Bootstrap elements within your pages and post - there's a demo page of it all here: http://worpit.com/wordpress-twitter-bootstrap-css-plugin-home/wordpress-shortcodes-demo/
Hope that helps you get started!
I answered the same question before here at stackoverflow. I feel like it's kind of late sharing but for those who are looking for such tutorial just click the hyperlinked title given: Using Twitter Bootstrap in Wordpress.
There is a quick way to do it, using composer in your theme:
composer.json
{
"config": {
"component-dir": "lib/composer",
"vendor-dir": "lib/composer",
"bin-dir" : "bin/composer",
"cache-dir" : "var/cache/composer"
},
"require": {
"twitter/bootstrap": "3"
}
}
Note: I removed the other composer's section and requirements and phing integration to reduce complexity.
Execute
composer install
And then in your theme, add /lib/composer/twitter/bootstrap/dist/css/bootstrap.css with this sentences
$bootUri = get_template_directory_uri() . '/lib/composer/twitter/bootstrap/dist/css/bootstrap.css';
wp_enqueue_style('sindy_bootstrap', $bootsUri);
et voilà! :)
I'm running into a bit of a problem with my search plugin CSS. It doesn't apply some of the CSS rules I placed on /plugin/searchable/webroot/css/searchable_style. I think it is being overridden by the cakephp default CSS which I used with my application. Should I edit the generic css for my application or there's a way to bypass the generic CSS then apply what's on /plugin/searchable/webroot/css/searchable_style? I also tried
css('/searchable/css/searchable_style'); ?>
and put it on every view and it worked but not all.
Thank you,
Lyman
Place your css file *searchable_style* to webroot/css folder: then use it in app/views/layouts/default.ctp (if you have) OR include this line to your home or landing layout
echo $this->Html->css('/searchable/css/searchable_style');
This will definitely work. but if you rename the plugins folder to plugin as your question, then it will cause problem. Please check all folder naming and retry.