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.
edit theme ?
Queth
New
Am I missing something? in the tutorial is an extended explanation on how to change HTML/CSS in the theme.
However I can't find that option in my dashboard anywhere. Is this only for hosted vanilla forums?
or has something changed?
I just want to do some tweaks to a theme, not create a new one. How can I edit a theme?
0
Comments
CSSEdit and HTMLEdit
Vanilla Cloud has some different internal addons for customizing themes through the dashboard. Those are the ones you can see in the documentation.
The ones @Kaspar is linking here are some similar addons maintained by the open source community.
Thank you! i guessed it was for cloud hosted only...
imagine all the selling points that got me to try vanilla are things that aren't default in the open source forum ;)
i wish I was rich enough to afford the cloud based one but that's far beyond my reach atm.
anyhow, the css editor just gives an empty screen. HTML editor shows fine.
but I have found the files in the theme directory too so I can just edit in there too I guess. Nevertheless this is very handy to do on the fly things when it's installed on my server :)
NO. NO. NO!
Do not edit core file unless you have absolutely no alternative (and here you have lots.)
Updates are likely to overwrite your files, so that you have to redo the changes each time.
Not sure what you mean by CSS editor gives an empty screen.
If you see this:
you are seeing what is expected.
It is a blank canvas for you to add CSS rules to. Then you can either preview the changes or save them (options at bottom of page.)
If it isn't working for you, then you should create your own theme. This is far, far easier than it sounds, and a much, much better way to go than editing core files.
Custom themes are NOT over-written by updates.
ah thanks for the heads up. I could almost hear that shout ;).
CSS i expected to see the master CSS or similar so I can edit colors/backgrounds etc.
when it's empty I do not know what to reference. Or do I just grab the ID's from the HTML and add some style and that is then overruled?
to create own theme, i need to do it with boilerplate right? that's a learning curve I have to take... (eg follow the instructions on that page and hope that I get it to work).
or is there another way?
As a quick start, copy the css from the theme (you alresdy found it) paste it in cssedit.
Customize away.
Or just add the elements you want to customize.
Take a look at css / theme related posts here
https://open.vanillaforums.com/discussion/comment/218921/#Comment_218921
Generally, people use a web inspector to see what rules are being applied to an element.
You can create your own theme by cloning an existing theme and editing the addon.json file to reflect your new name.
Then you can edit the custom.css file to your heart's content.
I've attached an annotated css stylesheet I did for 2.3, using the old default theme as a basis, so parts might not be relevant to newer themes. I had to save it as a txt file as css files aren't allowed.
Also this
https://open.vanillaforums.com/discussion/comment/255024/#Comment_255024
i'm not a general type of people haha. But thank you for the reminder. :)
yes, the cloning was what I'm doing, when I said I'll edit in the files in the directory. I'm glad it can be done the old fashioned way.
Thank you very much for the annotated stylesheet, gives insight in the structure!
@Kaspar thank you for those links. Should be enough info now for me to change what I want :)
Good suggestions @Kaspar but at this point as well I'd recommend using our Theme Boilerplate. You can basically rebuild keystone by adjusting the underlying variables, and adding a few styles on top.
It can be complicated to override styles, and your overrides might be complicated to upgrade for future releases.
By changing a few of the variables of the boilerplate theme you can get some pretty large changes in style, then add some extra CSS for your own plugins or header/footer etc.
Then for future releases you can upgrade your boilerplate dependency and get the benefit of our improvements.
aight, so it's learning the boilerplate way of work then for me. thank you for your input and help everyone! :)
ok so i am trying to install vanilla.cli on my mac to work with the boilerplate.
everything goes well until i have to run vanilla. i get stuck here:
firstly, i don't know what that means (composer directory being on my path), secondly I do not know how to get it there...
I have found the composer bin and vanilla is in there.
but I can't run the build command. it keeps saying "command not found" even while using it from the directory it's in.
what do I do to run vanilla build from my theme directory?
thank you in advance!
@Queth You might find this helpful.
What an encouraging picture that author has chosen...
@charrondev thank you for that link. well that took some typing but I managed to do it. :)
but now the following occurs:
Vanilla source directory is missing. Please provide a path to your vanilla installation with the "--vanillasrc" parameter or by setting the VANILLACLI_VANILLA_SRC_DIR environmental variable.
I found a topic with someone who had the same problem but that was on a windows environment.
Where do I set the path?what is the path?
again, many thanks :)
That would be wherever your vanilla installation lives. Similar to setting the path you would add something like this to your bash profile.
With the path being the later part. Wherever you have your local vanilla installation.
ok it took a while but managed to create a new theme with the boilerplate 🕺
now off to playing with the scss files :)
thank you for your step by step guidance and immense patience with me!
ok one tiny question now... i'm trying to set a background image on the header, i can't figure out the path to the images files? and can I just set a new variables?
i'm trying this:
$header_backgroundImage: "images/starbg.jpg" !default;$header_backgroundRepeat: no-repeat !default;$header_backgroundSize: cover !default;$header_backgroundPosition: center center !default;no success. eg it shows just the bg color.
and I can't figure out if it's the code or the image path... I tried setting a background image for the body (since that variable is already declared), but that also doesn't show up. So I assume it's the path.
I assume the relative path is from the css file itself right? so should be images/[image]
so i'm doing something wrong, but what?
And yes (before you ask), all other changes show up OK, and I have built it etc.
(haha me and filepaths!)
If you're using a relative path you have to remember that the built file is in a different directory than the source file. Imagine the following structure:
design/ starbg.jpg custom.css src/scss/ sections/ _header.scss custom.scssIn this structure all of the
scssfiles get built intocustom.css, so your paths need to be relative tocustom.css.Thank you @charrondev for that visual :)
i thought that’s what I have done, since the images directory is in the design dir. and I put it in there.
then I tried with the css syntax (url=("image");) and I got it to work on the body now with
$body_backgroundImage: url("images/starbg.jpg") !default;however, i need it in the header. so now I know the actual setting of the background image works, how do I get it in the header?
I tried
$header_backgroundImage: url("images/starbg.gif") !default;but that doesn't work. it also doesn't show up in the custom.css after building to I guess I need to define that variable somewhere ? How/where do I define it so it ends up in the .css file?