Forums

Hi, I was looking to find out if is possible to override default css settings within gcore-ui.css file. Whenever I try to change the styles for the following classes this doesnt get recognised from my custom file as I also want to target the various media queries but not sure how to fix this.

.gcore-line-tr
.gcore-label-left

If somebody could please advise would really appreciate it.

Thanks in advance.

Hi aftabn10,

You can over-ride most CSS in a Load CSS action its usually a question of using a more specific selector, or adding !important to the style.

Over-riding the selector can take a little experimentation but usually a good place to start is to use the form id e.g.

#chronoforms-my_form_name .gcore-line-tr { . . .

Bob

Thanks Greyhead, I will give that a go and let you know how i get on.

Hi, I have added the following within the load css function:

#chronoforms-contact_us .gcore-line-tr {
padding:0;!important;
}

which should take precedence over the default style:

.gcore-line-tr {
    padding: 10px 0px 5px 30px !important;
    margin: 0px 0px 10px !important;
    width: 100% !important;
    clear: both !important;
    display: inline-block;
    border: 0px none !important;
}

but this doesnt, is it because the default one also has an important tag as well?

Also within the On load section, does the Load CSS have to be in a particular order as currently I have the following:

HTML (Render Form)
Load CSS
Load Captcha

Thanks once again for your support..

Hi aftabn10,

You have an extra ; in your CSS, that may be the problem.

Bob

Thanks GreyHead, just repasted the whole code and changed the padding and that did the trick. Noticed the extra ; afterwards😲

Thank you for pointing it out.

Using an external CSS file I had to use the following in the "Load CSS" in the path to the css file.

../../path to the css flie.

Thanks again Grayhead!