Announcement

Collapse
No announcement yet.

Horizontal Postbit Layout

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #16
    No, no.

    3.X.X so very easy to find experts in turkey. vB5 impossible. I can't find anyone to make the arrangements I want.

    (google translate)

    Click image for larger versionName:	Taslak.pngViews:	1Size:	44.5 KBID:	16744

    Comment


      #17
      Try adding this custom css:

      Code:
      .l-desktop .b-userinfo__additional-info-block {
          position: absolute;
          right: 0;
          top: 20.5px;
      }
      
      .l-desktop .b-post .b-sharing-menu {
          bottom: 5px;
      }
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


      • semihcannet
        semihcannet commented
        Editing a comment
        thank you for your interest.
        the forum began to become more beautiful.
        But Can't be 2 rows. He's right next to him.

        Google Translate.

      • glennrocksvb
        glennrocksvb commented
        Editing a comment
        Can't fully understand what Google translation says.

      #18
      Okey,

      Right now;
      Click image for larger version

Name:	1.png
Views:	188
Size:	23.1 KB
ID:	16758

      I want;
      Click image for larger version

Name:	2.png
Views:	166
Size:	23.3 KB
ID:	16759

      Google Translate & MS Paint

      Comment


        #19
        Try using this code and replacing the first code I posted.

        Code:
        .l-desktop .b-post .b-userinfo__additional-info {
            display: block;
        }
        
        .l-desktop .b-userinfo__additional-info-block {
            position: absolute;
            right: 0;
            top: 25px;
        }
        
        .l-desktop .b-post .b-sharing-menu {
            bottom: 5px;
            right: 15px;
        }
        
        .l-desktop .b-meter {
            position: absolute;
            right: 80px;
            top: 6px;
        }
        ​​​​​​​
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


        #20
        Add this code:
        Code:
        .l-desktop .b-sharing-menu__item {
            display: inline-block;
        }
        I will contact you about donation in PM.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #21
          Originally posted by glennrocksvb View Post
          I will contact you about donation in PM.
          Okey.

          Finally;
          Click image for larger version

Name:	Taslak.png
Views:	185
Size:	119.9 KB
ID:	16779

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            The profile fields have absolute position in CSS in order to change its location. Due to this, it cannot automatically adjust the alignment based on the length of the text. I recommend changing the "Datestamp Display Option" to "Normal" in "AdminCP > Settings > Options > Date and Time Options" so that it will always show the actual date and not Today or Yesterday.

          #22
          Wonderful and distinctive
          Click image for larger version

Name:	2019-03-07_4-39-04.jpg
Views:	167
Size:	29.8 KB
ID:	17110

          Comment


            #23
            You have another template to use.
            Click image for larger version  Name:	fetch?id=17048&d=1551783159.png Views:	2 Size:	26.2 KB ID:	17245




            https://vbmods.rocks/forum/vbulletin...ame-in-postbit

            Google Translate

            Comment


              #24
              Glenn, hello again, how are you?

              This posbit layout is very good for computer. But mobile is not very good.

              How do I make this part invisible on mobile?

              (Google Translate
              Click image for larger version  Name:	11.png Views:	0 Size:	25.4 KB ID:	21133

              Click image for larger version  Name:	12.jpg Views:	0 Size:	35.4 KB ID:	21134

              Comment


                #25
                So glad I stumbled upon on this one. I've never been a fan of the left hand user-info.... this will help me get back to what we had in 4.2.5...

                (the bumping warning came up! Nice!)

                Comment


                  #26
                  How hard would it be to toggle the left hand vs horizontal css calls based on a user profile field value?

                  I added a CustomField as a radio button (table userfield, column field18, possible values "Left" and "Horizontal") and have tried a few things to get this to work, but this goes a bit beyond what I've done with templating....

                  My thought was to add a statement like this below to css_additional.css and only render the override if it's set to "horizontal" in the profile.

                  If that works, I might do the same to add a "Large Print" option for my aged customers...

                  Code:
                  <vb:if condition="$userInfo['field18'] == 'Horizontal'">
                     ---> all the horizontal css overrides   <---
                  </vb:if>​
                  That isn't working... Can I ask what the syntax would be to evaluate the table value directly?

                  I know the easy route would be to have a left and a horizontal style option.... but imagine a site allowed users to customize their palette to their favorite sports team.... that's more or less what we have, except that it's railroads.....

                  Comment


                    #27
                    The $userInfo object is not available in css_additional.css. You would need to call the fetchUserinfo method from the user API to get the profile info of the viewing user. But I don't recommend doing the logic in css_additional.css template (or any CSS template for that matter) because adding dynamic data to it based on user info of the viewing user means you wouldn't be able to store CSS as files.

                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      #28
                      What I recommend is creating a template hook in header_head hook location and fetching user info and then dynamically adding "postbitLayout--horizontal" class to <html> tag via JS based on the user's profile field value. Then in css_additional.css template, prepend all CSS selectors with .postbitLayout--horizontal so that the horizontal postbit layout will only be applied if that class is present.
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

                      Comment


                        #29
                        So I tried Plan D....

                        1) Created a new template css_add_horiz.css which has all the elements with the !important; tag set
                        2) Inside the Header template, invoke fetchUserInfo just after the header_head hook
                        3) Follow that with a <vb:if statement which tests for the profile value, and invokes {vb:cssExtra css_add_horizontal.css} when true.

                        Toggling within the user settings, this works flawlessly right now.

                        Comment


                          #30
                          Awesome!

                          Are you checking if userid > 0 before doing all those logic? Because it should not do anything for guests.
                          Helpful? Donate. Thanks!
                          Buy me a coffeePayPal QR Code
                          Fast VPS Host for vBulletin:
                          A2 Hosting & IONOS

                          Comment

                          Users Viewing This Page

                          Collapse

                          There is 1 user viewing this forum topic.

                          • Guest Guest

                          Latest Posts

                          Collapse

                          Working...
                          X
                          Searching...Please wait.
                          An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                          Please push the back button and reload the previous window.'
                          An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                          Please push the back button and reload the previous window.'
                          An internal error has occurred and the module cannot be displayed.
                          There are no results that meet this criteria.
                          Search Result for "|||"