Custom CSS for Sign up form

HomeForumsPTA ShortcodesCustom CSS for Sign up form

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Stephen Sherrard 1 year, 8 months ago.

  • Author
    Posts
  • #20232

    Rob Lawrence
    Participant

    I use Divi which has a pretty simple method to add custom css to a module where the shortcode is placed. However I can’t see to get any styling to layover the sign up form once a sign up has been selected from a particular sheet. Here is the code I’m trying to apply:
    .et_divi_builder #et_builder_outer_content .et_pb_module input[type=text] {border-radius: 0 !important;
    color: #999 !important;
    padding: 16px !important;
    max-width: 100%;
    outline: none !important;
    box-shadow: none;
    background-color: #eee !important;}

    I’ve attempted several approaches but can’t get it to take. Any special sauce I need to apply or have here?

  • #20234

    Stephen Sherrard
    Keymaster

    I’m not a CSS expert, and have not used the Divi theme, so can’t really help you directly with regards to that theme.

    My plugin actually uses very little CSS to style the tables and other output. Most of the way things are displayed from my plugin is from the default styles of your theme.

    My suggestion would be to use the option in my plugin to disable the plugin’s CSS, and then hard code your CSS into your child theme, or wherever Divi lets you put custom CSS.

    You can start by copying the relevant CSS from my plugin, which you can find in the assets/css folder. The public side css is the style.css file. You’ll see it’s very small, with the top part styling the tables in a very minimal way, the middle part is mostly for error/success messages, and the bottom part is for styling the divs as tables by default if you have the plugin set to output divs instead of tables.

    Copy over the parts you need, and make changes as desired. Most all of the output has custom classes as well, so it should be relatively easy to target just those elements you want to change with some custom CSS. Just inspect the elements in your browser to get the class names for anything you want to change.

You must be logged in to reply to this topic.