Joomla Templates Club 406,261 posts

[TCB Friend TCBJoin date: May 2015Posts: 70Downloads:0Uploads:12 Thanks: 34]

#640407

Hello,

I’m not currently using module positions top_login and languageswitcher. I was wondering if it is somehow possible to put a twitter and facebook icon in those 2 module positions and have quick and nifty links to those social media sites?

Thanks,
Herb

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#645440

Hi
Kindly provide more details with screenshot what exactly you needed .
The positions are defined in the header.php
If you want to put the custom code of social icons buttons in there positions you can go to the
templatesja_muzictplsblocksheader.php And add your code in after or between these module Positions .
Here > http://prntscr.com/7z3wel

[TCB Friend TCBJoin date: May 2015Posts: 70Downloads:0Uploads:12 Thanks: 34]

#647109

Hello,

I have attached screenshots of what the menu looks like now and what I’m shooting for.

Do I just create new modules with transparent images and assign them to those positions? Or is it more complicated?

[TCB Friend TCBJoin date: May 2015Posts: 70Downloads:0Uploads:12 Thanks: 34]

#744131

Hello,

I have attached screenshots of what the menu looks like now and what I’m shooting for.

Do I just create new modules with transparent images and assign them to those positions? Or is it more complicated?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#647132

Hi
in this case you can put static icon code in the header.php file .
Between the code of login and search module .
For example :

<div class="pull-right span1"><a class="facebok_header" href="https://facebook.com" title="facebook" style="
height: 50px; width: 50px; line-height: 50px; display: block; border-left: 1px solid #222 text-align: center; border-right: 1px solid #222 color: #777 };
"><i class="icon-facebook"></i></a></div>


If you would not add style in the code then add the class .facebook_header in custom.css file and add above style for it .
It will look like this > http://prntscr.com/7zt9z9

Hope it helps.

1 user says Thank You to Pankaj Sharma for this useful post

1. TCB

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#744153

Hi
in this case you can put static icon code in the header.php file .
Between the code of login and search module .
For example :

<div class="pull-right span1"><a class="facebok_header" href="https://facebook.com" title="facebook" style="
height: 50px; width: 50px; line-height: 50px; display: block; border-left: 1px solid #222 text-align: center; border-right: 1px solid #222 color: #777 };
"><i class="icon-facebook"></i></a></div>


If you would not add style in the code then add the class .facebook_header in custom.css file and add above style for it .
It will look like this > http://prntscr.com/7zt9z9

Hope it helps.

1 user says Thank You to Pankaj Sharma for this useful post

1. TCB

[TCB Friend TCBJoin date: May 2015Posts: 70Downloads:0Uploads:12 Thanks: 34]

#647175

Thanks for your help! I entered the code as directed and the icons are there!

I am just having a simple issue in desktop view: there is a large space after each of the icons? Is there a way to do away with that space (see the arrows)

And, in mobile version: the icons appear vertically and out of place instead of horizontally?

[TCB Friend TCBJoin date: May 2015Posts: 70Downloads:0Uploads:12 Thanks: 34]

#744196

Thanks for your help! I entered the code as directed and the icons are there!

I am just having a simple issue in desktop view: there is a large space after each of the icons? Is there a way to do away with that space (see the arrows)

And, in mobile version: the icons appear vertically and out of place instead of horizontally?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#647285

Hi kindly apply text-align : center property .
Like this > http://prntscr.com/806q2o
Currently this property not working due to syntax errors in your code with border properties .
Also i suggest you to apply style through css class in custom.css file .
In mobile it does not fit due to Less space . You can hide it with below code .
in custom.css

@media (max-width: 767px) {.twitter_header {display: none!important;}}

[TCB Friend TCBJoin date: May 2015Posts: 70Downloads:0Uploads:12 Thanks: 34]

#648109

Hello, I tried to clean up the code to allow the text align to work properly but it’s still not working for me?
Here is the current code:

<!-- // Top Login -->
<div class="pull-right span1"><a class="facebok_header" href="https://www.facebook.com/thechristianbeat" title="facebook" style="
height: 50px; width: 50px; line-height: 50px; display: block; border-left: 1px solid #222 text-align: center;
border- right: 1px solid #222 color: #777 };"><i class="icon-facebook"></i></a></div>
<div class="pull-right span1"><a class="twitter_header" href="https://www.twitter.com/thechristbeat" title="twitter" style="
height: 50px; width: 50px; line-height: 50px; display: block; border-left: 1px solid #222 text-align: center;
border-right: 1px solid #222 color: #777 };"><i class="icon-twitter"></i></a></div>
<?php endif ?>
<?php if ($this->countModules('languageswitcherload')) : ?>

