WordPress.org

Ready to get started?Download WordPress

Forums

Jazzy Forms
[resolved] Custom CSS for a Single Field (what's the trick?) (8 posts)

  1. sosapr
    Member
    Posted 7 months ago #

    Maybe this question is way too simple for most people, but I'm confused.

    I want to make the numbers in certain fields be bold.

    I want to make the number in one field be red.

    What is the format to drop into the "Custom CSS classes" field to make that happen?

    (my page: http://www.audio-rescue.com/estimator

    Thank you for help with this...

    http://wordpress.org/plugins/jazzy-forms/

  2. sosapr
    Member
    Posted 7 months ago #

    For instance, after looking around in the forum, I'm trying things like:

    div.jzzf_total {font="bold"}

    when my field is called "total"

    but this does nothing.

  3. jazzigor
    Member
    Plugin Author

    Posted 7 months ago #

    The cleanest way is to set a dedicated "Custom CSS class" for your element. That's in the "Appearance" section of each form element configuration. (The correct term would actually be HTML class). If you set it to sosapr_test you can address your element in your CSS code with something like:
    .sospr_test { font-weight: bold; }

  4. Mike Hickcox
    Member
    Posted 7 months ago #

    Okay - same guy, logging in from home ...

    In the Appearance tab, under Custom CSS, I entered:
    sosapr_test

    And in the element, under appearance, in the Custom CSS classes, I entered:
    .sospr_test { font-weight: bold; }

    And that did not do it. You said to "set it to sosapr_test". Do I need to enter more into the Appearance / Custom CSS box to set it, to designate what I'm doing?

    Thanks for your help!

    - Mike

  5. Mike Hickcox
    Member
    Posted 7 months ago #

    Me again ... on closer reading, I've left the Appearance tab box blank.

    In one of the elements, I added:
    .sospr_test { font-weight: bold; }

    And again, I've clearly not done what I need to do. How and where do I set the class? Do I need to do it in the header of the website?

    Thanks -- I know I'm missing something.

    - Mike

  6. jazzigor
    Member
    Plugin Author

    Posted 7 months ago #

    Hi Mike,

    sorry for not being clear enough. It seems you got it the way around.

    In an element's Appearance section set "Custom CSS class" to sospr_test. This will assign a Custom CSS class called sospr_test to your form element (precisely to the surrounding DIV tag). The corresponding CSS code to style your element would be something like .sospr_test { font-weight: bold; }. You could put this code into your theme's stylesheet, but you can use Jazzy Forms for that, too. In your form settings, go to the Appearance tab and write the CSS code into the "Custom CSS" box.

    For any CSS beginner who reads this: CSS can be quite tricky. Your custom CSS code will interact with existing CSS code in your theme's stylesheet. There might be existing CSS rules that override yours, because they are more specific and therefor considered more relevant. As a consequence you wouldn't see any change. Browser-dependent stuff comes into the game, too. Sometimes it's just better to have a CSS guru look at your particular case.

  7. Mike Hickcox
    Member
    Posted 7 months ago #

    jazzigor - Thank you so much for your help with this. I'm making progress. With your instruction, I've put the right things in the right places to make a difference.

    To make it extreme and to be sure I would see it, I made the class change the text to bold, red, and centered.

    It turns out it makes the changes to the titles on the form. I want it to change the text - the numbers - that appear inside the boxes.

    Now that I have the order of things in place, what makes the formatting apply to the numbers inside the boxes?

    Thank you!

    - Mike

  8. jazzigor
    Member
    Plugin Author

    Posted 7 months ago #

    For anyone who's interested: the last question has been addressed in a separate thread http://wordpress.org/support/topic/formatting-fonts-inside-a-field-not-the-title

Reply

You must log in to post.

About this Plugin

About this Topic