Flex Theme overriding SU code

[Dee]

Hi there,

This is driving me nuts!

On this page http://pjoweb.nl/adyar1/our-philosophy/ I want the border of the box ‘Michiel and The Elephants’ to be 1px black. Unfortunately my custom css doesn’t respond to:

.su-note {
border-color: #000000;
}

or

.su-note {
border-color:#000000 !important;
}

I’ve tried other options as well, unfortunately without any succes.

What code do I need in order to get the desired result?

Thnx in advance,
Dee

[Davinder Singh Kanith]

In style.css file

Replace this..

.su-note {
    margin: 0 0 1.5em 0;
    border-width: 1px;
    border-style: solid;
}

with

.su-note {
    margin: 0 0 1.5em 0;
    border: solid 1px #000 !important;
}

[Dee]

Thanks, one problem though…

I am wondering how I can do this outside the code of the plugin itself. Because if I replace that code in the plugin css, the updates will override it.

Is there a way to tell my custom css file to ignore the original plugin code (the border code in the old one is different than in the new code) and to use the new code? So I can change this in the custom css file instead of the plugin css?

Because it doesn’t work if I just enter (already removed it again):

.su-note {
    margin: 0 0 1.5em 0;
    border: solid 1px #000 !important;
}

• This reply was modified 7 years, 3 months ago by Dee.

[Davinder Singh Kanith]

By default, style code defined in plugin with over-ride styles in style.css file.

To make code in style.css over-ride plugin’s code, use !important

For example:

border: solid 1px #000 !important;

[Dee]

Hi Davindr,

Yes, I understand. And I did exactly what you mentioned. BUT..

The original code says

.su-note {
margin: 0 0 1.5em 0;
border-width: 1px;
border-style: solid;
}

And your code is

.su-note {
margin: 0 0 1.5em 0;
border: solid 1px #000 !important;
}

so it doesn’t do anything with the border-width code.

Somewhere the color code seems to be in the element.style code, which I see above the su-note code:

element.style {
    border-color: #e0e0e0;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.su-note-inner {
  border-style:solid;
  border-width:1px;
  padding:1em;
}

Even setting the original code on

.su-note {
margin: 0 0 1.5em 0;
border-width: 5px;
border-style: solid;
}

thus only changing the pix from 1 to 5, doesn’t change anything…

I think then to let the topic drop, because it just isn’t working.

Thnx for your help and time though,
Kind regards,
Dee

p.s.: if I change the element.style in the inspector, I get a result, but how to get this in the design is a different thing.

• This reply was modified 7 years, 3 months ago by Dee.
• This reply was modified 7 years, 3 months ago by Dee.

[Author]

Posts