[RC] bootlike for phpBB 3.2.8

For style authors to post and receive feedback on 3.2.x styles still in development. Any development styles you wish to use on your live board should be installed with caution!
User avatar
oakhearted
Registered User
Posts: 112
Joined: Tue Apr 16, 2019 10:10 am
Location: Queensland, Australia
Name: Cheyne Mayfield
Contact:

Re: [RC] bootlike for phpBB 3.2.8

Post by oakhearted »

pit-PL wrote: Wed Jan 12, 2022 12:52 pm This style is based on Bootstrap so it does not work with almost all extensions.
Any idea for the quickstyle thingy too btw?
User avatar
pit-PL
Registered User
Posts: 3212
Joined: Sat Nov 21, 2009 12:24 pm

Re: [RC] bootlike for phpBB 3.2.8

Post by pit-PL »

If you are not familiar with Bootstrap framework, my suggestion would be to to choose a different style.
User avatar
oakhearted
Registered User
Posts: 112
Joined: Tue Apr 16, 2019 10:10 am
Location: Queensland, Australia
Name: Cheyne Mayfield
Contact:

Re: [RC] bootlike for phpBB 3.2.8

Post by oakhearted »

pit-PL wrote: Wed Jan 12, 2022 1:25 pm 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
Registered User
Posts: 145
Joined: Tue Jan 25, 2005 8:22 am
Location: integramod.com
Contact:

Re: [RC] bootlike for phpBB 3.2.8

Post by 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!
Post Reply

Return to “[3.2.x] Styles in Development”