Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to change CONTACT MODULE

Featured Lock Resolved Issue
Hello! Appeared the need to establish a website header link for a call back. Help to install it in the contact model to be next to the phone.

<i class="fa fa-phone-square" aria-hidden="true"></i><a class="joomly-callback">ОБРАТНЫЙ ЗВОНОК</a> here is the callback code, where and how do I insert it into the code? Thanks for earlier.

My site https://kabinet-faberlic.com

25 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Not really, what I asked.
You kept <div> </div> - you do not need this.
----
This time I tested CSS code on my helix3 site , not from "memory" ,
please use only this new CSS , old one you can delete:


#sp-top1 ul {list-style: none;}
#sp-top1 ul li {display: inline-block !important; margin: 0 5px; border: 0;}
#sp-top1 .sp-module ul > li > a {display: inline-block; line-height: 1;}
#sp-top1 .sp-module ul > li > a::before {display: none;}




icons.png

Attachments (1)

  • icons.png
    icons.png 4.5 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
just create a new custom module put there whatever you need, and publish on top1 or top2 position,
then from Helix3 settings disable contact area.

Vladss

More than a month ago #Permalink
In module contacts in standard perishing painful for all well done. Just wanted to build it all, I get it but not so beautiful. I take it that won't work?

Paul Frankowski - Staff

More than a month ago #Permalink
In custom module or anycode module you can use your own html tags.
----
Your header top section now looks okay.
Whole text and icons are in single line.
I don't know what you need to change more?

Vladss

More than a month ago #Permalink
I get this way through my module,and in Your module everything is done beautifully and adapted for mobile. How can I do the same?

Attachments (1)

  • Снимок.PNG
    Снимок.PNG 48.4 KB

Paul Frankowski - Staff

More than a month ago #Permalink
In second line, probably from your custom module line-height is too big, that's why you have too big space between lines.

Vladss

More than a month ago #Permalink
<div style="text-align: left; margin-left: -10px"><span style="font-size: 9pt;"><i class="fa fa-shopping-basket" aria-hidden="true"></i> <a href="https://faberlic.com/?sponsor=465794&lang=ru" target="_blank" rel="nofollow noopener noreferrer">Оформить заказ</a>    <i class="fa fa-phone-square" aria-hidden="true"></i> <a class="joomly-callback" href="#">Обратный звонок</a>    <i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:+74957888509">+7 (495) 788-85-09</a>    <i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:[email protected]">[email protected]</a></span></span></div>

Forgive me, but I'm not good at css, this code is all I got. can you help?

Paul Frankowski - Staff

More than a month ago #Permalink
HTML code is okay.
You need only extra css line:

#sp-top1 {line-height:1; }

Vladss

More than a month ago #Permalink
I did as you wrote but it turned out just as the height decreased. Your standard contact block displays better in mobile screen sizes.

Attachments (1)

  • Снимок.PNG
    Снимок.PNG 37.2 KB

Paul Frankowski - Staff

More than a month ago #Permalink

#sp-top1 {line-height:1.2; }


---
I think it's time for you to buy a book about CSS :)

Vladss

More than a month ago #Permalink
Yes about books you apparently are right. I just can not understand how I do that at different resolutions looked neat, not as in the screenshot, the phone number breaks. Changes in css made.

Attachments (1)

  • Снимок.PNG
    Снимок.PNG 37 KB

Vladss

More than a month ago #Permalink
Sorry but I am making corrections in block #sp-top2 {line-height:1.2;}. Since the block is hidden from visitors, this is what you see in the screenshot.

Paul Frankowski - Staff

More than a month ago #Permalink
in our code we used <li> ... </li> for each object. You forgot about it.


<li><i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:+7(495)788-85-09">+7 (495) 788-85-09</a></li>



so please add it into your html code.

----
Then extra CSS


#sp-top1 li {display: inline-block;}

Vladss

More than a month ago #Permalink
<div style = "text-align: center; margin: 0 10px"><span style="font-size: 9pt;"><i class="fa fa-shopping-basket" aria-hidden="true"></i> <a href="https://faberlic.com/?sponsor=465794&lang=ru" target="_blank" rel="nofollow noopener noreferrer">Оформить заказ</a>     <i class="fa fa-phone-square" aria-hidden="true"></i> <a class="joomly-callback" href="#">Обратный звонок</a>     <li class="sp-contact-phone"><i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:+74957888509">+7 (495) 788-85-09</a></li><li class="sp-contact-email"><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:[email protected]">[email protected]</a></li></span></span></div>

