Announcement

Collapse
No announcement yet.

White text on White Baground

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

  • White text on White Baground

    I have a style issue with the help page. The title text on the page uses the style variable module_header_text_color, but does not include the module_header_background. On our site, we have a dark background for the module header and white text, but on the help page, the text is invisible because the module_header_background is not used which results in white text on a white background. The same issue appears on this site with the "Blue Green" style and a screen shot is attached. I highlighted the text so you can see it.

    Click image for larger version

Name:	Screen Shot 2018-02-08 at 8.07.07 AM.png
Views:	1
Size:	65.3 KB
ID:	4386090

    Is there a way to use CSS to change this style varialbe only on this one page?

  • #2
    You could add the following to your css_additional.css template:

    .module-title h1 {
    color: #000000;

    Comment


    • #3
      Seems like a bug. Will have to investigate.
      Translations provided by Google.

      Wayne Luke
      The Rabid Badger - a vBulletin Cloud customization and demonstration site.
      vBulletin 5 Documentation - Updated every Friday. Report issues here.
      vBulletin 5 API - Full / Mobile
      Vote for your most annoying bugs.
      I am not currently available for vB Messenger Chats.

      Comment


      • In Omnibus
        In Omnibus commented
        Editing a comment
        FWIW I can reproduce this.

    • #4
      Originally posted by In Omnibus View Post
      You could add the following to your css_additional.css template:

      .module-title h1 {
      color: #000000;
      The problem I have is that that changes the color on all the pages. How would I limit this to just the Help page?

      Comment


      • #5
        Each page has its own CSS Class (technically it should be an ID but I digress). For instance, on this site, the Help page is .page522. You can restrict CSS by page using these classes.

        .page522 .module-title h1 {color: #000;}

        To find your help page's class, view the page source and look at the body tag.

        Code:
        <body id="vb-page-body" class="l-desktop page522 vb-page view-mode" itemscope itemtype="http://schema.org/WebPage" data-usergroupid="5" data-styleid="55">
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud customization and demonstration site.
        vBulletin 5 Documentation - Updated every Friday. Report issues here.
        vBulletin 5 API - Full / Mobile
        Vote for your most annoying bugs.
        I am not currently available for vB Messenger Chats.

        Comment


        • twistsol
          twistsol commented
          Editing a comment
          The page id piece in the CSS is what I was missing. I fixed my site for all three styles this afternoon and everything is happy.

          Thanks again

      • #6
        Thanks Wayne,

        Comment

        Working...
        X