These are all the module positions available, except the position "left", "image", "video", and "debug" in the footer.

Note : the positions "image" and "video" are special : you must use them only to display a slideshow background (position "image") or a video on the top of the Content box (position "video").

{gallery}module-positions.jpg{/gallery}

Options for displaying your modules in the "left", "right", "top", "bottom" or "user" positions :

 

  • Without module class suffix : No styling for your list and the links.
  • With the module class suffix " min-height-XXX" you choose a minimum height for your module. You can :

    • put a value in pixels : " min-height-100px" , " min-height-125px" , " min-height-150px" , " min-height-175px" , " min-height-200px" .... until " min-height-1000px"
    • or in percentage of the viewport height : " min-height-10vh", " min-height-15vh", " min-height-20vh" ... until " min-height-100vh"


  • With the module class suffix " vertical-menu" or " horizontal-menu" : to display an additionnal menu. More details on the page "Display your menus".
  • With the module class suffix " no-margin" : you remove the margin inside your module. It's useful if you want displayed an image in a Custom HTML module.
  • With the module class suffix " border" : you add a border around your module with hover effect.
  • With the module class suffix " radius" : you add a rounded corner.
  • With the module class suffix " shadow" : you add a shadow under the module
  • With the module class suffix "color-XX" : you add a background color for your module. 148 colors available. Example " color-maroon" or " color-green"
  • With the Module class suffix "title-centered" : the module title is centered with a border above and below the text (you can't put "title-band" in the same module).
  • With the Module class suffix "text-centered" : the text and title are centered.
  • With the Module class suffix "title-band" : display a dark background under the module title (you can't put "title-centered" in the same module)
  • With the module class suffix "badge-new", "badge-free", "badge-hot", "badge-top", "badge-news", "badge-gift" : to display a badge in the upper right corner of your module.

 

Note : If you choose a background color , the color of the module title will be always White or Black..

Note : You can enter several Module class suffix. Example "shadow color-green badge-top title-centered min-height-200px"

 

148 background colors available :

maroon - #800000
brown - #a52a2a
rosybrown - #bc8f8f
sienna - #a0522d
saddlebrown - #8b4513
chocolate - #d2691e
sandybrown - #f4a460
peru - #cd853f
bisque - #ffe4c4
burlywood - #deb887
tan - #d2b48c
navajowhite - #ffdead
blanchedalmond - #ffebcd
wheat - #f5deb3
darkgoldenrod - #b8860b
goldenrod - #daa520
cornsilk - #fff8dc
whitesmoke - #f5f5f5
white - #ffffff
snow - #fffafa
mistyrose - #ffe4e1
seashell - #fff5ee
linen - #faf0e6
antiquewhite - #faebd7
oldlace - #fdf5e6
floralwhite - #fffaf0
beige - #f5f5dc
ivory - #fffff0
honeydew - #f0fff0
mintcream - #f5fffa
azure - #f0ffff
aliceblue - #f0f8ff
ghostwhite - #f8f8ff
lavenderblush - #fff0f5
lightgray - #f2f2f2
slategrey - #708090
lightslategrey - #778899
grey - #808080
dimgrey - #696969
darkslategrey - #2f4f4f
darkgrey - #444444
black - #000000
silver - #c0c0c0
lightgrey - #d3d3d3
gainsboro - #dcdcdc
tomato - #ff6347
orangered - #ff4500
coral - #ff7f50
lightsalmon - #ffa07a
darkorange - #ff8c00
orange - #ffa500
mediumvioletred - #c71585
deeppink - #ff1493
hotpink - #ff69b4
palevioletred - #db7093
pink - #ffc0cb
lightpink - #ffb6c1
rebeccapurple - #663399
magenta - #ff00ff
lavender - #e6e6fa
darkslateblue - #493d8b
slateblue - #6a5acd
mediumslateblue - #7b68ee
mediumpurple - #9370db
blueviolet - #8a2be2
indigo - #4b0082
darkorchid - #9932cc
darkviolet - #9400d3
mediumorchid - #ba55d3
purple - #800080
darkmagenta - #8b008b
fuchsia - #ff00ff
violet - #ee82ee
plum - #dda0dd
thistle - #d8bfd8
orchid - #da70d6
deepskyblue - #00bfff
blue - #0000ff
cyan - #00ffff
aquamarine - #7fffd4
turquoise - #40e0d0
mediumturquoise - #48d1cc
aqua - #00ffff
paleturquoise - #afeeee
lightcyan - #e0ffff
darkturquoise - #00ced1
cadetblue - #5f9ea0
powderblue - #b0e0e6
lightblue - #add8e6
skyblue - #87ceeb
lightskyblue - #87cefa
steelblue - #4682b4
dodgerblue - #1e90ff
lightsteelblue - #b0c4de
cornflowerblue - #6495ed
royalblue - #4169e1
midnightblue - #191970
navy - #000080
darkblue - #00008b
mediumblue - #0000cd
mediumslateblue - #7b68ee
darkred - #8b0000
firebrick - #b22222
red - #ff0000
indianred - #cd5c5c
lightcoral - #f08080
salmon - #fa8072
darksalmon - #e9967a
lightsalmon - #ffa07a
crimson - #dc143c
ocean - #39947f
olive - #808000
olivedrab - #6b8e23
yellowgreen - #9ACD32
darkolivegreen - #556b2f
greenyellow - #adff2f
chartreuse - #7fff00
lawngreen - #7cfc00
darkgreen - #006400
green - #008000
forestgreen - #228b22
lime - #00ff00
limegreen - #32cd32
lightgreen - #90ee90
palegreen - #98fb98
darkseagreen - #8fbc8f
seagreen - #2e8b57
mediumseagreen - #3cb371
springgreen - #00ff7f
mediumspringgreen - #00fa9a
mediumaquamarine - #66cdaa
lightseagreen - #20b2aa
teal - #008080
darkcyan - #008b8b
cyan - #00ffff
lightcyan - #e0ffff
peachpuff - #ffdab9
papayawhip - #ffefd5
moccasin - #ffe4b5
goldenrod - #daa520
gold - #ffd700
khaki - #f0e68c
lemonchiffon - #fffacd
palegoldenrod - #eee8aa
darkkhaki - #bdb76b
yellow - #ffff00
lightgoldenrodyellow - #fafad2
lightyellow - #ffffe0

General settings

Create easily your Home page without any content (9 positions for your Logo in Home page) and display your background image.

Width

Choose the width of your website and each columns inside the content box.

Logo and Slogan

Display your Logo (text, image or Custom module), and 2 optionnal slogans.

 

35 different fonts are available (safe and Google fonts) with a preview in the drop down list.

 

Not enough choice ! you can easily paste the code of the Google font of your choice in the Custom field. More of 600 fonts available !

Main menu

Content box

Choose the background color of your content box.

Choose the color, font family, font size for your titles and text.

Special button for your address and contact details

You can add a button in the Header (upper right corner) to display easily your address and others details in all your pages.

Social icons

Add the complete url (with http:// ) of your social links.

Block image with text

Here, you can modify the font of the H2 title and the font size of the text.

How to display the Google map in full screen as on the demo ?

I wanted a module very easy to use. So I choose to display the standard Google map and you can create it in less than a minute !

How to publish your google map ?

  • First : you must create a link to this module. But it's not possible to make that with Joomla. So, you must create a new article "google_map". After that, go to the Menu manager and create a new item to this article (link "article --> single article").
  • You have now a link to this article.
  • Install the module "mod_google_map.zip" (you can find it in the package). Edit this module and choose the position "google_map", and don't forget to set the Menu assignement :

    {gallery}google_map.jpg{/gallery}

note : when you publish a module with the position "google_map", the content box isn't loaded.

How to obtain the URL of my Google map ?

In the "simple Google map" you must enter the URL of your map and only that.

Go to the Google maps

Choose your location and click on the "link" icon :


{gallery}google_map_02.jpg{/gallery}

On the new window, copy the URL and paste it on your Joomla module :


{gallery}google_map_03.jpg{/gallery}

note : you must create a google account to add a marker

Drop down menu

You can see this menu in action on the top.

To obtain that, you must select your main menu in module manager and enter these settings :

  • position : "menu"
  • Always show sub-menu items : "yes"
  • no Module class suffix or Menu class suffix

 

 

Top menu

To use it, you must select your menu in module manager and enter these settings :

  • position : "slogan"
  • Always show sub-menu items : "no"
  • no Module class suffix or Menu class suffix

Note : you can use only 1 level of links with this menu and if you use this module position, you can't display the slogan in template manager..

 

Bottom menu

To use it, you must select your menu in module manager and enter these settings :

  • position : "bottom_menu"
  • Always show sub-menu items : "no"
  • no Module class suffix or Menu class suffix

Note : you can use only 1 level of links with this menu.

 

Additional Vertical menu

You can publish an additional vertical menu in the left, right or User module position, like this example on the Right column. The background color of active item is the same as active link in the content part (option in Template manager). If you choose a background color, the links will be white or black. To obtain that, you must :

  • In Module manager, publish a menu in the position "left" or "userX"
  • add the Module class suffix : "vertical-menu"
  • Add a code color if you want a background-color : "color-grey", "color-black", "color-brown", "color-orange", "color-red", "color-olivedrab", "color-violet", "color-cadetblue" or any color of your choice among 148 colors available (see below). The code color must be after "vertical-menu". Example CSS class " vertical-menu color-green"

 

Note : the result is different if you use the module position "user7", "user8" or "user9" (see examples in the end of this page).

 

CSS class : vertical-menu color-grey

CSS class : vertical-menu color-bisque

CSS class : vertical-menu color-orange

CSS class : vertical-menu color-cadetblue

CSS class : vertical-menu color-black

CSS class : vertical-menu color-red

CSS class : vertical-menu color-olivedrab

CSS class : vertical-menu color-violet

CSS class : vertical-menu color-white

CSS class : vertical-menu color-brown

 

Additional Horizontal menu

You can publish an additional horizontal menu in the Top, Bottom or UserX position, like these example below. The background color of active item is the same as active link in the content part (option in Template manager). If you choose a background color, the background color will be white or black. To obtain that, you must :

  • In Module manager, publish a menu in the position "top", "bottom" or "userX"
  • add the Module class suffix : "horizontal-menu"
  • Add a code color if you want a background-color : " color-grey", " color-black", " color-brown", " color-orange", " color-red", " color-olivedrab", " color-violet", " color-cadetblue" or the color of your choice among 148 colors available (see below). The code color must be after "horizontal-menu". Example CSS class " horizontal-menu color-green"

CSS class : horizontal-menu

CSS class : horizontal-menu color-grey

CSS class : horizontal-menu color-bisque

CSS class : horizontal-menu color-orange

CSS class : horizontal-menu color-cadetblue

CSS class : horizontal-menu color-black

CSS class : horizontal-menu color-red

CSS class : horizontal-menu color-olivedrab

CSS class : horizontal-menu color-violet

CSS class : horizontal-menu color-brown

Note : All these menus work without javascript code (pure CSS : no risk of conflict with another module !).

148 background colors available for secondary menu :

maroon - #800000
brown - #a52a2a
rosybrown - #bc8f8f
sienna - #a0522d
saddlebrown - #8b4513
chocolate - #d2691e
sandybrown - #f4a460
peru - #cd853f
bisque - #ffe4c4
burlywood - #deb887
tan - #d2b48c
navajowhite - #ffdead
blanchedalmond - #ffebcd
wheat - #f5deb3
darkgoldenrod - #b8860b
goldenrod - #daa520
cornsilk - #fff8dc
whitesmoke - #f5f5f5
white - #ffffff
snow - #fffafa
mistyrose - #ffe4e1
seashell - #fff5ee
linen - #faf0e6
antiquewhite - #faebd7
oldlace - #fdf5e6
floralwhite - #fffaf0
beige - #f5f5dc
ivory - #fffff0
honeydew - #f0fff0
mintcream - #f5fffa
azure - #f0ffff
aliceblue - #f0f8ff
ghostwhite - #f8f8ff
lavenderblush - #fff0f5
lightgray - #f2f2f2
slategrey - #708090
lightslategrey - #778899
grey - #808080
dimgrey - #696969
darkslategrey - #2f4f4f
darkgrey - #444444
black - #000000
silver - #c0c0c0
lightgrey - #d3d3d3
gainsboro - #dcdcdc
tomato - #ff6347
orangered - #ff4500
coral - #ff7f50
lightsalmon - #ffa07a
darkorange - #ff8c00
orange - #ffa500
mediumvioletred - #c71585
deeppink - #ff1493
hotpink - #ff69b4
palevioletred - #db7093
pink - #ffc0cb
lightpink - #ffb6c1
rebeccapurple - #663399
magenta - #ff00ff
lavender - #e6e6fa
darkslateblue - #493d8b
slateblue - #6a5acd
mediumslateblue - #7b68ee
mediumpurple - #9370db
blueviolet - #8a2be2
indigo - #4b0082
darkorchid - #9932cc
darkviolet - #9400d3
mediumorchid - #ba55d3
purple - #800080
darkmagenta - #8b008b
fuchsia - #ff00ff
violet - #ee82ee
plum - #dda0dd
thistle - #d8bfd8
orchid - #da70d6
deepskyblue - #00bfff
blue - #0000ff
cyan - #00ffff
aquamarine - #7fffd4
turquoise - #40e0d0
mediumturquoise - #48d1cc
aqua - #00ffff
paleturquoise - #afeeee
lightcyan - #e0ffff
darkturquoise - #00ced1
cadetblue - #5f9ea0
powderblue - #b0e0e6
lightblue - #add8e6
skyblue - #87ceeb
lightskyblue - #87cefa
steelblue - #4682b4
dodgerblue - #1e90ff
lightsteelblue - #b0c4de
cornflowerblue - #6495ed
royalblue - #4169e1
midnightblue - #191970
navy - #000080
darkblue - #00008b
mediumblue - #0000cd
mediumslateblue - #7b68ee
darkred - #8b0000
firebrick - #b22222
red - #ff0000
indianred - #cd5c5c
lightcoral - #f08080
salmon - #fa8072
darksalmon - #e9967a
lightsalmon - #ffa07a
crimson - #dc143c
ocean - #39947f
olive - #808000
olivedrab - #6b8e23
yellowgreen - #9ACD32
darkolivegreen - #556b2f
greenyellow - #adff2f
chartreuse - #7fff00
lawngreen - #7cfc00
darkgreen - #006400
green - #008000
forestgreen - #228b22
lime - #00ff00
limegreen - #32cd32
lightgreen - #90ee90
palegreen - #98fb98
darkseagreen - #8fbc8f
seagreen - #2e8b57
mediumseagreen - #3cb371
springgreen - #00ff7f
mediumspringgreen - #00fa9a
mediumaquamarine - #66cdaa
lightseagreen - #20b2aa
teal - #008080
darkcyan - #008b8b
cyan - #00ffff
lightcyan - #e0ffff
peachpuff - #ffdab9
papayawhip - #ffefd5
moccasin - #ffe4b5
goldenrod - #daa520
gold - #ffd700
khaki - #f0e68c
lemonchiffon - #fffacd
palegoldenrod - #eee8aa
darkkhaki - #bdb76b
yellow - #ffff00
lightgoldenrodyellow - #fafad2
lightyellow - #ffffe0