Bootstrap 2.5.1 - observations

manticore789

Vanilla Forums 3.1

I'm probably one of a handful of people that uses the Bootstrap theme here on VF. I've used it on other CMS platforms and have always had a good experience with it.

So once I found out that it was available here, I set it up as my theme, after a bit of hair pulling and teeth gnashing to get it installed.

There are a couple of things that I've observed, and this is mainly from a mobile user viewpoint, though it does spill over to the desktop.

1) On the mobile, the profile image for a user sits outside the content area. In so doing, it wastes a whole load of visual real estate underneath the image. It also squashes up the content area, making it look unreadable in parts.

IMHO, the image should be accommodated in the content area next to the user name. The goal being to maximise the mobile screen to the very left edge. On the desktop, there are left and right margins in play, though I don't think they will be affected.

2) I'd like to see the right side panel. increased to 250px. Currently it looks too narrow. I think it's set at 200 (best guess).

3) Somewhere in the CSS code, images cannot be placed on the same line as text. We use very small images for flags that we like to see on the same line. I understand the reasoning, but it's nothing a manually placed < br > tag can't fix. 

4) We are also starting to use Pockets, and adding custom code. We have some Bootstrap code for running an automated slideshow. The basics of the code works as intended, but the script includes some calls for min.CSS and min.JS that tips my website upside down. I use the Darkly CSS (which is a dark theme), so when the code for the slider is enabled, it turns the site background to white, and disables the menu inadvertently. So I can't really use it until that is sorted.

I borrowed code from the following URL, and rejigged it to suit for my image selections.

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel2&stacked=h

Apart from that, Bootstrap rocks, though I am not a fan of white themes at all.. lol

Any pointers would be appreciated.

R_J

It's far more easy to give support if you can share a link to the site where you have that problems

manticore789

Oops, yes a link would be useful.

http://shorturl.at/iFXY8

R_J

1. You have that in your CSS which is what shoves the image to the left:

.MessageList .Item-Header .PhotoWrap, .MessageList.Conversation .Meta .PhotoWrap {
   position: absolute;
   top: -1px;
   left: -65px;

}
.Item .Author .PhotoWrap {

   float: left !important;
   padding-right: 15px;

}
.MessageList .Item-Header .PhotoWrap, .MessageList.Conversation .Meta .PhotoWrap {

   position: absolute;
   top: -1px;
   left: -65px;

}

You should be able to prevent that with the following

.MessageList .Item-Header .PhotoWrap,
.MessageList.Conversation .Meta .PhotoWrap,
.Item .Author .PhotoWrap {
   position: static;
}

R_J

2. The panel is 292px wide which is calculated as 25% of 1170px

You can make

.container {
    width: 1300px;
}
.page-sidebar {
    30%
}

manticore789

Thank you @R.J, that will do it.

Cheers.

manticore789

Well that was partially successful. The profile image is now placed successfully into the content body. Yay.

The vacant space on the left margin when viewed on the mobile is still there, due to the profile image hanging out in the breeze in the comments section below. When a new comment is added, no problem - the profile image is placed correctly in the content.

I wonder how we can get around this? Other than that, Bootstrap is really cool.

R_J

That url shortener from above doesn't link to your forum any more. Do you know that the "on mobile" experience is the same as the experience on a resized desktop browser? So you would be able to make a small screen shot, mark what you are talking about and together with a link to the page I (or somebody else) would be able to give support.

To be true: I didn't understood your issues 3 & 4 and that last problem above... 😌