Announcement

Collapse
No announcement yet.

Change the "user column" in postview

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

  • Change the "user column" in postview

    He,
    how i can increase the width of the column that show the user avatar and his field in postview ?
    I search in style variable but i cannot find nothing to do this.
    Thank u for the help.

  • #2
    Change the value of the width in this CSS and put it in your css_additional.css template.

    Code:
    .l-col__fixed-3, .l-row__fixed--left > .l-col__fixed-3 {
        width: 160px;
        float: left;
    }
    Change the value of the left-margin in this CSS code and put it in your css_additional.css

    Code:
    .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
        margin-left: 160px;
        margin-right: 0;
    }
    The width in the first should match the left-margin in the second.

    If your site is RTL, then switch the margin values in the second code example.
    Last edited by Wayne Luke; Mon 3 Feb '20, 10:08am.
    Translations provided by Google.

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

    Comment


    • #3
      Thank u for help Wayne Luke it seems work but do not center avatar and other info, u can see this:

      Click image for larger version

Name:	Appunti Windows-1.jpg
Views:	66
Size:	17.5 KB
ID:	4433447

      Comment


      • #4
        You have to change both values that I posted above. The centering is based on the width value in the first code fragment. The background color is based on the margin value in the second code fragment. If they are not the same, it won't look correct.

        This is how it looks on vBulletin 5.5.6 with both values set to 320px:
        Click image for larger version

Name:	2020-02-03_11-38-30.png
Views:	44
Size:	30.3 KB
ID:	4433450

        Translations provided by Google.

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

        Comment


        • #5
          OK, that work perfect in desktop, but in mobile do not works.

          Click image for larger version

Name:	photo_2020-02-04_08-37-35.jpg
Views:	55
Size:	84.9 KB
ID:	4433523

          Comment


          • #6
            The mobile view should have a horizontal user info box not a vertical one. The vertical box only shows on larger screens. I am not sure why you are seeing a vertical box here. What other customizations have you made?
            Translations provided by Google.

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

            Comment


            • #7
              No other, it's the first time i'add something in my forum installed 3 days ago.
              http://www.vwgolfcommunity.com/vb
              If i add that code ad additional_css then the user box do not work horizontal, but vertical.

              PS now i removed that code from the themes.

              Comment


              • #8
                Try this CSS:

                Code:
                @media screen and (min-width: 1024px) {
                    /* Styles go here */
                    .l-col__fixed-3, .l-row__fixed--left > .l-col__fixed-3 {
                        width: 240px;
                        float: left;
                    }
                
                    .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
                        margin-left: 240px;
                        margin-right: 0;
                    }
                
                    }
                }
                Translations provided by Google.

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

                Comment


                • #9
                  It works fine Wayne !!!

                  Thank u very much !!!

                  Comment

                  Related Topics

                  Collapse

                  Working...
                  X