Joomla Templates Club 406,261 posts

[cityrumors Friend cityrumorsJoin date: October 2013Posts: 18Downloads:0Uploads:11 Thanks: 6 Thanked: 1 times in 1 posts]

#192656

Hi guys!
I have a question:
In my website with fubix template i would like to add a menu in a new potition like the top right menu in ja_magz template (The menu with search login and social button) http://joomla-templates.joomlart.com/ja_magz/index.php/it/

I have created the new position in the template, i have created the new menu in menu manager, but i dont’ know how can insert the icon instead of text, and how can insert the module (login or search, or social) on the mouse over effect.

Can you help me to create this menu?

Thankyou!!!!!

Ps
you have news for the last update of fubix fot the joomla 3.2?
How long before you think you can get out of the new version?

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#514128

Perhaps may be of assistance to you.

[cityrumors Friend cityrumorsJoin date: October 2013Posts: 18Downloads:0Uploads:11 Thanks: 6 Thanked: 1 times in 1 posts]

#514139

Hi TomC,
thank you for your reply!
I’ve already read that tutorial, and i have insert the new module position.

Now Now I wonder, how i can insert the icon instead of text, and how can insert the module (login or search, or social) on the mouse over effect?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#514140

As you are wanting to duplicate the diaplay/effect of that top menu on the JA Magz template, my first suggestion to you would be to utilize JA’s DEMO BUILDER to examine the settings and configurations of that particular menu module (within JA Magz) and then try to reproduce it within your own template.

It CAN be done … I’ve done it with various items in the past. It may take a little trial-and-error – and patience through the process – but it can be accomplished.

1 user says Thank You to TomC for this useful post

1. phong nam

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#514177

@cityrumors: It will take much time of you to apply the top right module style of JA Magz template to your current JA Fubix site. However, I still would like to outline the steps you can do to reach this requirement:

– Download and extract the JA Magz template package on the localhost.
– Copy the below codes of templatesja_magztplsblocksheader.php file to templates/ja_fubix/tpls/blocks/header.php :

<div class="span4 head-social pull-right">
<ul class="nav">
<!-- Language Switcher -->
<?php if ($this->countModules('languageswitcherload')) : ?>
<li id="languageswitcher-block" class="dropdown languageswitcher-block <?php $this->_c('languageswitcherload') ?>">
<jdoc:include type="modules" name="<?php $this->_p('languageswitcherload') ?>" style="raw" />
</li>
<?php endif ?>
<!-- // Language Switcher -->

<!-- USER, FOLLOW US -->
<?php if($this->countModules('followus')): ?>
<li class="dropdown nav-connect">
<a data-toggle="dropdown" href="#" class=" dropdown-toggle">
<i class="icon-share"></i>
</a>
<div class="nav-child dropdown-menu">
<div class="dropdown-menu-inner">
<jdoc:include type="modules" name="<?php $this->_p('followus') ?>" style="T3Xhtml" />
</div>
</div>
</li>
<?php endif; ?>
<!-- //USER, FOLLOW US -->

<!-- LOGIN -->
<?php if($this->countModules('login')): ?>
<?php $user = JFactory::getUser(); ?>
<li class="dropdown nav-user<?php echo ((!$user->get('guest')) ? ' logged' : ''); ?>">
<a data-toggle="dropdown" href="#" class=" dropdown-toggle">
<i class="icon-user"></i>
<?php echo ((!$user->get('guest')) ? '' : JText::_('')); ?>
</a>
<div class="nav-child dropdown-menu">
<div class="dropdown-menu-inner">
<jdoc:include type="modules" name="<?php $this->_p('login') ?>" style="T3Xhtml" />
</div>
</div>
</li>
<?php endif; ?>
<!-- //LOGIN -->

<!-- HEAD SEARCH -->
<?php if ($this->countModules('head-search')) : ?>
<li class="dropdown nav-search">
<a data-toggle="dropdown" href="#" class=" dropdown-toggle">
<i class="icon-search"></i>
</a>
<div class="nav-child dropdown-menu">
<div class="dropdown-menu-inner">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>
</div>
</li>
<?php endif ?>
<!-- //HEAD SEARCH -->
</ul>
</div>

– Copy the mod_languages folder in templatesja_magzhtml to the same path on ja_fubix template.

– Create a custom.css file at templates/ja_fubix/css/ path and put below css styles of top right module:


