2

I've download the latest release of the original Bootstrap theme for Drupal 7, and Installed it, and yet it is unclear to me where could I change it's css?

I need to RTLize the template, i.e make it RTL instead of the default LTR, and for this I need to flip some properties in the template's Style.css file (or whatever main css file) of this template as I did in the past with almost any other template...

I tired to search a bit in the theme's folder and just couldn't find such file... The following image display my navigation (at least the most logical part of it):

enter image description here

3

Bootstrap for Drupal 7 requires a lot more setting up than ordinary themes. Make sure you read and follow the instructions about installing and sub-theming Bootstrap.

If you intend to change the CSS, it is strongly recommended that you create a sub-theme with all the Bootstrap 3 source files. This method is the most dynamic and will grant you the ability to change the variables and utilize the mixins provided by Bootstrap. It entails downloading and extracting the latest Bootstrap source into your sub-theme and place it in a folder named boostrap. Note that you will need to uncomment the lines under "METHOD 1: Bootstrap Source" in your sub-theme's .info-file if you want to use this method for sub-theming.

If you've done all this correctly, the folder structure of your sub-theme (here called my_bootstrap) should look like this:

enter image description here

Bootstrap CSS is generated by means of the CSS preprocessor less, so you do not edit the CSS directly. Instead look up the file my_bootstrap/less/overrides.less. You add your CSS overrides to this file. Then, to make your overrides effective, you can compile the file less/style.less (which includes overrides.less) to CSS with this CLI command (provided you're in the my_bootstrap root directory).

lessc less/style.less > css/style.css

If you want a simpler, but less flexible method, you may use a Bootstrap CDN. It utilizes CDN Bootstrap via the base theme, but will still allow you to override the existing CSS styling in the sub-theme.

If you choose the CDN method, to override the default Bootstrap base theme settings, you copy the settings you want to change from the base theme into the sub-theme's .info-file. To override CSS, you edit the provided css/style.css with your own overrides.

As always, after changing the CSS, remember to clear the cache to make your changes effective.

  • 1
    To add to this answer I would recommend looking into maybe using something like: github.com/morteza/bootstrap-rtl that would just involve including another CSS file that adds RTL support to Bootstrap. – burnsjeremy May 24 '15 at 6:33
  • Hello @burnsjeremy, I've tried to read his article but it seems the author phrased it mainly for programmers and I've yet to learn programming... I you would like to right a "practical translation" for this article, you are more than invited to do so... This article was the only one I found at the web in this context. – JohnDoea May 25 '15 at 7:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.