MyBB Community Forums

Full Version: BootBB - Responsive Multicolor MyBB Theme
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
@arhavili, if you need direct help, you may PM me temporary access to your forum admin panel to check ..
I don't know if someone already answered this... but there is a way to fix the Myalerts Popup?

[Image: e6LULOb.png]

That white space looks bad
how can i change the top menu colour? loving this Theme
(2020-03-21, 04:55 PM)alv4 Wrote: [ -> ]I don't know if someone already answered this... but there is a way to fix the Myalerts Popup?

[Image: e6LULOb.png]

That white space looks bad

Yeah, anyone can fix It?
(2020-04-04, 03:48 PM)numanme Wrote: [ -> ]how can i change the top menu colour? loving this Theme

If you mean the background of the header, you can add something like that at the end of global.css:

.navbar-default {
background-color: red;
}

(2020-04-04, 04:03 PM)undasein Wrote: [ -> ]
(2020-03-21, 04:55 PM)alv4 Wrote: [ -> ]I don't know if someone already answered this... but there is a way to fix the Myalerts Popup?

[Image: e6LULOb.png]

That white space looks bad

Yeah, anyone can fix It?

To fix this, add at the end of global.css this:

table { width: 100% }
(2020-04-04, 08:13 PM)panayot Wrote: [ -> ]
(2020-04-04, 03:48 PM)numanme Wrote: [ -> ]how can i change the top menu colour? loving this Theme

If you mean the background of the header, you can add something like that at the end of global.css:

.navbar-default {
    background-color: red;
}

(2020-04-04, 04:03 PM)undasein Wrote: [ -> ]
(2020-03-21, 04:55 PM)alv4 Wrote: [ -> ]I don't know if someone already answered this... but there is a way to fix the Myalerts Popup?

[Image: e6LULOb.png]

That white space looks bad

Yeah, anyone can fix It?

To fix this, add at the end of global.css this:

table { width: 100% }

Thank you 😉
no the text menu colour
I found the videos did not look right on a mobile phone, so I made them responsive. Like this
Added some code to the global.css.

go to Themes then BOOTBB then global.css add this to the bottom


/** start Responsive YouTube Embed  **/

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
}

/** End Responsive YouTube Embed  **/ 

Then go to Templates look for BOOTBB Templates click on this, then look for Video MyCode Templates open every video template and add this just before the video script

<div class="video-container">

just need a way to make all images responsive

@numanme, thank you for your contribution. 

To make images posted via [img] tag responsive, edit mycode_img template and make the class like this:

class="mycode_img img-responsive"


I researched your idea about the videos and after reading this decided to use javascript instead because I want to limit video size on bigger screens to 800px (otherwise it takes all space)

I added https://raw.githubusercontent.com/davatr...fitvids.js to images/bootbb/js/ folder and also addedd this code to headerinclude template:

<!-- Make videos responsive - https://github.com/davatron5000/FitVids.js -->
<script type="text/javascript" src="{$theme['imgdir']}/js/jquery.fitvids.js"></script>
<script>
	$(document).ready(function(){
		// Target the iframe parent div
		var bvc = $(".bootbb-video-container");
		bvc.css("max-width", "800px");
		bvc.fitVids();
	});
</script>
A DIV tag should be added before and after the iframe in Video MyCode templates like this:

<div class="bootbb-video-container"><iframe>...</iframe></div>


I will be adding image and video responsive tweaks to the next version of bootbb so make sure your changes to Video MyCode do not conflict with the javascript tweak.

Here is how it will work:

https://mybb.panayot.com/showthread.php?tid=5
BootBB v 5 is available for download

Change Log
- modified global.css to change font-size to percentages. This way if body font-size is changed, all elements also change proportionately.

- enabled auto resizing of videos and images ([img] and [video] BB codes) in posts when viewd on smaller screens. You need to upload the file images/bootbb/js/jquery.fitvids.js. Affected templates are: headerinclude, mycode_img, video_*

- Important: This version of BootBB will work best with MyBB 1.8.22. If you use old version of MyBB, find an old build of BootBB that is compatible with it!
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31