[2021.009] where is lavender theme files please?

fk1

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!

Kaspar

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

Kaspar

.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;
}

fk1

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!

fk1

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

fk1

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

Kaspar

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

Kaspar

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

fk1

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?