Announcement

Collapse
No announcement yet.

Changing style for profile field description text

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Changing style for profile field description text

    On our registration form, we have custom user profile fields. When those fields show up on the registration page, a CSS style sets their colour. The CSS style name is field-desc. I can't find in the Style Variable Editor which style variable is creating this colour. Look at the debugging output and how this is coming out of css.php. The colour I'm pointing to is the colour I'm trying to change. Which variable do I edit to change it?

    Click image for larger version

Name:	Screenshot 2020-09-11 at 10.13.02.png
Views:	74
Size:	55.6 KB
ID:	4447235

  • #2
    There isn't a style variable for every piece of text. Just override the default by putting your own custom code in the css_additional.css template.

    So you can do something like:
    Code:
    .field_desc {color:#000;}
    You can edit the css_additional.css template by clicking the <<>> button in the Style Manager or using the Style tool in Site Builder and clicking on the CSS tab.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment


    • #3
      Thanks. I looked at that and thought it would work. One of the things I'm trying to do is change the HTML as little as possible because I don't want to deal with merging by hand when there are software updates. So I tried your suggestion first. The first screenshot shows that my additional_css got loaded, the browser (Safari) has it. But somehow it's got a lower priority than the other CSS so it is overridden. I thought "ok, I'll just make a new class, call it desc-dark, and apply that style as well." That is also not working, as you can see in the second screenshot. It, too, is loaded by my browser, but doesn't take effect. I'm still working on this, but boy is it difficult. I will probalby have to monkey with the HTML, which is frustrating.

      Click image for larger version

Name:	Screenshot 2020-09-12 at 10.10.34.png
Views:	76
Size:	488.4 KB
ID:	4447273
      Click image for larger version

Name:	Screenshot 2020-09-12 at 10.15.30.png
Views:	36
Size:	486.0 KB
ID:	4447274

      Comment


      • #4
        This required a few things.
        1. I had to edit the widget_register template to take out field-desc and replace it with my own dark-desc class in four places.
        2. I had to create that dark-desc class in the addtional_css style
        3. I had to go edit 5 different templates because the field-desc class is in each of these templates. I replaced it with my dark-desc class.
          • userfield_radio
          • userfield_select
          • userfield_select_multiple
          • userfield_textarea
          • userfield_textbox
        Now I can mess with my dark-desc class and it effects all those different pieces of the registration page.

        Comment


        • #5
          You can make your CSS more specific and add !important to the declarations that were getting overridden to make sure they take effect. Though it seems like a minor bug to load the form CSS after css_additional.css. This is probably due the AJAX nature of the form.

          The registration form content is in a form with the ID of frmRegister and that contains the ID of regContent.

          So you should be able to something like:

          #frmContent .field-desc {color: #404040 !important}

          This means that if .field-desc is a child of #frmContent then apply this color. This should prevent the need to edit HTML in the templates.

          https://developer.mozilla.org/en-US/...nd_inheritance
          https://developer.mozilla.org/en-US/...SS/Specificity
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API

          Comment


          • OldGrumpyDad
            OldGrumpyDad commented
            Editing a comment
            Nice! Thanks!

        Related Topics

        Collapse

        Working...
        X