Hello, I am working on the modification of the css code of jomsocial. I am following the steps in the online documentation and I have no effect when doing it. I am using the jomsocial theme as default.

- I have created the following folder and file:

/templates/my_template/html/com_community/css/style.css

- I have added the following header to the style.css file created by me.

@import url ("../../../../../ components / com_community / templates / jomsocial / assets / css / style.css");
/ * Add overrides bellow * /

/ * I put this only for example * /

.joms-hcard {
     background: #fff;
     max-width: 420px;
     width: 100%;
     border: 1px solid # f7faff;
     position: relative;
}

- There is no effect, nor cleaning the chache completely.

One thing I see is that the CSS code is compacted, which makes it very difficult to find the code to change it. Is this normal or a problem with my configuration?

Thanks.

HI, Mauricio.

Thank you for contacting us.
It's because you sue the same class... thus it's ignored as it was once declared.
IMHO the best option is to NOT follow the documentation with importing file.
Just create overrides for class.

There are few ways how to override css, take a look at this few links:

www.netguru.co/tips/how-to-override-one-css-class-with-another
stackoverflow.com/questions/20954715/how...ng-another-css-class
www.freecodecamp.org/challenges/override...es-in-subsequent-css

Hello; I have read your response carefully and the articles you have linked me. I have to say that I have made changes but no effect since these are lost when updating.

When I read the tutorial on how to customize the theme of JS, it is very clear and does not give rise to error. I do not know what can be wrong. I have already made several changes in other domains with the overwriting system and I have never had problems. Could you help me in a clearer way of how the JS theme is overwritten in an easy way.

The problem I see is that the style.css file is compacted and it is impossible to find what to modify. I have checked that you are not using a system compression that causes this. Is there something else I should know?

Thank you.

HI, Mauricio.

If you import file with style and again declare styles for the same class it may not work as browser will ignore duplicated entry.
So if you want to change styling for .joms-hcard and it was once declared, you should use a chain of classes to inform the browser that you want to style class when it appears in specific order. In that particular case, on my site it could be:

.t3-has-navbar .joms-hcard or body .joms-hcard

prntscr.com/hnak5h

You may also use !important to let know the browser to use that particular property.