HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

[2021.009] where is lavender theme files please?

Hi,

I just installed the opensource version of vanilla forum on my server and I really like the dark Lavender Theme generally. I just would like to change the purple color of header and New Discussion Button to red.

I could not find a folder named Lavender under ../forum/themes/ so I can not edit any css or json files for this theme. I can not change the background color by using CSS Editor plugin, I just doesnt change anything I tried.

I couldnt also do a theme on my own because I dont have the foundation theme as mentioned here https://success.vanillaforums.com/kb/articles/168-theming-quickstart

I tried to get into this simple task for a couple of days now, please help!

Comments

  • KasparKaspar Moderator

    PM me a link to the forum, I will take a look.

  • KasparKaspar Moderator
    .vanilla-11p5yzj-titleBar-overlay {
        background-color: brown;
    }
    .footer {
        background: brown;
        color: grey;
    }
    
    
    .BoxButtons .Button.Primary, .groupToolbar .Button.Primary {
        background: brown;
        border: 1px solid brown;
        
    }
    .ButtonGroup.Multi .Button.Handle, .ButtonGroup.Multi.Open .Button.Handle {
        background-color: brown;
        border-color: brown;
    }
    .BoxButtons .Button.Primary:hover {
        background: brown;
        border-color: brown;
        opacity: 90%;
    }
    

    Try this ^^ via https://open.vanillaforums.com/addon/cssedit-plugin

    (CSS for buttons was made here on Vanilla Forum, as I am not logged in on your forum - but they should follow the same standard)


    You may need to use !important to proper override, an example of that:

    .vanilla-11p5yzj-titleBar-overlay {
        background-color: brown!important;
    }
    


  • tyvm, will try and let you know tomorrow i am currently working on another project sorry for the delay and thanks again will get on this soon!

  • OK I just had some time left and had a quick try: It works, thx again for this one. So 2 questions left:

    1: How did you get the IDs like .vanilla-11p5yzj-titleBar-overlay or .ButtonGroup.Multi to define in CSSEditor what to edit?

    2: I miss the footer change, is it even allowed? I dont want to breach any copyright protections obv so if its not allowed to change I wont

  • I see the second edit called .footer but its stays white with grey fonts

  • KasparKaspar Moderator
    edited February 2022

    Try

    .footer, .Footer, footer.footer{
    background:black!important;
    background-color:black!important;
    color: grey;
    }
    


    There is styles in index at line 547




    You can figure out class and id names via your browser web tools / inspector tool, F12 to open in many browsers

  • KasparKaspar Moderator

    While overrides, not changing core files, is the right way - you could try directly in the .css file

    https://github.com/vanilla/vanilla/blob/72ff658dee9af51d1a2ab392c118463e63419100/addons/themes/lavendermoon/assets/styles.css#L8

  • i tried your last suggestion and also tried this:


    .footer {

     background: #000000;

     color: #000000;

     font-size: 14px;

     line-height: 1.5;

     padding: 18px 0;

    }


    .footer a {

     color: #000000;

    }

    .footer a:hover {

     color: #000000;

    }


    no success, footer banner stays white-ish no matter what i do. original footer background: #f5f5f6 even seems to be the color i want to change but the website is not impressed at all when changing with csseditor. unsure if i should switch this in css files, I ofund those btw: they are stored in /addons/themes not in /themes


    any last tips before I try to modify the cores?

Sign In or Register to comment.