How to make my custom CSS priority over themes?

SuiteCRM Forum - English Language SuiteCRM Themes
1

I’m trying to update the checkbox CSS but SuiteP keeps on overriding my changes. So I’m wondering how can I prevent SuiteP from doing that?

2

You’re changing the wrong files, that’s all. You don’t say which files you’re changing.

Read this

and then this


[EDIT: newer version published here ]

This last one is not a good example, because it doesn’t change things in the custom directory… but it has the steps regarding SASS compilation, which are important.

3

I have a tpl file in my custom module. custom/modules/my_custom

Whenever I try to apply a style for input[“checkbox”] the SuiteP CSS overrides it so I have to add !important for my CSS to over rule the one in SuiteP.

4

I think you just need to learn CSS selector a bit better.

Put everything you do inside a

like this 
<div class="mine">
...
</div>

(use id if you plan to do several of these, and want them to get different CSS; but use class if you want just one, or if you want similar CSS for several)

Then you can refer to that in the CSS

If it’s a class:


#mine { color: red }

If it’s an id:


.mine { color: blue }

You can also use selectors for specific HTML tags within your div, just Google for “CSS selectors”.

5

classes are selected using periods and ids are selected using hashes
or you can select by any attribute

div[field="my_dropdown_c"][type="enum"] input {
  /*CSS RULES IN HERE*/
}

you can increase the importance by specifying the same selector more than once like

div.classname.classname

or

div[attribute][attribute]