Date post: | 02-Jun-2018 |
Category: |
Documents |
Upload: | hermanjuriq |
View: | 241 times |
Download: | 0 times |
of 12
8/11/2019 Bootstrap Starter Template for Joomla 3 by Nick Savov
1/12
Bootstrap Starter Template for Joomla 3 by Nick Savov, et. al. - 1
Bootstrap Starter Template for Joomla 3 by Nick Savov, et. al.
The mobile-friendly Bootstrap Starter Templateis based off of Joomla's Protostar template, but it
includes a lot more module positions and the new module positions are organized in horizontal
sets. The sets allow you to quickly place modules in a certain position horizontally (e.g. far right),
rather than being constrained to the far left. The Bootstrap Starter Template also includes
snippets/functions to make it faster/easier to customize.
If you have any suggestions for new features, please let me know. I look forward to implementing
good ideas.
Credit: Special thanks to Kyle Ledbetter's work on Protostar and integrating Bootstrap into Joomla!
This starter template would not be possible without that work.
Install and Copy
Go to:
1) Extensions (top menu)2) Extension Manager (sub menu)
1) Choose File . Find the template installation file (e.g. bootstrap_starter_v1.0.0.zip).
2) Upload & Install
8/11/2019 Bootstrap Starter Template for Joomla 3 by Nick Savov
2/12
Bootstrap Starter Template for Joomla 3 by Nick Savov, et. al. - 2
Go to:
1) Extensions (top menu)
2) Template Manager (sub menu)
1) Click on Templates in the side menu
2) Click on Bootstrap starter
8/11/2019 Bootstrap Starter Template for Joomla 3 by Nick Savov
3/12
Bootstrap Starter Template for Joomla 3 by Nick Savov, et. al. - 3
Click on the Copy button.
1) Type your New Template Name. Since the template is used on a web-server, please use only
letters, numbers, dashes, and underscores.
2) Copy Template
After successfully copying the template,Close.
8/11/2019 Bootstrap Starter Template for Joomla 3 by Nick Savov
4/12
Bootstrap Starter Template for Joomla 3 by Nick Savov, et. al. - 4
1) Click on Styles in the side menu
2) Either make the template the default or assign it to certain module positions.
Access the Settings
You can access the settings by clicking on the template style.
8/11/2019 Bootstrap Starter Template for Joomla 3 by Nick Savov
5/12
Bootstrap Starter Template for Joomla 3 by Nick Savov, et. al. - 5
8/11/2019 Bootstrap Starter Template for Joomla 3 by Nick Savov
6/12
Bootstrap Starter Template for Joomla 3 by Nick Savov, et. al. - 6
Once you have the settings as you want them,Save & Close.
8/11/2019 Bootstrap Starter Template for Joomla 3 by Nick Savov
7/12
Bootstrap Starter Template for Joomla 3 by Nick Savov, et. al. - 7
Template Module Positions
Click on Options
1) Enabled
2) Save & Close
8/11/2019 Bootstrap Starter Template for Joomla 3 by Nick Savov
8/12
Bootstrap Starter Template for Joomla 3 by Nick Savov, et. al. - 8
Now you can open up a new browser tab and preview the available module positions, by using
?tp=1 behind your website's URL. For example,
example.org?tp=1 or example.org/contact-us?tp=1
Now you can see all the available module positions. See below for a list as well.
Advanced Trick:
If your template is not set to the default, you can use ?tp=1&templateStyle=xy behind the URL
instead, where xy is equal to your style ID, e.g.:
?tp=1&templateStyle=10 . You can find the Style ID to the right of your template in "Template
Manager: Styles" within the ID column.
The following are all the default available module positions within the template:
debug
position-0
position-1
position-2
position-3
position-4
position-5
position-6position-7
position-8
position-9
position-10
position-11
position-12
8/11/2019 Bootstrap Starter Template for Joomla 3 by Nick Savov
9/12
Bootstrap Starter Template for Joomla 3 by Nick Savov, et. al. - 9
position-13
position-14
footer
topmost-menu
topmost-menu-left
topmost-menu-middle
topmost-menu-middle-left
topmost-menu-middle-righttopmost-menu-right
topinner-menu
topinner-menu-left
topinner-menu-middle
topinner-menu-middle-left
topinner-menu-middle-right
topinner-menu-right
main-menu
main-menu-left
main-menu-middlemain-menu-middle-left
main-menu-middle-right
main-menu-right
top-banner
top-banner-left
top-banner-middle
top-banner-middle-left
top-banner-middle-right
top-banner-rightbottom-banner
bottom-banner-left
bottom-banner-middle
bottom-banner-middle-left
bottom-banner-middle-right
bottom-banner-right
bottom-inner-menu
bottom-inner-menu-left
bottom-inner-menu-middle
bottom-inner-menu-middle-leftbottom-inner-menu-middle-right
bottom-inner-menu-right
footer-top
footer-top-left
footer-top-middle
footer-top-middle-left
8/11/2019 Bootstrap Starter Template for Joomla 3 by Nick Savov
10/12
Bootstrap Starter Template for Joomla 3 by Nick Savov, et. al. - 10
footer-top-middle-right
footer-top-right
footer-bottom
footer-bottom-left
footer-bottom-middle
footer-bottom-middle-left
footer-bottom-middle-right
footer-bottom-rightbottommost-menu
bottommost-menu-left
bottommost-menu-middle
bottommost-menu-middle-left
bottommost-menu-middle-right
bottommost-menu-right
You'll notice that there are sets, e.g. "bottommost" is a set which has "bottommost-menu",
"bottommost-menu-left", "bottommost-middle", etc.
In the above screenshot, there are custom HTML modules assigned to "footer-bottom-left" and
"footer-bottom-middle-right" and menu modules assigned to "bottommost-menu-left" and"bottommost-menu-right".
Thus, the sets allow you to specify which "quadrant" you'd like the modules to appear in or you can
select the whole row if you'd like. The template does all/most of the hard work for you and places
the modules in the appropriate spots that you specify, rather than having everything shift to the left
as a regular template would do.
Also, the topmost menu and the bottommost menu are fixed/floating menus that attach to the top or
bottom of your screen, respectively.
Enabled modules assigned to middle-left and middle-right will only appear if no module is
enabled in the respective "middle" (parent) module position. For example, if you have
"footer-bottom-middle", neither "footer-bottom-middle-left" nor "footer-bottom-middle-right" will
appear.
8/11/2019 Bootstrap Starter Template for Joomla 3 by Nick Savov
11/12
Bootstrap Starter Template for Joomla 3 by Nick Savov, et. al. - 11
Tip #1
If you want you menus to be styled by the template, go to the menu module's Advanced Options
and enter:
1) " nav-pills" for the Menu Class Suffix (note the space before "nav").
2) "_menu" for the Module Class Suffix
Tip #2 (Advanced)
If you want to create some new module positions, open the file
"templates/your_template/index.php" and look for code similar to:
The function, "createConditionalModulePositionTertiarySet()" creates the module position sets.
The first argument (e.g. "topinner-menu") is the name of the set; the second argument is the outer
div CSS class, while the third argument is the inner div CSS class.
After adding the create createConditionalModulePositionTertiarySet() function, add the respective
module positions to the templateDetails.xml. For example:
topinner-menu
topinner-menu-left
topinner-menu-middle
8/11/2019 Bootstrap Starter Template for Joomla 3 by Nick Savov
12/12
Bootstrap Starter Template for Joomla 3 by Nick Savov, et. al. - 12
topinner-menu-middle-left
topinner-menu-middle-right
topinner-menu-right
Tip #3 (Advanced)
Within your template's index.php, you can also use
createConditionalModulePosition($positionName, $spanNum, &$offSetNum) to create singlemodule positions that only show up when there's a module enabled at that position. For example,
you can enter:
createConditionalModulePosition('search_box', 4, NULL)
Then in your templateDetails.xml add:
search_box
The 'search_box' is the name of the module position. The 4 signifies how many spans to skip over.
The template's total width is 12 spans, so this module position would start at the 5th span (relative
to the neighboring module position).
Tip #4 (Advanced)
You can see the functions and how the code works at:
templates/your_template/includes/module_position_set_creator.php
All the code of the template is open-sourced and GPL copyrighted, so feel free to edit it to yourliking. I'd suggest copying and pasting the functions to create new functions, rather than editing
the originals.
Tip #5 (All levels)
Experiment! One of the best ways to learn is tocreate a test siteand experiment. Try something
new, break the code, fix it, start fresh, and do it all over again. That being said, always keep
backups of any work that you want to go back to in case something goes wrong.
Tip #6 (Intermediate to Advanced)
Additional resources:
1) http://twitter.github.com/bootstrap/
2) http://lesscss.org/
http://twitter.github.com/bootstrap/http://lesscss.org/http://lesscss.org/http://twitter.github.com/bootstrap/