For the past two hours I've been trying to figure out a strange behavior when trying to override bootstrap in Django.
At the beginning, without any custom css file, the result was this:
Then I created a custom css file: my_site/css/master.css
.index-jumbotron {
background-color: #006DB0;
}
#main-title {
text-align: center;
color: white;
}
It resulted in this:
So far, so good.
But now, if I change anything on that same file (even when putting !important and taking good care of the specificity system), the result is always the same as the image immediately above.
However, when I indicate my template to point to another file my_site/css/master2.css or css/master.css, indeed the result is as I would have expected:
I can't get my head around this. Do you have any idea? Do you know if the package django-bootstrap3 could have anything to do with that? I installed it in between my two different version of the custom css file.
Looks like a browser caching issue - did you say 'disable cache' in the developer toolbar (network tab) of your browser? This is usually the easiest solution.
Another option is to open the styles file in your browser and hit 'ctrl+r' to force reload of the css file.
Related
While developing, despite live-reload and everything, I usually use DevTools to test the css code to apply.
Problem is, that the changes I apply are only temporary, and saving them directly to the original files with PostCSS and SASS is hard, add Angular2 and ShadowDom and I can't even find the css source file in the Source tab, figure saving in the original source scss file… Any way it would not be what I want, which is simply to log the changes I make, like for example:
p {
[…]
- font-size: 1rem;
+ font-size: 1.5rem;
[…]
}
li {
- color: #FFF;
+ color: #000;
}
Expecially thanks to the extremely annoying WebStorm's "feature" of automatically saving files every time you go out of its scope I can't tell how many times I found a solution in DevTools and then lost it when I forgot a single detail and I get mad trying to figure out what I did to manage to make it work. Also because the changes might have been applied to several elements, and I might forget to have changed one.
I tried to go through all the Chrome's extensions and I only find answers dated to 2012 suggesting to use DevTool's Source tab, that apparently doesn't even work with Angular2 and ShadowDom.
Anybody knows a solution?
I'm new at Drupal and I'm now administrating an existing site. There's a bug that the home slider asigns a size of 0x0 to its images, so only the pager is displayed.
When you open the website in another browser, it works fine.
What could be the problem? I googled it but non of the solutions I found work.
Thanks,
Brian
First, it's not Drupal related issue, but it's CSS related, so you tagged it wrong and probably googled about it wrong.
Problem can be in:
a) your theme (called "Porto")
b) slideshow module if you are using one
In any case you should (temporary) disable caching of CSS on page (admin menu) Configuration -> Development -> Performace
URL:
/admin/config/development/performance
Then find out what CSS causes this issue, find out what file you should change (user Firebug or some similar tool), change the CSS file, turn on CSS cache again, clear the cache (just in case).
So, Darko's solution can be correct, but definitely there is no point of changing cached CSS file since it will be re-generated in time and you'll loose your change, but it should be applied on correct file. Instead, as I said, disable cache, find the real CSS file, change it there and clear the cache.
Or, since you have access to all CSS files you don't even have to disable the cache, but just find and fix CSS in real file and clear the cache.
Let's say it is CSS related problem but it is not quite correct answer here.
You can see in different browsers different render outputs based on module settings. Issue is on this setting:
element.style {
height: 460px;
position: relative;
width: 930px;
}
element.style values are the values you set up in your module (in this case view_slideshow). In Firefox you get good output (code from above) but in google chrome you got just next code:
element.style {
position: relative;
}
It is a bug for sure and it is a module related because for some reason Google Chrome not read values which are set in module. First you should try to update your slideshow module on latest release. If you still have a problem you can easily fix it via changing CSS file.
#MilanG have a good point because once you clear the cache new CSS will be generated and you will have the same problem. I will try to explain what you should with little more details.
Go on admin/config/development/performance (if you are using drupal 7) and check out option Aggregate and compress CSS files. That will disable caching of CSS.
Open Firebug on your front page and find next line:
<div id="views_slideshow_cycle_teaser_section_carrusel_home- block"class="views-slideshow-cycle-main-frame views_slideshow_cycle_teaser_section" style="position: relative;">
If you use Firebug on Firefox you should find same line (but it is outputted different as you can see):
<div id="views_slideshow_cycle_teaser_section_carrusel_home-block" class="views-slideshow-cycle-main-frame views_slideshow_cycle_teaser_section" style="position: relative; width: 930px; height: 460px;">
Now you find which CSS is used on that line (it should be something like sites/all/themes/your_theme_name/css/views.css )
Find the right line in that CSS and change it like i showed you in my first post.
Clear the cache and now you go back on admin/config/development/performance and turn on caching.
Hope this helps.
You can fix this like this:
Go on sites/default/files/css
Open css_Ad8ea4Il0r-gy2oHf2eZpgamt3p0W3GurWCoZa6MhXU.css
Find this code in CSS:
#views_slideshow_cycle_teaser_section_carrusel_home-block{display:inline-block;}
Replace it with this code:
#views_slideshow_cycle_teaser_section_carrusel_home-block{display:inline-block;height:460px;width:930px;}
Save CSS
This is a pretty basic question but I can't figure out why I can't change the css from the tabs template in Meteor. https://github.com/meteortemplates/tabs
I've installed the template and I am trying to change the css from the "active" tab. When I do inspect element, I'm seeing that the css file it's using is a "template_tabs.css" instead of the one I have in my root directory. I have no idea where this file is. I did a search in all my directories and can't find it.
Shouldn't my main css file in the root directory override this? If not, how do I edit this template_tabs.css file?
It likely had to do with file load order: http://docs.meteor.com/#/full/structuringyourapp You want your custom CSS files to load after the package CSS files have loaded.
Alternatively, you could mark your CSS with !important e.g.
div.sample {
background: none;
width: 200px !important }
In this example width will be set to 200px no matter when the file loads. I am not quite sure how it deals with conflicts if the style was marked !important in multiple files with different values.
I think it would be best not to mess with the original package CSS as that will be overwritten when it updates.
My bootstrap stylesheet size is around 120kb.
But I'm only using 25% of that stylesheet code.
I don't want that span* class. I tried it by customizing it in bootstrap customize page.
I unchecked grid system, But I still see span1 - span12 class in forms, tables and responsive layouts.
Can someone help me to remove those codes?
After an hour of struggling with grunt, I decided to try uncss by itself, and it was much simpler. If you only have a few pages to do, or don't mind doing it manually, I'd recommend doing that.
The uncss page has full instructions, but to summarize:
Have node.js installed.
npm install -g uncss
Copy the sample file from the uncss page and name it anything with a .js extension. I named it uncss.js.
Replace the files array with your html files. (It looks like var files = ['my', 'array', 'of', 'HTML', 'files'])
Replace the stylesheets array with your stylesheets. (It looks like stylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css']). Likewise change the value of "csspath" if you need to.
Run node uncss.js (or whatever you called your uncss file).
It spits out the optimized CSS straight to the command line, so save it to a file with something like node uncss.js > mynewcss.css.
There are a bunch of options to tailor the behavior. I ignored all of them and it worked fine, but they're there if you want them. The page I tested it on went from 138kb to 9kb.
I got exactly the same problem!
I wrote a tool to remove all un-used css style rules in bootstrap.css
As a result, 59% rule has been removed, css file size reduced from 121KB to 59KB and increased about 5 score when testing with Google PageSpeed
The source code is here css-optimizer
Are you more concerned about the impact of the file size on the loading time for your users? Or want to make it easier for you to read/understand the CSS if it's shorter?
Either way, I suggest you don't spend too much time worrying about removing every single extra CSS style. Uncheck the elements of Bootstrap that you don't plan on using and download the customized version. For the live/production version of your site, use a minimized version of the CSS which will further reduce the file size.
If you just want to keep the code more simple for your use, that's definitely understandable but the Bootstrap team has done a great job of organizing it. Spend a little time with it.
Consider that trying to completely remove all span* references will remove functionality that you might use like controlling the width of form fields. These can be very useful, even if you're not using the grid.
I assume that twitter bootstrap heavily relies on those span* classes. When I only toggle the "table" checkbox under "Base CSS", I still get span* classes in the compiled css, because they are rendered anyway. Take a look at https://github.com/twitter/bootstrap/blob/master/less/tables.less:
// R.185: Change the column widths to account for td/th padding
.table td,
.table th {
&.span1 { .tableColumns(1); }
&.span2 { .tableColumns(2); }
&.span3 { .tableColumns(3); }
&.span4 { .tableColumns(4); }
&.span5 { .tableColumns(5); }
&.span6 { .tableColumns(6); }
&.span7 { .tableColumns(7); }
&.span8 { .tableColumns(8); }
&.span9 { .tableColumns(9); }
&.span10 { .tableColumns(10); }
&.span11 { .tableColumns(11); }
&.span12 { .tableColumns(12); }
}
So I'm afraid you should cannot remove them with the customizer, only manually.
I have a template using Bootstrap 2, which is the required system for Joomla. I just did this manually and found it easy to do. The Bootstrap CSS file is very nicely constructed and well ordered in sections. I removed the entire contents of the file to bootstrap_unused.css and then also copied that to bootstrap_original.css.
I then cut out from bootstrap_unused.css what I knew was in use, being careful to preserve the order, and pasted it back in. Most of it worked first time and reduced the file size from 144KB to 14KB. I then needed to add some bits and pieces back in for forms etc. and ended up at 30KB.
If I need any other features in the future, I can pull them back in from bootstrap_unused.css and I always have bootstrap_original.css for reference.
Cakephp is giving me some problems as I have set as below (I have tried any number of urls, through localhost, placing it in webroot and giving reference from that file, giving full route from localhost (this is a local test ubuntu machine, not a 3rd party server), etc, etc but it just doesn't show up.. I am using a custom layout that overrides the default layout and, as far as I can tell, it contains no reference to any sort of background image.. here is from my css file:
body {
background-image: url('http://localhost/site1/app/webroot/img/bg1.jpg');
font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
font-size:90%;
}
I have tested that this works fine with a regular HTML file, I am hoping someone has an idea of what cake is up to that is giving me this problem.. thanks
EDIT: I have tested and I can display exactly the same image within a DIV (as its background) from the same css file.. something in Cakephp is overriding the body background-image setting, but I can't figure out what.
Place images in webroot/img
Place CSS in webroot/css
Write relative paths to references images in CSS styles:
background: url('../img/imagename.png');
You spelling for background is wrong:
ackground-image: url('/root/Desktop/bg1.jpg');
If that is not the case in your actual code, make sure that you are specifying the correct path, try adding a dot before /root/
background-image: url('./root/Desktop/bg1.jpg');