Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 31, 2019 at 2:03 pm #1060975
    db777

    Hi,

    I have an issue with the base css file overriding the css of the HappyForms (https://happyforms.me/) plugin I’ve installed. The form page is essentially separate from the main website and I would like style the text on the form independently from anything else that is going on elsewhere across the site. The form is created in the plugin and then added to a page using a shortcode. Inspecting one of the form input titles generated in Chrome shows the following:

    #top label span,	base.css?ver=4.5.3:258
#top legend span {
font-weight: normal;
font-size: 13px;
color: #444;
}

.happyforms-	frontend.css?1.6.19:244
Part_label .label, .happyforms-
part_label .happyforms-optional {
padding: 0;
font-weight: normal; [crossed out]
font-style: normal;
font-size: 16px; [crossed out]
font-size: var(  happyforms-part-title-font-size); [crossed out]
color: #000;
color: var(  happyforms-color-part-title); [crossed out]
background-color: transparent;
}

    The base.css file is therefore taking precedence. I’ve tried adding the #top label span, #top legend span rule to the Enfold Child css file and changed the font size but nothing seems to change. Is there a way to exclude the base css from applying to the form either through use of the Enfold Child (as thought would be the case) or otherwise?

    Lastly, in order to understand it a bit better, why is this happening? Is it the rules of specificity?

    Thanks in advance

    February 1, 2019 at 12:58 pm #1061511
    db777

    Hi,
    With further looking the child theme custom css does work – I’d not cleared the cache and hard reloaded.

    I’m still curious though as to why the base css file is overwriting the plugin styles. Is it just a coincidence that the same class was used?

    Also, is there a better way to implement the custom styles as at the moment the plugin puts it’s style forward, base css overwrites them, and then the child theme css overwrites that.. doesn’t seem very efficeint to me!

    Any help greatly appreciated.

    February 2, 2019 at 6:26 am #1061871
    Rikard

    Hi,

    Thanks for the update, we would have to see the actual problem in order to give you an answer to that. Is there anywhere we can see the issue on a live page?

    Best regards,
    Rikard

    February 4, 2019 at 1:48 am #1062439
    db777

    Hi Rickard,
    Thanks for the message. Yes, you can see it live. I’ve added a temp login for you – see private section.
    Thanks

    • This reply was modified 5 years, 10 months ago by db777.
    February 10, 2019 at 8:27 pm #1065196
    Mike

    Hi,
    Sorry for the late reply, I took a look at your form and the main issue the I see is specificity, for example, while the happy forms is adding color the label titles it doesn’t include the “span” which the theme is assigning color to.
    But in other cases the happy form is assigning the color to the form title at the top of the page:
    2019-02-10-130756
    I tried changing the order that the css loads, but because of specificity it didn’t help, I also tried removing the base.css for the one page, but that broke the header and footer.
    So for the solution, I copied the happy forms customized css for the one page and added specificity to it and added it to the page in a code block element.

    <style>
#top #main #happyforms-form-449 {
happyforms-form-width: 100 !important; 
happyforms-form-title-font-size: 32px !important; 
happyforms-part-title-font-size: 22px !important; 
happyforms-part-description-font-size: 18px !important; 
happyforms-part-value-font-size: 18px !important; 
happyforms-submit-button-font-size: 18px !important; 
happyforms-color-primary: #000000 !important; 
happyforms-color-success: #39b54a !important; 
happyforms-color-error: #ff7550 !important; 
happyforms-color-part-title: #000000 !important; 
happyforms-color-part-value: #000000 !important; 
happyforms-color-part-placeholder: #888888 !important; 
happyforms-color-part-border: #dbdbdb !important; 
happyforms-color-part-border-focus: #407fff !important; 
happyforms-color-part-background: #ffffff !important; 
happyforms-color-part-background-focus: #ffffff !important; 
happyforms-color-submit-background: #a81010 !important; 
happyforms-color-submit-background-hover: #3567cc !important; 
happyforms-color-submit-border: transparent !important; 
happyforms-color-submit-text: #ffffff !important; 
happyforms-color-submit-text-hover: #ffffff !important; 
happyforms-color-rating: #cccccc !important; 
happyforms-color-rating-hover: #f39c00 !important; 
happyforms-color-rating-bg: #efefef !important; 
happyforms-color-rating-bg-hover: #407fff !important; 
happyforms-color-table-row-odd: #fcfcfc !important; 
happyforms-color-table-row-even: #efefef !important; 
happyforms-color-table-row-odd-text: #000000 !important; 
happyforms-color-table-row-even-text: #000000 !important; 
happyforms-color-choice-checkmark-bg: #ffffff !important; 
happyforms-color-choice-checkmark-bg-focus: #000000 !important; 
happyforms-color-choice-checkmark-color: #ffffff !important; 
happyforms-color-dropdown-item-bg: #ffffff !important; 
happyforms-color-dropdown-item-text: #000000 !important; 
happyforms-color-dropdown-item-bg-hover: #dbdbdb !important; 
happyforms-color-dropdown-item-text-hover: #000000 !important; 
}
</style>

    From what I can see it is working correctly, the field click is getting the blue border, the titles are black, ect.
    Please clear your browser cache and check, and let us know if something is missing so we can assist.

    Best regards,
    Mike

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.