Styles not loaded

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • BulliM
    Senior Member
    • Oct 2012
    • 497

    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 12 Oct '17, 10:43pm.
  • Wayne Luke
    vBulletin Technical Support Lead
    • Aug 2000
    • 73981

    #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 demonstration site.
    vBulletin 5 API

    Comment

    • BulliM
      Senior Member
      • Oct 2012
      • 497

      #3
      I'll try, Wayne Luke.

      Comment

      • glennrocksvb
        Former vBulletin Developer
        • Mar 2011
        • 4011
        • 5.7.X

        #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.

        Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

        Comment

        • BulliM
          Senior Member
          • Oct 2012
          • 497

          #5
          Originally posted by Wayne Luke
          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
          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
          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

          • Wayne Luke
            vBulletin Technical Support Lead
            • Aug 2000
            • 73981

            #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 demonstration site.
            vBulletin 5 API

            Comment

            • BulliM
              Senior Member
              • Oct 2012
              • 497

              #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

              • Wayne Luke
                vBulletin Technical Support Lead
                • Aug 2000
                • 73981

                #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 demonstration site.
                vBulletin 5 API

                Comment

                • BulliM
                  Senior Member
                  • Oct 2012
                  • 497

                  #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

                  • Mark.B
                    vBulletin Support
                    • Feb 2004
                    • 24286
                    • 6.0.X

                    #10
                    css_additional.css should be used for any css changes changes. That's how the system is built.
                    MARK.B
                    vBulletin Support
                    ------------
                    My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
                    My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

                    Comment

                    • BulliM
                      Senior Member
                      • Oct 2012
                      • 497

                      #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

                      • BulliM
                        Senior Member
                        • Oct 2012
                        • 497

                        #12
                        Solved by AJAX & PHP.

                        Comment

                        • Mark.B
                          vBulletin Support
                          • Feb 2004
                          • 24286
                          • 6.0.X

                          #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
                          ------------
                          My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
                          My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

                          Comment

                          • BulliM
                            Senior Member
                            • Oct 2012
                            • 497

                            #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

                            • Wayne Luke
                              vBulletin Technical Support Lead
                              • Aug 2000
                              • 73981

                              #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 13 Oct '17, 10:08am.
                              Translations provided by Google.

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

                              Comment

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