Joomla Templates Club 406,261 posts

[kaifanun Friend kaifanunJoin date: July 2008Posts: 26Downloads:0Uploads:2 Thanks: 5]

#154382

Hi, where should I go to customize the Follow Us section in user8 to display social icons in horizontal view? How about changing the social icons?

thank you.

[Arvind Chauhan Moderator Arvind ChauhanJoin date: September 2014Posts: 3835Downloads:74Uploads:92 Thanks: 1240 Thanked: 1334 times in 848 posts]

#355764

Hi there,

If i was on your place, this is how i would have tried to solve it.

1. Find the module in question and see what kind of module it is.

2. In this case, its a custom module, Check the html code.

[PHP]<ul class=”social-list”>
<li class=”ja-facebook”><a href=”#” title=”Sample link”>Facebook</a></li>
<li class=”ja-twitter”><a href=”#” title=”Sample link”>Twitter</a></li>
<li class=”ja-linkedin”><a href=”#” title=”Sample link”>Linkedin</a></li>
<li class=”ja-rss”><a href=”#” title=”Sample link”>RSS News</a></li>
</ul>[/PHP]

3. It says class=”xxx” >> search in the css files for this class.

Open templates/ja_social/css/template.css and around line 794, see this code :

#ja-wrapper ul.social-list li.ja-facebook a { background-image: url(../images/icons/icon-facebook.png); }
#ja-wrapper ul.social-list li.ja-twitter a { background-image: url(../images/icons/icon-twitter.png); }
#ja-wrapper ul.social-list li.ja-linkedin a { background-image: url(../images/icons/icon-linkedin.png); }
#ja-wrapper ul.social-list li.ja-rss a { background-image: url(../images/icons/icon-rss.png); }

Thats the CSS style applied to this module.

4. Now, the images are placed / changed in this folder >> /templates/ja_social/images/icons

1 user says Thank You to Arvind Chauhan for this useful post

1. kaifanun

[kaifanun Friend kaifanunJoin date: July 2008Posts: 26Downloads:0Uploads:2 Thanks: 5]

#355830

thank you drarvindc for the detailed response, Awesome!
I would like to add if anyone is interested, In the css code, I added the float tag to make the social menu list display horizontally.

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

#355854

<em>@kaifanun 194407 wrote:</em><blockquote>thank you drarvindc for the detailed response, Awesome!
I would like to add if anyone is interested, In the css code, I added the float tag to make the social menu list display horizontally.</blockquote>

Now, you add the following code into the template.css file:

#ja-wrapper ul.social-list li{
display:block;
float:left
}

[yasmagic Friend yasmagicJoin date: July 2010Posts: 24Downloads:0Uploads:1 Thanks: 2]

#355870

Hi, where to get all these modules, follow us, search index, about us, and etc.,?

[Arvind Chauhan Moderator Arvind ChauhanJoin date: September 2014Posts: 3835Downloads:74Uploads:92 Thanks: 1240 Thanked: 1334 times in 848 posts]

#355871

Did you try looking in the Module manager of the quickstart? Install quickstart on youtr localhost and use it for reference. If its a custom module, copy over the html to your site running JA Social template.

Please raise a separate thread for your questions. Do not ask questions in threads of others, especially when the question is different.

Arvind

[Author]

Posts