Custom CSS

  • Resolved breannathirlwall

    (@breannathirlwall)


    5 years, 10 months ago

    Hello,
    I am using a pre-defined template. When I enter custom CSS, they appear correctly in the “preview” screen, but not the live site.

    IE.
    .cp_cff_minimalist #fbuilder label .r {color:#91c84c !important;} << appears in preview and live

    .cp_cff_minimalist #fbuilder label {font-size:40px !important;} << appears in preview but not live

    .cp_cff_minimalist input[type=number]::-webkit-inner-spin-button,
    .cp_cff_minimalist input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    } << appears in live

    .cp_cff_minimalist #fbuilder .fform {
    background: {#000000 !important;
    color:#ffffff !important;} << doesn’t show in either

    .cp_cff_minimalist #fbuilder .fform h2 {font-size:32px !important; font-family:”ff-tisa-sans-web-pro”, sans-serif !important;}
    .cp_cff_minimalist #fbuilder .fform span {font-size:11px;} << doesn’t show in either

    My main areas of concern are the template’s header, and the small field label font. Also, the bottom percentage field overlaps the field label (it’s the only one)

    Any suggestions would be greatly appreciated!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @breannathirlwall

    The issue is simple, your syntax for CSS is incorrect (there is an “{” symbol after the background rule.), and that makes that every style defined from the syntax error be ignored. Furthermore, your theme manages the label tags by itself, wrapping the texts into span tags. Please, replaces your styles definitions with the following ones:

    
.wpb_wrapper .cp_cff_minimalist #fbuilder label .r {color:#91c84c !important;}
.wpb_wrapper .cp_cff_minimalist #fbuilder label span {font-size:40px !important;}
.wpb_wrapper .cp_cff_minimalist input[type=number]::-webkit-inner-spin-button,
.wpb_wrapper .cp_cff_minimalist input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none; margin: 0; }
.wpb_wrapper .cp_cff_minimalist #fbuilder .fform { background:#000000 !important; color:#ffffff !important; }
.wpb_wrapper .cp_cff_minimalist #fbuilder .fform h2 {font-size:32px !important; font-family:"ff-tisa-sans-web-pro", sans-serif !important;}
.wpb_wrapper .cp_cff_minimalist #fbuilder .fform span {font-size:11px;}

    Best regards.

    Thread Starter breannathirlwall

    (@breannathirlwall)

    AH! The silly {
    Thank you so much for your quick response!

    All of the styles you sent worked perfectly…. except the label for any section that has a calculation or a predefined value. The style doesn’t apply to them, I tested by removing a predefined number and the style was applied.

    Plugin Author codepeople

    (@codepeople)

    Hello @breannathirlwall

    It has been a pleasure to help you.

    Concerning to the tags you are referring, their sizes is being affected by the style definition:

    
100%{opacity:1;transform:translateX(0px) translateY(-26px);font-size:12px;line-height:12px;}

    into the “https://wello.ca/wp-content/themes/salient/style.css&#8221; file of the theme active on your website.

    Best regards.

    Thread Starter breannathirlwall

    (@breannathirlwall)

    Thanks!
    How can I apply all of those effects to field labels with predefined content?
    I’ve managed to control the labels without predefined fields (or calculations) with…

    .wpb_wrapper .cp_cff_minimalist #fbuilder label span
{
-webkit-keyframes text-in-from-left:100% opacity:1; 
-webkit-transform: translateX(0px) translateY(-8px); font-size:14px !important; line-height:12px;
}

    but I can’t apply to the label with the class “minimal-form-input has-text” (found in firefox inspector). I just need the label font-size bigger.

    Thanks again!!!

    Plugin Author codepeople

    (@codepeople)

    Hello @breannathirlwall

    The classes you are referring are not in our plugin, they are defined by the theme on your website (you should contact to the theme’s developers), however, I guess you want to include the following style definition:

    
@keyframes text-in-from-left{100%{font-size:14px !important;}}

    Best regards.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom CSS’ is closed to new replies.

Tags