.head-social .nav {
float: right;
border-left: solid 1px #eaeaea
margin-top: 0 !important;
}
.head-social .nav > li {
float: left !important;
}
.head-social .nav > li > a,
.head-social .nav > li > .mod-languages > a {
border-left: none !important;
border-right: solid 1px #eaeaea
color: #8A8A8A
display: block;
padding: 15px 19px !important;
position: relative;
}
.head-social .nav > li > a:after,
.head-social .nav > li > .mod-languages > a:after {
position: absolute;
width: 100%;
height: 1px;
content: "";
background: #fff
display: none;
bottom: -1px;
right: 0;
}
.head-social .nav > li.open > a:after,
.head-social .nav > li.open > .mod-languages > a:after {
display: block;
}
.head-social .nav > li.open > a:hover,
.head-social .nav > li.open > a:focus,
.head-social .nav > li.open > a:active,
.head-social .nav > li.open > .mod-languages > a:hover,
.head-social .nav > li.open > .mod-languages > a:focus,
.head-social .nav > li.open > .mod-languages > a:active {
color: #1ea1fc
}
.head-social .nav > li > ul.dropdown {
display: none;
}
.head-social .nav > li.open > ul.dropdown {
display: block;
}
.head-social .dropdown-menu {
border-color: #eaeaea
border-top: none;
left: auto;
min-width: 250px !important;
right: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.head-social .nav-connect .dropdown-menu,
.head-social .nav-user .dropdown-menu,
.head-social .nav-search .dropdown-menu {
margin-top: 1px;
min-width: 240px !important;
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
border: solid 1px #eaeaea
border-top: none;
}
.head-social .languageswitcher-block .dropdown-menu {
margin-top: 1px;
min-width: 400px !important;
padding: 15px !important;
line-height: 0;
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.2);
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
border: solid 1px #eaeaea
border-top: none;
}
.head-social .languageswitcher-block .lang-inline li {
display: block;
float: left;
margin: 0;
padding: 0;
width: 33.3%;
}
.head-social .languageswitcher-block .lang-inline li.lang-active a {
background: #eee
border-color: #eaeaea
color: #0379cb
font-weight: bold;
}
.head-social .languageswitcher-block .lang-inline li a {
border: 1px solid #fff
display: block;
font-size: 12px;
line-height: 1;
margin: 0;
padding: 7px 10px;
text-align: left;
overflow: hidden;
}
.head-social .languageswitcher-block .lang-inline li a:hover,
.head-social .languageswitcher-block .lang-inline li a:focus,
.head-social .languageswitcher-block .lang-inline li a:active {
background: #eee
border-color: #eaeaea
}
.head-social .languageswitcher-block .lang-inline li a img {
float: left;
margin: 0 5px 0 0;
padding: 0;
vertical-align: middle;
}
.head-social .dropdown-menu-inner {
padding: 20px;
}
.head-social .input-append .add-on,
.head-social .input-prepend .add-on {
background: none;
border-color: #eaeaea
border-right: none;
color: #666
text-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.head-social input.btn {
width: 98%;
padding: 10px 0;
}
.head-social .addthis_toolbox {
text-align: center;
}
.head-social .addthis_toolbox > a {
width: 32px;
height: 32px;
line-height: 32px;
display: inline-block;
margin: 0 2px;
}
.head-social .addthis_toolbox > a i {
color: #fff
}
.head-social .addthis_toolbox > a.addthis_button_facebook {
background: #3b5998
}
.head-social .addthis_toolbox > a.addthis_button_google_plusone_share {
background: #dd4b39
}
.head-social .addthis_toolbox > a.addthis_button_twitter {
background: #00aeef
}
.head-social .addthis_toolbox > a.addthis_button_linkedin {
background: #007bb6
}
.head-social .t3-module {
margin-bottom: 0;
}
.head-social #login-form {
margin-bottom: 0;
margin-top: 10px;
}
.head-social #login-form .checkbox input {
margin-top: 3px;
}
.head-social #login-form ul li a {
background: url("../images/dot.png") no-repeat left center;
border: none;
color: #666
padding: 2px 0 2px 10px !important;
}
.head-social #login-form ul li a:hover,
.head-social #login-form ul li a:focus,
.head-social #login-form ul li a:active {
background-image: url("../images/dot-hover.png");
color: #1ea1fc
}
.head-social .nav-search form {
margin-bottom: 0;
}
.head-social .search label {
display: none;
}


– Create the suitable modules at the defined position in header block (head-search, login, followus, languageswitcherload).

Note: This is quite complicated customization task so that I would like to suggest to work with a developer if you are not familiar with HTML and CSS.

1 user says Thank You to phong nam for this useful post

1. cityrumors

[cityrumors Friend cityrumorsJoin date: October 2013Posts: 18Downloads:0Uploads:11 Thanks: 6 Thanked: 1 times in 1 posts]

#514225

Leo burnetts… you are the best!!! 😉
I followed all your suggestions, and all work perfectly!

I only have added the custom module position (head-search, login, followus, languageswitcherload) in a templateDetails.xml
and now the only thing to do, are the final touches to css…
Very very thanks Leo!!!!!!

http://weby.geminit.it/cr_new/

Now we all wait for the update of fubix for joomla 3.2

1 user says Thank You to cityrumors for this useful post

1. JA Developer

[Author]

Posts