Announcement

Collapse
No announcement yet.

Styles not loaded

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

  • Styles not loaded

    SOLVED

    I've created two different styles (light/dark) for users, but their dark style choice seems not be loaded automatically after login. Problem is, my custom style css files loaded in footer at last and overwrite default style css. Only default style (light) will be loaded.

    Which js method or function can I call, to update the user style when site is loaded completely?
    Last edited by BulliM; Thu 12th Oct '17, 10:43pm.

  • #2
    Your custom CSS should be linked within the css_additional.css template so they are loaded in the proper order.

    To call your CSS after the site is loaded, you would need to write your own Javascript. We use jQuery. They may have an addon or function that can be used.
    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


    • #3
      I'll try, Wayne Luke.

      Comment


      • #4
        If you load the custom css in the footer then there will be a flashing of the default style before the custom css is loaded. You should load it as early as possible (in head_include template). To prevent css_additional to override your custom css, then you'd have to make your css selectors to have higher specificity than the ones in css_additional. Then it wouldn't matter if css_additional is loaded last.

        To make your css selectors with higher specificity, prefix all your selectors with #htmlTag. That's the id of the <html> tag.

        GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

        Comment


        • #5
          Originally posted by Wayne Luke View Post
          Your custom CSS should be linked within the css_additional.css template so they are loaded in the proper order.
          Works not. I use @import for three style files, but dark style is not loaded automatically. It will loaded only if you change style in footer-dropbox.

          Originally posted by Glenn Vergara View Post
          You should load it as early as possible (in head_include template).
          They're included earlier in login_form template.

          Originally posted by Glenn Vergara View Post
          YTo prevent css_additional to override your custom css, then you'd have to make your css selectors to have higher specificity than the ones in css_additional. Then it wouldn't matter if css_additional is loaded last.

          To make your css selectors with higher specificity, prefix all your selectors with #htmlTag. That's the id of the <html> tag.
          I can try, but I don't think, that is a solution, because style files loaded correctly. I can see in inspector console (F12). Problem is, that users styleid (db->user->styleid) not works on my site. vBulletin ignores the styleid and load always default style - in my case 'narrow light'.

          Think I need a function to load other styles by javascript when site is loaded completely. Maybe by changing dropbox-choice in footer? That should work, because only that works manually, too.

          Comment


          • #6
            Do you have the setting allowing users to change their styles set to Yes? Settings -> Options -> Style & Language Options.

            The styleid parameter works by cookie as well. So if they visit their Account Settings page, it will be overwritten. Best option is to change the style on the Account Settings page.
            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


            • #7
              Yes I did. And both styles are enabled, too. There is just a problem in the way, they'll loaded. Give me some days. I'll see, how it works on other vBulletin styles.

              Comment


              • #8
                Generally, styles shouldn't have code that loads in the footer of the site.
                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


                • #9
                  Generally, styles should't have dozens of style variables you have to change with minimal effects. Do you have any idea, how much time is needed for styling? There was no other way.

                  Comment


                  • #10
                    css_additional.css should be used for any css changes changes. That's how the system is built.
                    MARK.B | vBULLETIN SUPPORT

                    TalkNewsUK - My vBulletin 5.5.2 Demo
                    AdminAmmo - My Cloud Demo

                    Comment


                    • #11
                      I tried that. Has exactly that effect, that not one of my changes are displayed. Not one! Looks identical to css_additional.css is empty.

                      Comment


                      • #12
                        Solved by AJAX & PHP.

                        Comment


                        • #13
                          I would stress that css_additional.css DOES work - I have used it on literally hundreds of vB5 sites and it always works.
                          If it wasn't working for you, then there is something local to your set up preventing it from doing so.
                          MARK.B | vBULLETIN SUPPORT

                          TalkNewsUK - My vBulletin 5.5.2 Demo
                          AdminAmmo - My Cloud Demo

                          Comment


                          • #14
                            Sure it's probably my fault again. I am just a user, try to style his vBulletin without changing hundrets of variables. I've tried css_additional.css and I'll try again, I promise.

                            Comment


                            • #15
                              Changing the variables is the easiest way to style the software. That is why they are there so people without CSS knowledge can create custom styles.

                              Using the default templates, the css_additional.css is loaded last so it overwrites the CSS that we apply. If this doesn't work for you then you may want to compare your header with the default header to see if you're missing lines of code.
                              Last edited by Wayne Luke; Fri 13th Oct '17, 10:08am.
                              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

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...
                              X