Joomla Templates Club 406,261 posts

[dpchap015 Friend dpchap015Join date: September 2011Posts: 300Downloads:75Uploads:57 Thanks: 1 Thanked: 24 times in 1 posts]

#191304

hi…
i want to add follow buttons in my music site at language switch position(near search)..just like the template argo..
check this atttachment and link.
http://joomla-templates.joomlart.com/ja_argo/index.php/en/

what to do ???????

---

Attachments:

1. 

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

#508832

Hi dpchap015,

You can get it simply with few steps below:

1. Go to administration >> set Editor – None in Default Editor option of Global Configuration.

2. Create a Custom HTML module named (i.e) “Follow” at “followus” position with the AddThis follow embed codes

3. Open templatesja_muzictplsblocksheader.php file, and put below code at 86th line:

<!-- // Follow Us -->
<?php if($this->countModules('followus')): ?>
<div id="followus-block" class="dropdown parent span2 nav-connect">
<a data-toggle="dropdown" href="#" class=" dropdown-toggle">
<i class="icon-plus"></i><?php echo "FollowUs"; ?>
</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>
</div>
<?php endif; ?>
<!-- //End of Follow Us -->


4. Create a custom.css file at templates/ja_muzic/css/ path, and put below overridden css styles into:

/*Add Argo's followus style on JA Muzic template*/

#followus-block.span2 {
width: 75px;
float: right;
}

#followus-block {
margin-top: 15px;
}

#followus-block a.dropdown-toggle {
color: #fff;
border-top: 0;
text-shadow: none;
text-transform: uppercase;
text-decoration: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

#followus-block .dropdown-menu {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 0;
min-width: 200px;
width: 270px;
height: 50px;
margin-top: 10px;
}

#followus-block .t3-module {
margin-bottom: 10px;
}

#followus-block .nav-child.dropdown-menu:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: white;
position: absolute;
top: -6px;
}

#followus-block .custom {
margin: 7px 0 0 7px;
}

5. Save and the result.

Note Make sure you backup the files before editing.

[dpchap015 Friend dpchap015Join date: September 2011Posts: 300Downloads:75Uploads:57 Thanks: 1 Thanked: 24 times in 1 posts]

#508875

thanks… but buttons comes when i click the followus.. not on hover…..:((
need onhover property same like menu`s

+ it will use the space of the search container.
when we click in the search button

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

#509183

Hi dpchap015,

The dropdown of Follow us module on JA Argo template is depended on the hover effect of our T3 Mega Menu, because the layout of JA Argo mainnav can allow us to use the <ul>, <li> tags of dropdown menu.

So that, using the click effect on Follow us module on JA Muzic template is most potential solution i can suggest you in this case.

[carlos andres cruz Friend carlos andres cruzJoin date: November 2012Posts: 11Downloads:0Uploads:8 Thanks: 7]

#509364

Excuse me, I did everything step by step, but nothing happened. Do you think is because my site have development mode enabled. In that case how is the directions. ThankYou.

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

#509386

Hi Carlos,

No. It is not related to enabled development. Indeed, you should assign the Custom HTML module (containing AddThis codes) to followus position, not newsticker.

Please follow my steps carefully again and don’t forget to inform the result.

[dpchap015 Friend dpchap015Join date: September 2011Posts: 300Downloads:75Uploads:57 Thanks: 1 Thanked: 24 times in 1 posts]

#509641

<em>@Leo Burnetts 393857 wrote:</em><blockquote>Hi dpchap015,

The dropdown of Follow us module on JA Argo template is depended on the hover effect of our T3 Mega Menu, because the layout of JA Argo mainnav can allow us to use the <ul>, <li> tags of dropdown menu.

So that, using the click effect on Follow us module on JA Muzic template is most potential solution i can suggest you in this case.</blockquote>

hi Leo Burnetts
the on onhover option is not possible
then can we use slide right or left like the search button. when we click on it it will slide left and the search box carry the follow button in it.
so how to use this property for follow/share buttons.

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

#509675

Hi dpchap015,

In my opinion, it will be better if you put the +FollowUs button appear between Search box and Login. By that way, the Search box will not be overlapped by +FollowUs button when clicking on and we will save time without writing more js scripts.

[dpchap015 Friend dpchap015Join date: September 2011Posts: 300Downloads:75Uploads:57 Thanks: 1 Thanked: 24 times in 1 posts]

#509708

<em>@Leo Burnetts 394514 wrote:</em><blockquote>Hi dpchap015,

In my opinion, it will be better if you put the +FollowUs button appear between Search box and Login. By that way, the Search box will not be overlapped by +FollowUs button when clicking on and we will save time without writing more js scripts.</blockquote>

this is not the solution..
i already put it between those two buttons..but
requirement is how we can make it like the search button ..
dont worry about js.. just guide me how to do it?;)

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

#509783

Hi dpchap015,

<blockquote>but requirement is how we can make it like the search button ..</blockquote>

The effect of left slide on Seach box is defined by the css styles:

.wrap.toolbar #head-search-block form .search input:focus {
width: 230px;
background-image: url("../images/ico/ico-search-hover.png");
color: #fff
}

.wrap.toolbar #head-search-block form .search input {
background: transparent url("../images/ico/ico-search.png") no-repeat 12px center;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: all .4s linear;
-moz-transition: all .4s linear;
-o-transition: all .4s linear;
transition: all .4s linear;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 0;
width: 10px;
height: 30px;
text-indent: 20px;
margin: 8px 0 0;
}

in templatesja_muziccsstemplate.css file.

But, actually the FollowUs doesn’t contain the element of form so that you want need to use the additional scripts to get that effect. As i mentioned above that this request is not under our limited customization support policies, you should work or hire an experienced developer to help you handling this customization.

[dpchap015 Friend dpchap015Join date: September 2011Posts: 300Downloads:75Uploads:57 Thanks: 1 Thanked: 24 times in 1 posts]

#509923

<em>@Leo Burnetts 394644 wrote:</em><blockquote>Hi dpchap015,

The effect of left slide on Seach box is defined by the css styles:

.wrap.toolbar #head-search-block form .search input:focus {
width: 230px;
background-image: url("../images/ico/ico-search-hover.png");
color: #fff
}

.wrap.toolbar #head-search-block form .search input {
background: transparent url("../images/ico/ico-search.png") no-repeat 12px center;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: all .4s linear;
-moz-transition: all .4s linear;
-o-transition: all .4s linear;
transition: all .4s linear;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 0;
width: 10px;
height: 30px;
text-indent: 20px;
margin: 8px 0 0;
}

in templatesja_muziccsstemplate.css file.

But, actually the FollowUs doesn’t contain the element of form so that you want need to use the additional scripts to get that effect. As i mentioned above that this request is not under our limited customization support policies, you should work or hire an experienced developer to help you handling this customization.</blockquote>

i know about this css main thing is that js. anyway thanks
thanks.. :-[

[Author]

Posts