Announcement

Collapse
No announcement yet.

Articles home page

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

  • Articles home page

    Hi, i'd like to ask about 3 points in Articles home page setting:


    Click image for larger version

Name:	vbpic.png
Views:	1
Size:	185.6 KB
ID:	4388089

    1- how to make the article photo as large as the article text (to have the size of the red rectangle) ?
    2- how to make the article title as long as the article text ? we can see the waste of blank..
    3- this is not a question but we can see in the red ellipse that the line is not clean when we make 2 or 3 column layout

    i'm very grateful for your help..

  • #2
    1) you have to resize it with css.

    2) Not sure why it is breaking up like that. What version is this?

    3) Again, what version is this?

    https://forums.rabidbadger.io/articles

    The CSS that I used on that site is posted in the forums.
    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
      Hi, thank you very much for your time, i'm using 5.4, and i get these 3 points just after a clean install,

      i already tested your CSS code, and i get this:

      Click image for larger version  Name:	pic2.png Views:	1 Size:	240.4 KB ID:	4388094

      as we can see :
      - only the pic in the first article is stretched : pixels
      - the layout is not clean as your site https://forums.rabidbadger.io/articles

      Comment


      • #4
        Don't know what the problem is with a screenshot. You will have to work with the CSS to get a solution that works for you. My solution should work without issues but I haven't tested it anywhere except that site. I am just trying to provide customization examples so people know what can be done with the software.
        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


        • #5
          the same issues will definitely appears when one test articles page with 2 or 3 columns, may be the VB developers should find solution in the next update to make it more clean, repair titles issue and make it easy to just resize a pic in a more logical appearance

          Comment


          • #6
            If you believe there is a bug and want the developers to look at it, please log it in the tracker (link at the top).
            MARK.B | vBULLETIN SUPPORT

            TalkNewsUK - My vBulletin 5.4.2 Demo - FEATURING "ROUTE BY NODE"!
            AdminAmmo - My Cloud Demo

            Comment


            • #7
              Originally posted by bendiesel View Post
              the same issues will definitely appears when one test articles page with 2 or 3 columns, may be the VB developers should find solution in the next update to make it more clean, repair titles issue and make it easy to just resize a pic in a more logical appearance
              Originally posted by Mark.B View Post
              If you believe there is a bug and want the developers to look at it, please log it in the tracker (link at the top).
              This is actually three different JIRAs....
              • "Make it more clean" is a JIRA though it would receive very little traction because it is vague and an opinion. As presented it is not something that can actually be worked on.
              • "repair titles issue" is a second JIRA but it appears to be limited to his site and/or language for some reason.
              • Allowing the admin to set the size of preview images or "resizing the image" is the third JIRA.
              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


              • #8
                the purpose to be more clean is just about the line not "straight" in areas encircled by red ellipses

                Comment


                • #9
                  The item marked as #3 in the first post is caused by the top border applied to each item. You can see it more clearly here:

                  Click image for larger version

Name:	Screenshot_20.png
Views:	1
Size:	116.3 KB
ID:	4388277

                  You can adjust this by setting the top border to 0px. Below is the code that sets it:

                  Code:
                  .conversation-list.stream-view .list-item {
                      border-top: 1px solid #C8CCCE;
                  Just override this CSS.
                  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


                  • #10
                    The title wrapping is caused by this CSS:

                    Code:
                    .conversation-list.stream-view .list-item-header .post-header {
                        width: 60%;
                    }
                    This is for mobile device compatibility. Changing it may break the display on devices with smaller screens. However, you can probably use a media query to adjust it for the desktop only.
                    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


                    • #11
                      You can easily target desktop without worrying about the device width in the media query by simply prefixing the CSS rule with .l-desktop which is the class in the body tag. vB5 dynamically adds l-desktop, l-small, l-xsmall classes based on device width on page load, window resize and orientation change events.

                      Code:
                      .l-desktop .conversation-list.stream-view .list-item-header .post-header {
                          width: 80%;
                      }

                      AutoLinker-vB5+vBCloud | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Video Attachments Player | Blur Replies for Guests | Drag/Drop Upload | Topic Starter Ribbon | Topic AJAX Auto-Update

                      Comment


                      • #12
                        Originally posted by bendiesel View Post
                        Hi, i'd like to ask about 3 points in Articles home page setting:


                        Click image for larger version  Name:	vbpic.png Views:	1 Size:	185.6 KB ID:	4388089

                        1- how to make the article photo as large as the article text (to have the size of the red rectangle) ?
                        2- how to make the article title as long as the article text ? we can see the waste of blank..
                        3- this is not a question but we can see in the red ellipse that the line is not clean when we make 2 or 3 column layout

                        i'm very grateful for your help..
                        - second and third issues were perfectly fixed ! Dears Wayne Luke and Glenn Vergara i'm really grateful for your precious time, deep thanks !

                        - for the first issue i'm almost embarrassed to ask you again if there is a simple code to resize the image as long as the article text without stretching and loosing pixels,,

                        God bless you

                        Comment


                        • #13
                          There is no way to resize the image without stretching. It shouldn't lose pixels.
                          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


                          • #14
                            Originally posted by bendiesel View Post
                            Hi, thank you very much for your time, i'm using 5.4, and i get these 3 points just after a clean install,

                            i already tested your CSS code, and i get this:

                            Click image for larger version Name:	pic2.png Views:	1 Size:	240.4 KB ID:	4388094

                            as we can see :
                            - only the pic in the first article is stretched : pixels
                            - the layout is not clean as your site https://forums.rabidbadger.io/articles
                            OK, but i tried to use your code in different ways (2 columns, 3 columns, 1 full width and 2 columns...) and i get always the first image of the first article stretched:

                            first case:


                            Click image for larger version  Name:	1.png Views:	1 Size:	202.8 KB ID:	4388347

                            second case:

                            Click image for larger version  Name:	2.png Views:	1 Size:	211.2 KB ID:	4388348

                            Comment


                            • #15
                              Don't set a fixed height on images. Set height: auto; in the CSS to preserve the aspect ratio.

                              AutoLinker-vB5+vBCloud | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Video Attachments Player | Blur Replies for Guests | Drag/Drop Upload | Topic Starter Ribbon | Topic AJAX Auto-Update

                              Comment

                              Working...
                              X