Shape 5

Joomla Templates => Risen Hope - Club => : ccvid August 30, 2014, 08:42:34 PM



: Social Icon Links
: ccvid August 30, 2014, 08:42:34 PM
I installed the siteshaper and have been slowly conforming the website to my own design.  Somehow I can't figure out how to get the social icons working.  Siteshaper has them in the "bottom_row3_1" module position, so I'm guessing they were in the custom html module, but somehow I lost them. 

How can I get the social icon links working?


: Re: Social Icon Links
: mikenicoll August 30, 2014, 08:54:41 PM
Hello,

Here is the default coding for the module. Just replace the links as needed.

:
<ul class="address_ul">
<li><i class="ion-ios7-location"></i>123 Corporate Street<br/>
Bigtownville, CO 12345</li>
<li><i class="ion-ios7-telephone"></i>123-555-1212</li>
<li><i class="ion-ios7-email"></i>[email protected]</li>
</ul>
<a href="javascript:;" class="social_icon ion-social-facebook"></a>
<a href="javascript:;" class="social_icon ion-social-twitter"></a>
<a href="javascript:;" class="social_icon ion-social-googleplus"></a>
<a href="javascript:;" class="social_icon ion-social-rss"></a>
<a href="javascript:;" class="social_icon ion-social-pinterest"></a>


: Re: Social Icon Links
: ccvid August 31, 2014, 06:29:30 AM
Thanks for the weekend reply!  I tried this code but Joomla's "Custom HTML" module keeps kicking it back out... so I don't know how to use it without installing a separate module.


: Re: Social Icon Links
: mikenicoll August 31, 2014, 02:04:28 PM
Hello,

Change your editor to "None" in the Global Configuration, and also be sure that Super User - Text Filtering is enabled. That is the only thing that would affect the use of this code.


: Re: Social Icon Links
: sneadm September 02, 2014, 01:57:08 PM
Had the same problem, this fixed it.  Now can't find where to put in the link values.  Seems to be missing from the Theme specific page where it usually is.  I've looked around but can't seem to find them.


: Re: Social Icon Links
: mikenicoll September 02, 2014, 04:34:13 PM
Hello,

Just replace the href="" with your own URL in between the quotes.


: Re: Social Icon Links
: ccvid September 02, 2014, 09:00:34 PM
Thanks!  The text filter made no difference for me... I defaulted to the "Editor - none" option like you suggested and the code worked wonderfully!  I also changed my default editor back to the TinyMCE and the code still works... as long as I don't go back into the module I'm guessing...


: Re: Social Icon Links
: sneadm September 03, 2014, 05:11:40 AM
Seems like a step backwards but certainly works, thanks.  I also found a solution to the editor problem, put a
:
&nbsp;
between the close of the
:
<a>
tag and the
:
</a>
.


: Re: Social Icon Links
: mikek September 03, 2014, 07:10:30 AM
Hello,

That's correct, putting anything inside of the element will leave it there, a space is a good option for this. Unfortunately, this is an editor problem and won't change until the core editor is updated to the latest version.


: Re: Social Icon Links
: ccvid September 03, 2014, 09:49:42 AM
Will the space replace the logo in the social icon link?  For example... I put an F in the empty spot for the facebook link.  Sure enough there was a "F" in the blue box link.  But it was my F, not the Facebook logo F.

Ben


: Re: Social Icon Links
: sneadm September 03, 2014, 10:56:12 AM
My links look like this
:
<a class="social_icon ion-social-pinterest" href="http://">&nbsp;</a>
  I still get the icon showing.


: Re: Social Icon Links
: ccvid September 03, 2014, 11:00:34 AM
Cool!  Thanks!


: Re: Social Icon Links
: mikenicoll September 03, 2014, 10:00:14 PM
Let us know if you have any further questions!


: Re: Social Icon Links
: umek September 28, 2014, 01:07:14 AM
How about the links for youtube and instragram

<a href=" " class="social_icon ion-social-youtube">[/url]
<a href=" " class="social_icon ion-social-instagram">[/url]

the youtube one shows a small grey logo, while instagram isn't available.

how can i override the files to get the same results?


: Re: Social Icon Links
: mikek September 29, 2014, 09:24:14 AM
Hello,

We only stylize specific ones. If you need to add more you would have to add specific css, ie: background colors and paddings for those.


: Re: Social Icon Links
: winstart October 02, 2014, 03:56:12 AM
where can i find the actual logo's or class, in order to be able to add a linkedin logo


: Re: Social Icon Links
: mikek October 02, 2014, 07:38:08 AM
Hello,

The social icons just use Ion Icons, all the available icons are found here:

http://ionicons.com/


: Re: Social Icon Links
: ccvid October 02, 2014, 09:41:27 AM
I created an android icon in case anyone else needs a copy... I see Ionicons has one too, but I like this one better...


: Re: Social Icon Links
: mikenicoll October 03, 2014, 12:53:07 AM
Thanks for posting that :) I am sure others will find it useful!


: Re: Social Icon Links
: winstart October 03, 2014, 04:48:00 AM
but does the template uses these icons, i can find the class but there only the colour of the background is defined. Not the image that is loaded. Thougth being clever and changed the name of the linkedin to rss, but in the frontend the rss logo still appears
In other words, where can i define the image that is loaded in the class



: Re: Social Icon Links
: mikek October 03, 2014, 07:09:21 AM
Hello,

We don't provide styling for every ion icon class, just the basic social links that are shown on the demo. You would have to create a new class for linked in. You can make a copy of one of the existing ones in editor.css


: Re: Social Icon Links
: ccvid October 03, 2014, 08:51:04 AM
I only took advantage of the icons that I knew I wouldn't use.  I don't need the rss feed, so I popped the android icon in and named it rss.png, in place of the old rss icon.  Then I put my android link where the rss link goes....

That's one easy option...


: Re: Social Icon Links
: winstart October 05, 2014, 01:03:31 AM
yes thats what i did but the logo didn't change. The folder i made the change is ....templates/risen_hope/css/ionicons/src. Or should i have made the change somewhere else


: Re: Social Icon Links
: mikenicoll October 05, 2014, 08:39:16 PM
Hello,

You just need to edit the module source code for the "Get in Touch" module. If you change the coding from -rss to -linkedin you will just see the icon itself. Following that you need to add some background and hover states like so:

:
.ion-social-linkedin {
  background: #cfcfcf;}
   
    .ion-social-linkedin:hover {
      background: #ff0000;}