Semantic UI - change component styles (override components css)

Question

I'm trying to change the style of some semantic ui components. I've created a css file and I've been changing the parameters there. Then I noticed that all component css files (in Semantic UI folder) have the following code at the end:

/*******************************
         Theme Overrides
*******************************/


/*******************************
         Site Overrides
*******************************/

I've copy pasted the code from my css file to the bottom of the component css file but the styles were not updated/overrided. I tried to use !important but it didn't worked either.

I've tried something like this:

/*******************************
         Theme Overrides
*******************************/

.ui.header {
  border: solid red; !important
  border-width: 2px; !important
}

I was expecting this element to get a red border around it

<div class="ui small header">This is a header</div>

Any idea why it didn't worked ?

Are you using the same selectors? You need to use equal (valid if your CSS is placed **after** the default) or stronger selectors to override the default style. — Ramiz Wachtler, Apr 13 '15 at 11:27
Yes, I'm using exactly the same selectors. I was looking and I've deleted some folders of the original Semantic UI zip because I felt they were going to be useless. I'm betting the problem is caused because of those missing folder (just guessing, need to try). — Let_IT_roll, Apr 13 '15 at 11:37
If you deleted something necessary, you could take a look at console logs in your browser, those may report a **404 Not found**, this way you can figure out which files you need. — Ramiz Wachtler, Apr 13 '15 at 11:41
Just in case I've tested the above example with a "clean" Semantic UI zip folder. It also didn't worked. — Let_IT_roll, Apr 13 '15 at 11:57
Ok, I've tried out to override default header style, it worked out for me (without **!important**), BUT is it possible that you included the **semantic.min.css** and all your edits are inside the **semantic.css** ? — Ramiz Wachtler, Apr 13 '15 at 12:03
I finally did it ! First, you were right, I was including **semantic.min.css** and making the changes in **semantic.css**. Second, I wasn't using `gulp watch` or `gulp build` to "save the changes". Thanks ! — Let_IT_roll, Apr 13 '15 at 17:51
Hey, glad you made it. I'm sorry I didn't respond earlier, had only my smartphone with me. — Ramiz Wachtler, Apr 13 '15 at 17:52

score 0 · Answer 1 · answered Jun 13 '17 at 11:17

0

You need to add your overriding CSS styles in src/site/elements/header.overrides file and run gulp build command.

If "gulp watch" is already running, then it will automatically run build task on detecting changes in the aforementioned file.

The src/site folder is present to override any style introduced by the selected theme.

answered Jun 13 '17 at 11:17

ANSHU MISHRA

9
1

1

How does Gulp have to do with anything here? – MattSom May 29 '20 at 23:30

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Try including '!important' within ';' in your code like this,

.ui.header {

border: solid red !important;

border-width: 2px !important;

}

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 26 '17 at 15:47

RoyCloud

31
4

score 0 · Answer 3 · answered May 04 '19 at 09:56

Another possible solution would be to nest all your application's less styling under a unique id, used at the root element of your app.

for example in my own case:

    #__next {

       .is-pink {

          color: pink

       }

      .mb-70 {

        margin-bottom: 70px !important;

       }

    }

Semantic UI - change component styles (override components css)

3 Answers3