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

Making a proper copy of theme Foundation

ElleElle New
in General Banter

There's no category for the new version yet so posting this here. Perhaps I should be more patient, but I'm eager! I'm using Vanilla 2021.009.

I got two issues trying to theme:

For Vanilla 3.3 I made a copy of Keystone as the base for our theme and then changed it. The first issue is I'd like to do the same with Foundation if possible, but I seem unable to copy it properly. I get a copy I can enable, but not all of the CSS seem to be there and it all looks a little messed up. I tried following this guide https://success.vanillaforums.com/kb/articles/168-theming-quickstart , but get stuck on step 3 since there's no package.json.

The second issue is the CSS in Foundation. There's a lot of inline CSS and to change it I'd have to use !important as it overrides any changes otherwise. For this issue I'm probably just wondering whether I'm supposed to do it that way or if I'm missing something else here 😅

Thank you in advance

Comments

  • R_JR_J Admin

    That guide couldn't be completely applied to the open source version, I'd say. It explains something about a theme altered through the dashboard and that feature is only available in the SaaS version.

    For creating your own themes there are two approaches in my opinion.

    1. If you are a professional front end designer and know build tools and css precompilers, you should clone the vanilla repository and look at the /addons/themes/theme-foundation folder since in the repo everything is uncompiled, also the theme. You'll find that package.json there, too.
    2. If you know just enough of css to tweak small things and don't want to dive in deeper into developing, you can get started really quickly: duplicate the theme-foundation folder and call that new folder "eye-candy" or whatever. After that, you need to edit the addon.json file: at least the "key": "theme-foundation" should be changed to "key": "eye-candy". Certainly changing the "name" and some of the other lines does make sense, too.


    Since Vanilla started using React for its frontend, you might need to take the hard route for some tweaks, but you should certainly be able to start with option 2

  • ElleElle New

    Thank you for the reply RJ.

    Approach 2 is what I did for Keystone, but it didn't quite work out as well with Foundation. Perhaps I should try the first approach, although I'm not sure I'll manage it :P

  • R_JR_J Admin

    It certainly is the "better" way, because it is cleaner, mightier, more future proof - but also requires time to learn some things. The build step with yarn (at least I think this is what is used) is easy and first steps in sass are also easy, but nevertheless sass is a mighty tool and I personally never spend enough time with it to feel comfortable using it. But that might be because I don't like front end coding that much...

  • ElleElle New

    I might try it if I get the time. For now I do wish there wasn't so much inline CSS. It would be fine writing a custom.css file if not, but to override it now I'd need !important everywhere.

  • ElleElle New

    Thouhgt I'd mention if anyone else tries to customise Foundation there's a file called variables.neon. It lets you change some things globally like fonts, colours and such. It's very useful.

    That said, everything else is inline CSS and I still haven't found a proper way to customise this theme other than overwrite using !important. It's very odd. Also found someone mentioning that issue last year: https://open.vanillaforums.com/discussion/38344/customizing-theme-foundation-3-3

    I hope someone founds a way to separate the inline CSS into its own file to be able to customise without !important, that would be great! Right now it's rather crazy.

  • ElleElle New

    Sorry for the triple post, but I thought it could help someone else so I hope that's okay. Feel free to remove some if it's too much.

    Things aren't working simply because I suck 😅 The browser inspector tells me it's inline CSS and I've always thought the only way to override that is to use !important. However in this case it works if also specifying the CSS selector 'higher up in the structure'. So in short, no need for !important.

    So simplest way to customise Foundation:

    Do changes in variables.neon as much as possible first. The links and look of the titlebar up top can also be edited in this file. To edit the CSS, make sure to specify the selector 'higher up' if it gets overriden.

  • KasparKaspar ✭✭✭

    Sorry for the triple post, but I thought it could help someone else so I hope that's okay. Feel free to remove some if it's too much.

    You just go ahead, you are solving your own issue, you are learning something and sharing the knowlegde with others

    https://css-tricks.com/specifics-on-css-specificity/

    Yeah specificity can be a b.... ehm bottleneck, yeah that's what I meant ;-)

    https://www.w3schools.com/css/css_specificity.asp

    This also have helped me - when I remember to check it/follow it

    https://css-tricks.com/specifics-on-css-specificity/

Sign In or Register to comment.