Announcement

Collapse
No announcement yet.

Calendar Pop-up - flatpickr-calendar - transparent background problem

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

  • Calendar Pop-up - flatpickr-calendar - transparent background problem

    When I click on the date input for an event, the little calendar that pops-up is transparent and hard to read. I've found the culprit - in the web inspector if I uncheck the box for the variable i circled in yellow, it fixes it. But I have no idea where to find this in the Style/Var Editor. Anybody know?


    Click image for larger version

Name:	Capture.JPG
Views:	23
Size:	177.7 KB
ID:	4422017
    Attached Files
    Current forum: https://www.tearjerkers.net/new_forum/
    Testing vBulletin5 (on cloud for now) as a replacement candidate: https://testforum.tearjerkers.net

  • #2
    .flatpickr-calendar {
    background: {vb:stylevar content_background};

    You can either edit the CSS or the Stylevar.

    You can locate the CSS for each selector or element by searching in Templates for the selector(s) and element(s).

    Comment


    • #3
      deleted.
      Last edited by zkengle; Fri 13th Sep '19, 5:12am.
      Current forum: https://www.tearjerkers.net/new_forum/
      Testing vBulletin5 (on cloud for now) as a replacement candidate: https://testforum.tearjerkers.net

      Comment


      • #4
        Originally posted by In Omnibus View Post
        .flatpickr-calendar {
        background: {vb:stylevar content_background};

        You can either edit the CSS or the Stylevar.

        You can locate the CSS for each selector or element by searching in Templates for the selector(s) and element(s).
        I'm on 'the cloud', so I get the feeling that I don't have access to edit those elements? I've found nothing in the Style Variables Editor.
        Current forum: https://www.tearjerkers.net/new_forum/
        Testing vBulletin5 (on cloud for now) as a replacement candidate: https://testforum.tearjerkers.net

        Comment


        • #5
          You can access the Style Variables in the AdminCP under Styles -> Style Manager. Select Style Variable Editor from the Choose Action drop down. It is using the content_background style variable. This is white in the default style, not transparent.

          Easiest way to resolve this is to set the content_background color to white instead of transparent. With your current style, this should have no noticeable change.

          Or you can edit your Custom CSS within Site Builder by clicking on Style tab and selecting the CSS Editor in that tool. Place the following code in your css_additional.css template:

          Code:
          .flatpickr-calendar {background-color: white !important;}
          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
          I am not currently available for vB Messenger Chats.

          Comment


          • #6
            Perfect! Thanks again, Wayne!
            Current forum: https://www.tearjerkers.net/new_forum/
            Testing vBulletin5 (on cloud for now) as a replacement candidate: https://testforum.tearjerkers.net

            Comment

            Related Topics

            Collapse

            Working...
            X