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

How to edit css style on Vanilla 4 and how to translate language.

Hello, I would like to ask how to edit CSS styles in Vanilla 4 in the Foundation template.

  1. I'm trying through inspect in Google Chrome, I can't find the classic css source code when I want to change, for example, template colors, etc.
  2. I would also like to know if it is possible to remove or turn off the Wide Search box on the main page on the Foundation template.
  3. Last question on how Vanilla 4 can be translated into another language. Is there any instructions?



  • Options

    I try it with Stylebot in Google Chrome and change a color of top bar to this:

    div.vanilla-11p5yzj-titleBar-overlay {

      background-color: #FFF100


    But you will probably need to create your own custom css

    but I'd rather edit the direct code than do this, I find it some complicated with Vanilla 4 ...

  • Options

    You can edit the CSS styles without touching the core files using this plugin-

    And for translating, create a locale.php file (if you don't have it) in "/conf" folder and add this code-

    <?php if (!defined('APPLICATION')) exit();

    $Definition['Add the word you want to translate in your language'] = 'Add your translation here';

    $Definition['Add another word you want to translate in your language'] = 'Add your translation here';

    You can add many definitions according to your need in separate lines.

    I don't know if this is the correct way to translate Vanilla, but it works for me.


  • Options
    KasparKaspar Moderator
    edited May 2021

    That is for translating or changing wording of a few things here and there

    Overall translation files are here


    How is described here


  • Options

    Thanks, and where i can edit core template css ? Thanks

  • Options


    I need edit core Foundation theme so i cant find it css files from this template on FTP, i i don't see any on ftp or folder with this template.


    I would like to create a clean translation with my language, but I can't find the original file with the EN translation. It seems to me to solve everything, can anyone create a brief guide?

  • Options
    Mark1Mark1 New
    edited May 2021

    testing3, thanks for help about translate, so this is special way even if it works. I'd rather have a classic translation, when I downloaded the native language file in the directory is an image of my language and multiple files divided into files.

    It is necessary to have so many files in the translation, or it is enough to have all the phrases in one file.

    There is nothing going on in this new Vannila 4 .... a simple CSS modification has disappeared and the translation too .. it's all complicated ..

  • Options

    I could be wrong, but I think Foundation works quite different than the older themes. I don't think you should edit the core CSS files, it would be all over the place as it seems to be several files and confusing to apply again when updating. It would be a lot better to use the CSSEdit plugin or add a custom.css to override the core CSS.

    In Foundation theme /assets there's a file called variables.neon. You can change a fair bit of the CSS by editing this file, like global colours, fonts, the banner etc. It also lets you edit the top bar links.

    For overriding the rest of the CSS, see my last post here if you have trouble with it https://open.vanillaforums.com/discussion/38712/making-a-proper-copy-of-theme-foundation#latest

  • Options
    BleistivtBleistivt Moderator

    @Mark1 You should not any of the files that come with the core download package. When you update the next time, those will be overwritten and you lose your changes.

    In CSS you can overwrite the rules you want to change by using rules with a higher specicifity.

    The methods shown in the comment above work and will save you a lot of time in the future:

    You can absolutely put all of the translations in a single file, but use /conf/locale.php for that unless there is no official translation for your language.

Sign In or Register to comment.