social icons

If you wish to have a set of social icons and a search box at the top right corner of your web pages, this can be accomplished rather easily.

You need to create a separate module for each item, one search box module then the other a social icon module. When you are creating these modules, assign each one to position-0.

If you were to open your web site, you will see them stacked on top of each other. To get them to site side by side next to each other on the same line, you need to add some classes and then some styles that target each module.

Assign a Module Class Suffix to each module

moduleclasssuffixsocialicons

Within Module Manager, when you have the module open for editing, click on the Advanced tab. You will see a place to assign a Module Class Suffix. This term will become a class name that is assigned to the module.

Enter a term in the box. Leave an empty space before the term. If you do not leave a space, the term will be appended to the default class name for that module, in this case it is "custom".

Do this for each of these modules, but use a different term.

Save the modules and open your web page. If you look at the source code for the web page, you will see something like what is shown below:

<div class="header-search pull-right">
    <divclass="custom socialicons">
    ...   
    <div class="finder searchbox">
    ...

Edit the style sheet to target this new class name

 We now need to add styles that target these classes. Open up your custom style sheet, or add styles to the end of your template.css file. Remember to always do a backup before upgrading Joomla, as your files are overwritten and you will need to replace your edits.

.pull-right {width: 40%}
.searchbox {float: right; display: inline; margin-left: 15px;}
.socialicons {float: right; display: inline; margin-left: 15px;padding-top: 10px;}

The above styles first make the .pull-right class a set width that allows more room for these modules to site side by side. The modules float to the right, so the first module will be to the right of the second module. The modules must be in the proper order in Module Manager for this to work.

Edit these styles for smaller screen sizes

You may not like the way these modules behave on more narrow screens. You can create @media styles that target the narrow screens. You may want for the modules to float left rather than right on narrow screens.

@media (max-width: 767px) {
    .searchbox {float: left;}
    .socialicons {float: left;}


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.