Joomla Templates Club 406,261 posts

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#191295

How do I replace the Follow Us & Login Form and even add additional buttons.

CHANGE:
In particular, I would like to add multiple buttons in the header in place of the current Follow Us & Login nav links. For the links, I want to use custom HTML modules.

KEEP:
I also would like the buttons to be hidden when viewed portrait on mobile devices.

Please provide instructions and required code.

Thanks in Advance 🙂

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#509068

Hi there,

Sorry for this late response, somehow I missed this thread.

The Follow us is just a custom HTML module, you can see this user guide for more info: http://joomlart.com/documentation/joomla-templates/ja-argo#custom-html. and check section 5. Position: login for the login module.

Did you try to assign your own module to these positions?

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#509097

If you create a custom HTML module using the Follow Us position, it creates a drop-down menu with the same “Follow Us” text in the bar. I want to use my own title and I do not want it to be a drop-down menu, but instead a direct link from the text or icon I choose to display in the top bar (by way of custom html module).

Like Mashable (http://snag.gy/p5oTu.jpg) I would like to display Facebook, Twitter and Google+ icons in my top nav that link directly to a page with all of my social media profile links. As for the member register and login, like Mashable, I would like it to be a modal instead of a drop-down. I can only do both if I have control of what I can display in the top bar by way of custom HTML modules.

Lastly, the Mashable search disappears when you click off of it (mobile experience). I would like the same, as currently, when you click into the JA Argo search, you have no choice/option to hide the search when on a mobile device (you are stuck..which is not an ideal user experience).

I look forward to receiving your solutions.

Thanks in Advance 🙂

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#509901

Patiently waiting…is there a solution?

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

#510399

Hi joomdude808,

We are really sorry for the late response on your request. As you know, your request is related to customizing the module and our template layout that generally is not under our limited customization support policies.

In this case, we will still guide in details how to get the social links on the main navigation like Mashable. But, it will be better that you should find an exeperienced developer who has time and qualification enough to help you handling on next similar customization requests.

Well, you can backup the files and follow the steps below carefully:

1. Open templatesja_argotplsblocksheader.php file, replace the definition codes of FollowUs and Login (54-87th) with the codes of social link module definition:

<?php if ($this->countModules('social-link')) : ?>
<!-- HEAD SEARCH -->
<div id="social-link-block" class="social-link pull-right">
<jdoc:include type="modules" name="<?php $this->_p('social-link') ?>" style="raw" />
</div>
<!-- //HEAD SEARCH -->
<?php endif ?>


2. Go to Module Manager >> Create a Custom HTML at social-link position. Then put below AddThis follow buttons format:

<!-- AddThis Follow BEGIN -->
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="joomlart"></a>
<a class="addthis_button_twitter_follow" addthis:userid="joomlart"></a>
<a class="addthis_button_instagram_follow" addthis:userid="joomlart"></a>
<a class="addthis_button_youtube_follow" addthis:userid="joomlart"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51fbcd3a05926764"></script>
<!-- AddThis Follow END -->


Change the userID to your social account ID. Make sure that you set Editor – None to Default Editore option of Global configurations before saving the content of above Custom HTML module.

3. Download my attached file below. Then move 2 images to templates/ja_argo/images/ path on your server.

In addition, open the attached css file named “social-link.css” and copy its css styles into templates/ja_argo/css/custom.css file.

4. You can compare your result with my attached image below.

Note: I suggest you just display 4 follow buttons to fit the section width of main navigation on JA Argo.

<blockquote>I would like the same, as currently, when you click into the JA Argo search, you have no choice/option to hide the search when on a mobile device (you are stuck..which is not an ideal user experience).</blockquote>

You can hide the search module on mobile view by putting below css styles into custom.css file too:

@media (max-width: 479px) {
.head-search {
display: none;
}

---

Attachments:

1. 

1. social_link_like_mashable.rar

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#511723

First i want to say thank you for providing such detailed instructions, unfortunately what you provided is not wanted I am looking to implement. What I attempted to communicate is that I want change the social and login into modules that give me full control to incorporate links to page, files, modals, whatever else I would want to choose. These links would be provided by the custom html field of each module.

So to Mashable as I mentioned in my earlier posts. If you go to the page and click on the top social nav buttons, it takes you to the social follow page (http://mashable.com/2011/11/18/follow-mashable/) and when you click on the top profile nav button, it opens a modal pop-up (http://snag.gy/ISAh2.jpg). I would like both functionality, more importantly, the ability to interchange and use how ever I choose.

So in short, I want to replace the JA Argo top social and profile modules with custom html modules.

You help is greatly appreciated.

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

#511783

Hi joomdude808,

<blockquote>What I attempted to communicate is that I want change the social and login into modules that give me full control to incorporate links to page, files, modals, whatever else I would want to choose. These links would be provided by the custom html field of each module</blockquote>

Indeed, you can change the userID of social profiles in the social link (Custom HTML) module i suggested above or try on one of the Social Joomla extensions that allows you to fully controll the incorporated links to pages, files you want.

<blockquote> I would like both functionality, more importantly, the ability to interchange and use how ever I choose.</blockquote>

The simple idea is creating a single article page containing all social profile link of categories/topics, but in order to get the poppup login, you should hire a Joomla developer to help you handling the javascript customization as i mentioned. Because, you can see that Mashable devs customized this feature by themself on their WordPress site, not Joomla.

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#511787

We still are not seeing eye-to-eye on what I am trying to accomplish. Perhaps this will better explain what I am trying to accomplish…

I would like to remove the existing social and login module and replace them with modules that I have created. So that I can have full control as to how they are displayed and function when hovered and clicked.

How can I accomplish this —- Replace existing social and login modules with two modules that I have created

Thanks in Advance 🙂

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

#511793

Hi,

<blockquote>How can I accomplish this —- Replace existing social and login modules with two modules that I have created</blockquote>

You just simply go to Module Manager, find and disable the modules named: Follows and Login. Then you can assign 2 modules of you to followus and login position.

[joomdude808 Friend joomdude808Join date: May 2013Posts: 64Downloads:3Uploads:0 Thanks: 7]

#512135

Please check…as that does not work. There is a need to modify (even change the name of the module name) the module code (blocks and CSS)

If you attempt to add a custom HTML module in the Follow Us or User modules, the module will place the output into a UL List (as it is coded into the template blocks that way).

Please provide code to revise header template block and associated/new CSS for current Follow Us and User modules.

Many Thanks 🙂

[Abdurrahim ALICI Friend Abdurrahim ALICIJoin date: September 2014Posts: 1Downloads:0Uploads:0]

#512136

thank you ………..

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

#512140

Hi joomdude808,

You can send me PM with the site url and a illustrated screenshot of how you want the Follow us to display like. I will check and give you css styles edits if needed.

[Author]

Posts