[RC] bootlike for phpBB 3.2.8

[oakhearted]

This style is based on Bootstrap so it does not work with almost all extensions.

Any idea for the quickstyle thingy too btw?

[pit-PL]

If you are not familiar with Bootstrap framework, my suggestion would be to to choose a different style.

[oakhearted]

If you are not familiar with Bootstrap framework, my suggestion would be to to choose a different style.

Thanks for the help. I wanted a bootstrap like forum lol ^^"

[Helter Skelter]

if I understand correctly your looking for a quick style changer?
My phpBB3.0.15 style, BS_Spacelab uses bootswatch css and will work well with this style. It uses stylesheets from bootswatch.com. You can see the various stylesheets here: https://integramod.com/_dev/phpBB3.0.15/index.php
Keep in mind they will look different in this theme because my style is phpBB3.0.X and based off of subsilver2 but you can see the colors and decide if this is what you want.

to add it to this style, upload the css files and bootstrap_style_switcher.js

OPEN
styles/bootlike/template/overall_header.html

FIND

Code: Select all

</head>

BEFORE, ADD

Code: Select all

<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_cerulean.css" title="Cerulean" data-bs-theme="Cerulean" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_cyborg.css" title="Cyborg" data-bs-theme="Cyborg" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_darkly.css" title="Darkly" data-bs-theme="Darkly" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_flatly.css" title="Flatly" data-bs-theme="Flatly" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_journal.css" title="Journal" data-bs-theme="Journal" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_minty.css" title="Minty" data-bs-theme="Minty" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_morph.css" title="Morph" data-bs-theme="Morph" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_pulse.css" title="Pulse" data-bs-theme="Pulse" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_quartz.css" title="Quartz" data-bs-theme="Quartz" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_sketchy.css" title="Sketchy" data-bs-theme="Sketchy" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_slate.css" title="Slate" data-bs-theme="Slate" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_spacelab.css" title="Spacelab" data-bs-theme="Spacelab" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_superhero.css" title="Superhero" data-bs-theme="Superhero" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_united.css" title="United" data-bs-theme="United" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_vapor.css" title="Vapor" data-bs-theme="Vapor" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_yeti.css" title="Yeti" data-bs-theme="Slate" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_litera.css" title="Litera" data-bs-theme="Spacelab" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_lumen.css" title="Lumen" data-bs-theme="Superhero" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_lux.css" title="LUX" data-bs-theme="United" />
<link rel="stylesheet preload" type="text/css" href="{T_THEME_PATH}/bootstrap_solar.css" title="Solar" data-bs-theme="Vapor" />
<script src="{T_TEMPLATE_PATH}/bootstrap_style_switcher.js"></script>

OPTIONAL - This will allow the navbar to change colors with the different css files
FIND

Code: Select all

		<div class="card-body p-1 px-md-2 px-lg-3">

INLINE, FIND

Code: Select all

"card-body

INLINE, AFTER, ADD

Code: Select all

 bg-primary

OPEN
styles/bootlike/template/navbar_header.html

FIND

Code: Select all

				<li class="nav-item dark-mode">
					<a class="nav-link" href="javascript:;" title="{$LIGHT_MODE}" data-bs-theme-value="dark" role="switch">
						<i class="fa fa-sun-o fa-fw" aria-hidden="true"></i>
					</a>
				</li>

AFTER, ADD

Code: Select all

				<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa fa-paint-brush"></i></a>
				  <ul class="dropdown-menu cs-dropdown">
					<li class="dropdown-item"><a class="nav-tcy" href="#" onclick="setActiveStyleSheet('Cerulean'); return false;">Cerulean</a></li>
					<li class="dropdown-item"><a class="nav-tco" href="#" onclick="setActiveStyleSheet('Cyborg'); return false;">Cyborg</a></li>
					<li class="dropdown-item"><a class="nav-tcp" href="#" onclick="setActiveStyleSheet('Darkly'); return false;">Darkly</a></li>
					<li class="dropdown-item"><a class="nav-tcb" href="#" onclick="setActiveStyleSheet('Flatly'); return false;">Flatly</a></li>
					<li class="dropdown-item"><a class="nav-tcl" href="#" onclick="setActiveStyleSheet('Journal'); return false;">Journal</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('Litera'); return false;">Litera</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('Lumen'); return false;">Lumen</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('LUX'); return false;">LUX</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('Minty'); return false;">Minty</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('Morph'); return false;">Morph</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('Pulse'); return false;">Pulse</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('Quartz'); return false;">Quartz</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('Sketchy'); return false;">Sketchy</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('Slate'); return false;">Slate</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('Solar'); return false;">Solar</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('Spacelab'); return false;">Spacelab</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('Superhero'); return false;">Superhero</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('United'); return false;">United</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('Vapor'); return false;">Vapor</a></li>
					<li class="dropdown-item"><a class="nav-tcr" href="#" onclick="setActiveStyleSheet('Yeti'); return false;">Yeti</a></li>
				  </ul>
				</li>

If you decide to keep all stylesheets, this can be a long dropdown list and may be difficult to access fully on some devices. You can set this dropdown to a max height of 50% of the viewport and make it scrollable.
OPEN
styles/bootlike/theme/custom.css

FIND

Code: Select all

@media (max-width: 991.98px) {

BEFORE, ADD

Code: Select all

.cs-dropdown {
  max-height: 50vh;
  overflow-y: scroll;
}

SAVE FILES AND DELETE CACHE
I cant add the files here so you can dl them here https://integramod.com/files/bootlike.zip


*EDIT I just realized this thread is 2 years old...lol
I will leave my post anyways because it is a good style and with the combination of the light/dark selector plus the extra stylesheets, it could be a favorite of nearly everyone because its now 38 different styles!