Also the modules are still displaying in mobile despite my add to the custom.css?

div.logo-image {
overflow: visible;
}
div.logo-image a {
width: 386px;
height: 36px;
}
body {
color : #000000
}
@media (max-width: 767px) {.twitter_header {display: none!important;}}
@media (max-width: 767px) {.facebook_header {display: none!important;}}


Would you be able to provide any additional advice?

[TCB Friend TCBJoin date: May 2015Posts: 70Downloads:0Uploads:12 Thanks: 34]

#744356

Hello, I tried to clean up the code to allow the text align to work properly but it’s still not working for me?
Here is the current code:

<!-- // Top Login -->
<div class="pull-right span1"><a class="facebok_header" href="https://www.facebook.com/thechristianbeat" title="facebook" style="
height: 50px; width: 50px; line-height: 50px; display: block; border-left: 1px solid #222 text-align: center;
border- right: 1px solid #222 color: #777 };"><i class="icon-facebook"></i></a></div>
<div class="pull-right span1"><a class="twitter_header" href="https://www.twitter.com/thechristbeat" title="twitter" style="
height: 50px; width: 50px; line-height: 50px; display: block; border-left: 1px solid #222 text-align: center;
border-right: 1px solid #222 color: #777 };"><i class="icon-twitter"></i></a></div>
<?php endif ?>
<?php if ($this->countModules('languageswitcherload')) : ?>

Also the modules are still displaying in mobile despite my add to the custom.css?

div.logo-image {
overflow: visible;
}
div.logo-image a {
width: 386px;
height: 36px;
}
body {
color : #000000
}
@media (max-width: 767px) {.twitter_header {display: none!important;}}
@media (max-width: 767px) {.facebook_header {display: none!important;}}


Would you be able to provide any additional advice?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#648527

Dear Sir
there are many error in code , i suggest you to use style via custom.css instead of adding it in php code .
Code for twitter

<div class="pull-right span1"><a class="twitter_header" href="https://www.twitter.com/thechristbeat" title="twitter" ><i class="icon-twitter"></i></a></div>

Code for facebook :

<div class="pull-right span1"><a class="facebook_header" href="https://www.facebook.com/thechristianbeat" title="facebook"><i class="icon-facebook"></i></a></div>

Code for styles for these icons .
Add this in custom.css


@media (max-width: 767px) {.twitter_header {display: none!important;} .facebook_header {display: none!important;}
}

.twitter_header, .facebook_header { height: 50px; width: 50px; line-height: 50px; display: block; border-left: 1px solid #222 text-align: center; }

1 user says Thank You to Pankaj Sharma for this useful post

1. TCB

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#744379

Dear Sir
there are many error in code , i suggest you to use style via custom.css instead of adding it in php code .
Code for twitter

<div class="pull-right span1"><a class="twitter_header" href="https://www.twitter.com/thechristbeat" title="twitter" ><i class="icon-twitter"></i></a></div>

Code for facebook :

<div class="pull-right span1"><a class="facebook_header" href="https://www.facebook.com/thechristianbeat" title="facebook"><i class="icon-facebook"></i></a></div>

Code for styles for these icons .
Add this in custom.css


@media (max-width: 767px) {.twitter_header {display: none!important;} .facebook_header {display: none!important;}
}

.twitter_header, .facebook_header { height: 50px; width: 50px; line-height: 50px; display: block; border-left: 1px solid #222 text-align: center; }

1 user says Thank You to Pankaj Sharma for this useful post

1. TCB

[TCB Friend TCBJoin date: May 2015Posts: 70Downloads:0Uploads:12 Thanks: 34]

#649581

Hi,

I appreciate your patience and support! Definite progress made. Only issue now is that in desktop view the icons appear to be floating?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#649583

Hi its working fine on my end . only issue is missing ; in color code .
that u can add for the border . Here > http://prntscr.com/80qdr6
except it there is no issue like u mentioned .

1 user says Thank You to Pankaj Sharma for this useful post

1. TCB

[Author]

Posts