PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Custom CSS for Section titles

  1. UT RadOnc
    Member

    I'm trying to restyle the section titles in a somewhat complex form, but nothing is working. I would like to try styling each section title differently, but righ tnow I'll settle just for being able to make them stand out in the same style.

    I tried using the CSS code from the Sample Targeting CSS (example for title below; copied into my theme's default.css), but nothing changes.

    body #gform_wrapper_10 .gform_body .gform_fields .gsection .gsection_title {color: red}

    Using Firebug, it looks like the default h2 styling from my theme is overriding the h2 in the section code, but that string of styles looks so specific, I'm baffled why it's not touching it. I've tried creating a new class in default.css and putting the name of that class in the CSS Class Name field (Advanced tab). Obviously I'm doing something wrong but I guess I need help to figure it out.

    The test page of the form is here:
    http://www.radonc.utoronto.ca/test-page

    Thank you in advance for the help!

    Posted 11 years ago on Tuesday December 18, 2012 | Permalink
  2. David Peralty

    Can you try:

    .gsection_title {color: red !important;}
    Posted 11 years ago on Tuesday December 18, 2012 | Permalink
  3. UT RadOnc
    Member

    Hi David,

    I put that in my default.css. No change though.

    Posted 11 years ago on Tuesday December 18, 2012 | Permalink
  4. David Peralty

    I don't see default.css being listed/pulled in your theme header file on that page.

    Can you put it in :
    <link rel="stylesheet" href="http://www.radonc.utoronto.ca/wp-content/themes/RadOnc/style.css?1355877566" type="text/css" />

    Posted 11 years ago on Wednesday December 19, 2012 | Permalink
  5. UT RadOnc
    Member

    Hi David,

    Actually, default.css is imported into style.css, which is where I'm able to add customized styling. I believe this means default.css shouldn't need a css link in the header of its own.

    If you look at one of the section headings using Firebug, you'll see that there is an h2 style that originates in default.css, so it is being picked up.

    From what I can see, it seems that .gform_wrapper h2.gsection_title from the forms.css is overriding the font-weight and font-size of the default h2 styling. However, even when I put .gform_wrapper h2.gsection_title in style.css with {color: red !important;} it doesn't seem to override the default h2 font color.

    Wendy

    Posted 11 years ago on Wednesday December 19, 2012 | Permalink
  6. David Peralty

    Adding the following through Google Chrome's Inspect tool shows the change being applied. Can you try the following:

    .gform_wrapper .gsection .gfield_label, .gform_wrapper h2.gsection_title, .gform_wrapper h3.gform_title {
    color: red !important;
    }
    Posted 11 years ago on Wednesday December 19, 2012 | Permalink
  7. UT RadOnc
    Member

    Thanks again, David. It didn't change anything. I think for some reason the style.css isn't being accessed after all, which is what you suggested. I put a test style in that css file for some plain text and it didn't show up, so I'll have to investigate further to see what that problem is about. It might be the entire problem. I'll let you know what I find. Thanks!

    Posted 11 years ago on Wednesday December 19, 2012 | Permalink
  8. UT RadOnc
    Member

    Oh, I got it! It was a typo in my style.css. It's all working now. (blushing with embarrassment) Thank you very much for your help. :-)

    Posted 11 years ago on Wednesday December 19, 2012 | Permalink
  9. David Peralty

    Glad you were able to figure it out. All my best!

    Posted 11 years ago on Wednesday December 19, 2012 | Permalink
  10. UT RadOnc
    Member

    Thank you. :-)

    Posted 11 years ago on Wednesday December 19, 2012 | Permalink

This topic has been resolved and has been closed to new replies.