Custom Themes (Semantic UI)

[dastrong]

Hey, can someone check out the style/customsemantictheme branch?

• You'll need to install the new package in package.json with npm i
  • If there are any errors or it asks you to set up semantic-ui, let me know
• If neither happen run npm start
• Check out the featured posts button (View More Listing) and tell me if it's pink or gray

Thanks

[dastrong]

I just created a clone to try it out fresh and it worked fine (grey button).

If someone else can confirm though, that would be much appreciated. If it works, you can open a PR and I'll approve the merge.

[diskomotech]

I just tried running npm i and it's telling me I need to set-up semantic UI. What needs to happen?

[dastrong]

This was added in #59 and updated in #60.

Install

• First, install gulp with npm install gulp -g
• Pull the changes from the development branch
• npm install
• If it asks you to set up Semantic UI, don't. You can delete your node_modules folder and try npm install again.
• If that doesn't work and you still get asked to set up Semantic UI, I suggest cloning the repo in a new folder. It runs fine when @diskomotech and I did it that way.

If npm gives you security vulnerabilites when installing, you can ignore them. They are caused by Semantic UI's dependency of an older version of Gulp. Semantic UI isn't constantly maintained, which means they have't upgraded to Gulp 4 that was released earlier this year. An issue is already open and once it's merged we can upgrade and avoid those warnings.

Updating the theme

If you would like to update some of the generic CSS that is provided by Semantic UI, we need to do the following:

• install gulp to build the files npm i gulp -g if you haven't already
• you can edit variables in the src/semantic/src/site/globals/site.variables file
  You should see our 4 colors in there
  Unlike other files, if you update a global variable you're browser won't load those changes
• After you save the site.variable file you need to cd your way to src/semantic and run gulp build-css
  This will take a second as it rebuilds every CSS file with the updated variables
• When it's done, you can now run npm start and can start using those variables

Examples

@pink: #f185b3;
@olive: #d52484;
@purple: #90007f;
@violet: #3d0043;
When you enter color='olive' in a component, it'll provide the second color in our palette. I'm well aware that olive !== pink, but React component only accept certain color strings and since we won't be using an olive color in our project, I choose that.