Tried to frame as You have done has turned out as in the screenshot.

Attachments (1)

  • Снимок.PNG
    Снимок.PNG 63.8 KB

Paul Frankowski - Staff

More than a month ago #Permalink
1) You have to add <li> for each (!) element: basket, phone, phone, mail


2) and disable dots


#sp-top1 ul {list-style: none;}



I thought you know HTML and CSS at least some :(

Vladss

More than a month ago #Permalink
My level of knowledge is too low in this direction, so I turned to you for help. Code to put in css, html changed how You understand. It turned out like this on the screenshot.

<div style = "text-align: center; margin: 0 10px"><span style="font-size: 9pt;"><li><i class="fa fa-shopping-basket" aria-hidden="true"></i> <a href="https://faberlic.com/?sponsor=465794&lang=ru" target="_blank" rel="nofollow noopener noreferrer">Оформить заказ</a></li>     <li><i class="fa fa-phone-square" aria-hidden="true"></i> <a class="joomly-callback" href="#">Обратный звонок</a></li>     <li><i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:+74957888509">+7 (495) 788-85-09</a></li>     <li><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:[email protected]">[email protected]</a></li></span></span></div>

Attachments (1)

  • Снимок.PNG
    Снимок.PNG 74.4 KB

Paul Frankowski - Staff

More than a month ago #Permalink
okay, now we are close to success.
--------
instead:

<div style = "text-align: center; margin: 0 10px"><span style="font-size: 9pt;">


use

<ul style="font-size: 9pt;">


and instead:

</span></div>


use:

</ul>


---
And use this CSS:

#sp-top1 ul, #sp-top2 ul {list-style: none;}
#sp-top1 li, #sp-top2 li {display: inline-block; margin: 0 5px;}

Vladss

More than a month ago #Permalink
<div style = "text-align: center; margin: 0 10px"><ul style="font-size: 9pt;"><li><i class="fa fa-shopping-basket" aria-hidden="true"></i> <a href="https://faberlic.com/?sponsor=465794&lang=ru" target="_blank" rel="nofollow noopener noreferrer">Оформить заказ</a></li>     <li><i class="fa fa-phone-square" aria-hidden="true"></i> <a class="joomly-callback" href="#">Обратный звонок</a></li>     <li><i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:+74957888509">+7 (495) 788-85-09</a></li>     <li><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:[email protected]">[email protected]</a></li></ul></div>

Redid everything as you said, added to css as you wrote. It turned out as in the screenshot.

Attachments (1)

  • Снимок.PNG
    Снимок.PNG 63.6 KB

Vladss

More than a month ago #Permalink
<ul style="font-size: 9pt;"><li><i class="fa fa-shopping-basket" aria-hidden="true"></i> <a href="https://faberlic.com/?sponsor=465794&lang=ru" target="_blank" rel="nofollow noopener noreferrer">Оформить заказ</a></li>     <li><i class="fa fa-phone-square" aria-hidden="true"></i> <a class="joomly-callback" href="#">Обратный звонок</a></li>     <li><i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:+74957888509">+7 (495) 788-85-09</a></li>     <li><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:[email protected]">[email protected]</a></li></ul>

Removed the div from the code as you said and added css. The first shot is full screen. The second shot I reduced the screen to a minimum and there is not neat labels go.

Once again, I want to thank you for your help! God grant you all the best.

Attachments (2)

  • Снимок1.PNG
    Снимок1.PNG 152.9 KB
  • Снимок2.PNG
    Снимок2.PNG 240 KB

Vladss

More than a month ago #Permalink
Just a standard module displays everything very cool!

Attachments (1)

  • Снимок.PNG
    Снимок.PNG 58.3 KB

Paul Frankowski - Staff

More than a month ago #Permalink
If you want to have all icons in single line, just in Layout remove top2, and set top1 as single module position for whole row.

Vladss

More than a month ago #Permalink
Thanks Paul , sort of. Once again, thank you very much, you are a professional with a capital letter.

Paul Frankowski - Staff

More than a month ago #Permalink
Aaaa , that's why you needed text-align. This should solve it.


<ul style="font-size: 9pt; text-align: center">


I added only last part.

Vladss

More than a month ago #Permalink
Oh, thank you very much, I forgot about this tag at all. It worked!!! Very cool!!!


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 119
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 110
Toufiq

Toufiq

Total Accepted Answers: 89
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 4
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2

115

Templates

296161

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us