Blog Documentation Try Vanilla Cloud
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.
Options

How to change the "new discussion" button color + the menu color in Vanilla 2.8

xatanaelxatanael New
in Vanilla 2.0 - 2.8

Congrats for this wonderful release !

I just would like to know how I can change the color of the "start a new discussion" button.

I tried in CSSEdit with this code :

.BoxButtons

.Button.Primary:hover {

  background: #ef4126;

  border-color: #ef4126;

}

But it doesn't work, it only changes the color when I mouse over the button.

I also would like to change the color of the big blue DIV (the top menu). I tried to find the code with Web Inspector but found nothing.

Thanks for help 🙂

Comments

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

    Have a look at the CSS code which you have posted, and you should be able to work out why it only works on mouse over.

    I'm not being mean by not simply telling you, but hoping you will try to understand a bit of what is happening.

  • Options
    xatanaelxatanael New

    Ok, I was finally able to change the color with a lot of gropes 🤗

    Another question : how can I change the header color of the mobile theme? It's visibly not the same as the desktop version...

    I tried to inspect with Android, but you can't click on a separate element, you just view the entire code, so it's very tough to find the right line to edit...

    Thanks.

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    Here is what I would do: I would edit the config.php and set the (desktop-)theme to the same as the mobile theme is and then inspect it with the usual tools

  • Options
    xatanaelxatanael New

    Thank you but I try to set all the changes in CSSEdit mod. Is it the same way?

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    I think you can choose if the CSS should be applied to mobile theme, too, there is a setting below the editor input.


    There is a class in the body tag which helps designing for desktop/mobile (take a look at the body element with the web inspector tool of your browser):


    body.isDesktop h1 {
 color: green;
}

body.isMobile h1 {
 color: red;
}
  • Options
    xatanaelxatanael New

    Nice, thanks, I even didn't notice there is a button "enable on mobile theme"... 🙂

Sign In or Register to comment.