Bootstrap Starter Template for Joomla 3 by Nick Savov

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


2/12


Go to:

1) Extensions (top menu)

2) Template Manager (sub menu)

1) Click on Templates in the side menu

2) Click on Bootstrap starter


3/12


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.


4/12


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.


5/12



6/12


Once you have the settings as you want them,Save & Close.


7/12


Template Module Positions

Click on Options

1) Enabled

2) Save & Close


8/12


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


9/12


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


10/12


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.


11/12


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


12/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/

Documents

Bootstrap Starter Template for Joomla 3 by Nick Savov