Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Bootstrap custom.css

piotrpiotr New
edited June 2015 in Vanilla 2.0 - 2.8


I'd like to make some small adjustments to the Bootstrap theme. I know editing custom.css is the proper way to do this. I have tried various things but the changes I make don't seem to be picked up. For instance I like to change the height of this element (see screenshot), what would I have to add to the custom.css ?


  • just add .Reactions { height: 30px; } or whatever your height is :)

  • @CrazyLemon said:
    just add .Reactions { height: 30px; } or whatever your height is :)

    That is what I've tried but it has no effect.

  • edited June 2015

    Well thats for height. You sure you want height and not font-size? :) If you want bigger icons its not about height but .ReactSprite { font-size: 15px; } or whatever the size you want :)

  • piotrpiotr New
    edited June 2015

    edit: sorry, I need to use "margin:". Not a CSS expert :)

    I want more space between the message and the buttons (Quote, FB, Twitter etc)

  • Then you dont want height or font-size you want padding .. I also suggest learning basics of CSS otherwise this is going to be a long journey =)
    So remove all the previous changes and do .Reactions { padding-top: 10px; }

  • R_JR_J Ex-Fanboy Munich Admin

    @piotr said:

    I know editing custom.css is the proper way to do this.

    Not exactly. If kasper will release an updated version, it will overwrite the file and your changes are gone.

    You have several options, here are the two that make the most sense to me:

    1. Use the CSSEdit plugin and make your changes in an editor in the dashboard. In my opinion, that's the best alternative.
    2. Create a file like "mycustom.css" and simply add @import url('/wherever/mycustom.css'); to the end of custom.css. If the themes css file will be overwritten with a new version, you only have to append the import command at the end of the css file to get your changes back. Not as elegant, but if you switch your theme one day from Bootstrap to another, the css commands in CSSEdit will also apply to the new theme which may not be a desired side effect.
  • You may have to add the !important rule to your CSS properties since the custom.css file gets loaded up before the Bootswatch themes, so your custom rules may get overridden, IIRC.

    Add Pages to Vanilla with the Basic Pages app

Sign In or Register to comment.