Joomla Templates Club 406,261 posts

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#203384

I don’t need to have a multi language page. How can I load for example the bootstrap icons for Facebook, Twitter and flicker into this position?

Thanks for the hint

Cheers

Roger

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#557791

Hi there,
It’s all about modules and positions

<?php if ($this->countModules('languageswitcherload')) : ?>
<!-- LANGUAGE SWITCHER -->
<div class="languageswitcherload">
<jdoc:include type="modules" name="<?php $this->_p('languageswitcherload') ?>" style="raw" />
</div>
<!-- //LANGUAGE SWITCHER -->
<?php endif ?>


You can put your custom html module into this position: languageswitcherload

Thank you,
Viet Vu

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#557821

Hi

Thanks for your answer. I was probably not clear enough. At the moment I have the language switcher module at that position. I want to replace that with the social icons.

Roger

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#557827

Hi there,
As my prev replied:
– Create new custom HTML module and apply HTML for social icon links
– Put this module into position: languageswitcherload
You can check my prev replied with code to understand this logic.

Thank you,
Viet Vu

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#557908

Hello

There is a CustomHTML in the JA Brick containing the social media. (Lower right corner). There just text is used. Looking through the available pictures of the template I found icons for Facebook etc. Those are the ones I would like to use. It should look something like the top right corner of JA Elastica.

Could you give me a hint for that? I’m not a HTML pro.

By the way, if I find something in another template I would like, is it possible for example to copy the header.php? With some adjustments I guess.

Thanks

Roger

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#557935

Hi there,
# Yes, you can use any custom HTML you want with defined content as your needed. For sample


<ul class="social-list">
<li class="facebook"><a title="Facebook" href="#"><strong>Facebook</strong></a></li>
<li class="flickr"><a title="Flickr" href="#"><strong>Flickr</strong></a></li>
<li class="twitter"><a title="Twitter" href="#"><strong>Twitter</strong></a></li>
<li class="feed"><a title="Feed" href="#"><strong>Feed</strong></a></li>
</ul>

# About icon you can check font-awesome for detail document. Please make sure you reference right version with which one using in our template. As far i remember it’s v4.0.2
# You’ll also need a little css to styling your new module

Thank you,
Viet Vu

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#561245

I finally got to set the facebook page up… But it is still not working the way I would like it to do. Instead of icons there is text. At the moment I have set it up at position 22 in Ja_Brisk and not the languageloader position as mentioned above.

You write above, that I have to do some CSS. Looking at the template.css file of JA_Brisk I found the following.

.ja-copyright:after {
clear: both;
}
ul.social-list {
display: block;
margin: 10px 0 0;
padding: 0;
overflow: hidden;
}
ul.social-list li {
display: block;
float: left;
padding: 5px 0;
width: 50%;
}
ul.social-list li a {
color: #666
display: block;
width: 100%;
}
ul.social-list li a:hover,
ul.social-list li a:focus,
ul.social-list li a:active {
color: #1ba1e2
text-decoration: none;
}
ul.social-list li a span {
background-image: url(../images/social-list.png);
background-repeat: no-repeat;
display: inline-block;
height: 20px;
margin-right: 8px;
vertical-align: middle;
width: 20px;
}
ul.social-list li.facebook a span {
background-position: 0px 0px;
}
ul.social-list li.facebook a:hover span {
background-position: -20px 0px;
}
ul.social-list li.flickr a span {
background-position: 0px -20px;
}
ul.social-list li.flickr a:hover span {
background-position: -20px -20px;
}
ul.social-list li.twitter a span {
background-position: 0px -40px;
}
ul.social-list li.twitter a:hover span {
background-position: -20px -40px;
}
ul.social-list li.feed a span {
background-position: 0px -60px;
}
ul.social-list li.feed a:hover span {
background-position: -20px -60px;


I also double checked, the picture mentioned in the code is also there, not the correct color yet, but it is there.

Here is the html code I’m using at the moment

<p>Connect with us...</p>
<ul class="inline ja-social">
<li class="social-facebook"><a title="Facebook" href="http://www.facebook.com/samariter.osv">Facebook</a></li>
</ul>

Also had a look here and tried this, but same problem: http://www.joomlart.com/forums/archive/index.php/t-82192.html?

I can’t figure out what is wrong :((

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#561462

Any thoughts?

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#561481

Hi there

<p>Connect with us...</p>
<ul class="inline ja-social">
<li class="social-facebook"><a title="Facebook" href="http://www.facebook.com/samariter.osv">Facebook</a></li>
</ul>
It’s not FA class. Please update with FA class to use icon.

Thank you,
Viet Vu

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#561644

Thanks for your input. Now I have an icon, but which is tiny. I’m using the following

<i class="icon-facebook-sign"><a title="Facebook" href="http://www.facebook.com/samariter.osv"> Facebook</a></i>


Found some additional settings for this: <p><i class=” icon-facebook-sign icon-3x”></i> icon-facebook-sign</p>

Unfortunately this doesn’t have any effect. I don’t want to increase the font size, since this will have influence of the whole page.

Furthermore the text “Facebook” is shown in italic looking at the html code I don’t see anything that could make it italic.

Thanks

Roger

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#561966

Found something

<i class="social-facebook"><a title="Facebook" href="http://www.facebook.com/samariter.osv"><i class="fa fa-facebook-square fa-2x fa-fw"></i></a></i>

This does the trick.

Tried the same with Flickr icon. Unfortunately the is just a hollow square. Can you tell me what’s wrong? Do I have to add the icon somewhere? Where?

Thanks

Roger

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#561977

Hi there
As i said before please use FA icons

http://fortawesome.github.io/Font-Awesome/icons/
Thank you,
Viet Vu

ps:// If your site using older version of current latest FA, you will need check on Google for old version reference.

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#562012

Hi

I also use <link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>
So I guess it uses the 4.3 version. Under http://fortawesome.github.io/Font-Awesome/icon/flickr/ I found that the flickr icon can be used with fa fa-flickr.

For a test I used the following code

<i class="social-facebook"><a title="Facebook" href="http://www.facebook.com/samariter.osv"><i class="fa fa-flickr fa-2x fa-fw"></i></a></i>

This just gives me a square.

Thanks

Roger

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#562492

Hi there
Please provide your site URL i’ll try to inspect it.

Thank you,
Viet Vu

[relsig Friend relsigJoin date: October 2007Posts: 218Downloads:22Uploads:61 Thanks: 16 Thanked: 10 times in 3 posts]

#562689

sent you a PM

[Author]

Posts