Page 1 of 1

[2.8] Bootswatch using Bootstrap 3.0.0! (11 Themes)

Posted: Mon Sep 02, 2013 12:07 am
by BCooper
Hi All!

11 themes for 2.8!!! I slightly cheated but all of the Bootswatch themes should be compatible.

I have modified the default phpMyFAQ 2.8 theme using the styles from Bootswatch 3 http://bootswatch.com using the latest Bootstrap 3.0.0 http://getbootstrap.com.

This is for the front end only, same backend design.

Bootstrap 3.0.0 requires some class updates in the code as well as the theme, for a couple of simple to install themes check out my other post viewtopic.php?f=9&t=15444.


(Step 1) Download Theme
Cerulean.PNG
Default Bootswatch - Cerulean
bootswatch-v1.zip

(Step 2) Install Base Theme

Extract the folder from the zip to phpmyfaq/assets/template/.

Go to Administration -> Configuration -> Main Configuration.

Change Template set to be used to Bootswatch.

Save Configuration.


(Step 3) Set a theme (If you want to change from the default)

Go to http://bootswatch.com/

Download the bootstrap.min.css for the style you like and save it to phpmyfaq/assets/template/bootswatch/css/ overwriting the default (Cerulean).

Currently the footer is set to a light colour (see image above) but you can change it to any colour you like, here is how:

Edit phpmyfaq/assets/template/bootswatch/css/style.min.css at the start of the actual code you will see the light colour footer:

#footer{background-color:#eee}

To change it to the darker colour you can try:

#footer{background:#28343b}

Or pick a new colour for a theme and share it here! I can added suggested colours to themes here.

And save.


(Step 4) Code Changes

Edit phpmyfaq\inc\PMF\Helper\Category.php change the class in line 95 from:

Code: Select all

"\n%s<ul class=\"nav nav-list\">\n%s<li%s>",
to:

Code: Select all

"\n%s<ul class=\"nav nav-pills nav-stacked nav-indent\">\n%s<li%s>",
Edit phpmyfaq\inc\PMF\Language.php change the class in line 249 from:

Code: Select all

$output    = '<select class="language" name="' . $id . '" id="' . $id . '" size="1"' . $onChange . ">\n";
to:

Code: Select all

$output    = '<select class="form-control language" name="' . $id . '" id="' . $id . '" size="1"' . $onChange . ">\n";
Edit phpmyfaq\inc\PMF\Sitemap.php change the class in line 125 from:

Code: Select all

$writeLetters = '<ul class="nav">';
to:

Code: Select all

$writeLetters = '<ul class="nav navbar-nav">';

(Step 5) Enjoy
Should be good to roll!


Revision History
v1 - Initial release

Re: [2.8] Bootswatch using Bootstrap 3.0.0! (11 Themes)

Posted: Tue Sep 03, 2013 8:52 am
by Thorsten
Hi,

we're working on phpMyFAQ 2.9 using Bootstrap 3 as base :-)

bye
Thorsten

Re: [2.8] Bootswatch using Bootstrap 3.0.0! (11 Themes)

Posted: Fri Oct 11, 2013 8:59 am
by Zoker
Everything that should be able to be opened (like Comments, Mobile menu, related FAQs) are not working with the bootswatch theme :/

So all the toggle functions do not work!

Re: [2.8] Bootswatch using Bootstrap 3.0.0! (11 Themes)

Posted: Thu Jan 30, 2014 6:34 pm
by shuaiscott
If you lock the whole thing, then the login page doesn't compile the theme. I don't think the indexLogin.tpl was created. I made my own. Feel free to include in your phpMyFAQ installation.

Thanks Thorsten and BCooper for your work!

Re: [2.8] Bootswatch using Bootstrap 3.0.0! (11 Themes)

Posted: Tue Jul 15, 2014 9:50 am
by WhiteCookie
the comment form box not working!