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.

Changing the looks of...

sheepkidsheepkid New
edited November 2012 in Vanilla 2.0 - 2.8


I'm currently using vanilla 2 and im using the embed friendly theme.
I've been trying for hours to customize the buttons "Start a new discussion", "Go", "Login", "Register" etc. and I'm starting to get a little frustrated.
I want to be able edit the buttons and add som different features to them with CSS.

Am I blind, an idiot or a noob? You decide!
Anyway, I hope a kind soul out there is able to assist me.



  • Options
    whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    It might be best to clone the Embed Friendly theme folder, and make changes in the new version.

    Essentially then, you are creating a custom theme:

    Just make sure to edit the About.php so you can see your modified theme in the dashboard.

    Use Firebug in Firefox (or similar tools) to find out what css rules control the elements you are looking to affect.

    So, for example, Start a New Discussion is

    class="BigButton NewDiscussion" 

    You can edit the custom.css file in the design folder, either by changing an existing rule, or adding new ones.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited November 2012

    These are most of the buttons,

    a.BigButton.NewDiscussion,a.BigButton.NewConversation,a.BigButton,a.Button,.Button,a.Button.SignInPopup,a.Button.ApplyButton,input#Form_SignUp.Button,input#Form_Save.Button,input#Form_SaveComment.Button,a.Back,div.Meta span a.Category,input#Form_Share.Button,a.Cancel,a.TabLink,input#Form_Go.Button{
    background: #00FFCC !important;
      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFCC, endColorstr=#004269);
      background: -webkit-gradient(linear, left top, left bottom, from(#00FFCC), to(#004269)) !important;
      background: -moz-linear-gradient(top,  #00FFCC,  #004269) !important;
      color: #FFFFFF !important;
      border-radius: 0;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      text-shadow: 2px 2px 5px #000000;

    You can also decorate links which are not in the button class simply by applying the same properties in your css.

  • Options

    nice title for discussion topic :)

    I knew immediately what the thread was about or did I ? :).

    if only it could be edited.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

Sign In or Register to comment.