Support » Plugin: Connections Business Directory » Form plugin – highlight fields

  • Resolved scottmaui

    (@scottmaui)


    This is related to my last question re Premium Listings…

    In the Form extension, when someone is entering their directory listing, is there a way that I can highlight or differentiate fields? For example, have some fields show up as different colors? Or even just put an asterisk next to the field name?

    Is this something that can be modified in the CSS?

    The purpose would be to highlight which fields are part of a Premium Listing versus just a Basic Listing.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Steven

    (@shazahm1hotmailcom)

    @scottmaui

    RE: Is this something that can be modified in the CSS?

    The output of Form has a lot of classes you can use to target custom CSS. You can use the browser inspector console to view the classes and write CSS selectors bases on those classes to change the CSS style (highlighting or even add asterisks).

    I hope this helps!

    Delayed followup to my question…

    I’m finally getting around to trying to work on this, and I’m not where where to modify the form css. Although I’ve worked with CSS, I’m pretty novice when it comes to customizing WordPress.

    Would you mind walking me through the steps in a little more detail?

    For example, if I want the metabox for the Image field to be colored red, I see the div I’m looking for is:

    <div id=”cn-metabox-metabox-image” class=”cn-metabox” style=”display: block”>

    But where exactly do I go to edit the CSS for the Submit page? I can see where to edit the template, but not the form page.

    And how do I edit the style so it is red only for some IDs (cn-metabox-metabox-image), but not for all of that class (cn-metabox)?

    I would appreciate more instruction based on the assumption that I am not familiar with how to do much CSS editing!

    Plugin Author Steven

    (@shazahm1hotmailcom)

    RE: I would appreciate more instruction based on the assumption that I am not familiar with how to do much CSS editing!

    Sorry, I can not really teach or instruction on how to do CSS editing, but here’s a quick example:

    
    #cn-form .cn-metabox#cn-metabox-metabox-image {
    	background: red;
    	border-color: red;
    	box-shadow: none;
    }
    
    #cn-form .cn-metabox#cn-metabox-metabox-image h3 {
    	background: red;
    	border-color: red;
    	box-shadow: none;
    	text-shadow: none;
    }
    

    You can tweak as desired.

    RE: where exactly do I go to edit the CSS for the Submit page? I can see where to edit the template, but not the form page.

    Put the custom CSS in the theme’s custom CSS area found in the Customizer. Alternatively you can use a plugin which can output custom CSS. Many advanced theme’shave option to put custom CSS per page. There are many options available. there’s is nothing to edited in the From addon itself.

    Hope this helps!

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.