test
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Pankaj Sharma Moderator
    #999400

    Hi @khalva
    The contact page is coming from the core Joomla contact component and links also from it.
    You have to submit your request on Joomla forum here for this work.

    Regards

    khalva Friend
    #999502

    Hello @pankaj Sharma 🙂
    Yes, that’s correct, the contact page is a core Joomla component but I would like to add this css into /templates/ja_decor/css/custom.css

    That’s why I published this post here.
    Do you mind if we proceed this discussion in this thread? If you insist, I could easily move it into the category that you mentioned.

    P.S. Happy New Year!
    🙂

    Pankaj Sharma Moderator
    #999509

    Hi
    it’s not about the custom.css file it’s from the core Joomla contact component.
    I can guide you to add icon via css like below example :

    li.facebook :before { content: "\f098"; font-family: FontAwesome; position: absolute; left: 0; color: #333333; }
    

    You can use before after class to add the background or font-awesome icon code.
    Reference doc Here

    khalva Friend
    #999560

    Hello @pankaj Sharma , thank you for your help 🙂
    Did I mentioned that you rock?! 🙂

    It works right now, I’ve changed the "content" and now a fb icon has been displayed.
    http://prntscr.com/drf7gj

    Would you be so kind to assist me in removing this "facebook label" and its background, so it could only display the facebook icon, which is a linked icon?

    Well, in case that I’ve explained badly, I would like to display only the icon with an attached link to the icon, so when someone clicks on it , he should go to my fb page 🙂

    Would you be so kind in assisting me with that? 🙂

    Thank you for your kind help so far 🙂

    khalva Friend
    #999641

    Hello, I did some changes 🙂
    Here’s the whole code:

    
    .contact #contact-plain .contact-info .contact-links .nav li a {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        color: transparent;
        padding: 5px 10px;
        transition: all 0.5s ease 0s;
    }
    
    li.facebook :before { content: "\f082"; font-family: FontAwesome; position: absolute; left: 0; color: #333333;}
    
    li.google-plus :before { content: "\f0d5"; font-family: FontAwesome; position: absolute; left: 0; color: #333333;}
    

    Now it looks that way:
    http://prntscr.com/drki4i

    This is the page:

    https://tehnopol.bg/contact-us-now

    Would you be so kind to assist me in
    1) increasing the size of the icons;
    2) removing this annoying hover effect: http://prnt.sc/drkil6

    Thank you for your AMAZING help 🙂

    Pankaj Sharma Moderator
    #999729

    Hi
    Change the code as in my example for icon size

    li.google-plus :before {
        content: "\f0d5";
        font-family: FontAwesome;
        position: absolute;
        left: 0;
        color: #333333;
        font-size: 20px;
    }

    Font size value is to change the size.
    To remove hover
    Add this code in custom.css

    .contact #contact-plain .contact-info .contact-links .nav li a:hover {
        background: transparent!important;
    }
    khalva Friend
    #1000292

    Hello @pankaj Sharma, thank you for your help.
    You ROCK!

    🙂

    Pankaj Sharma Moderator
    #1000711

    You are welcome!

Viewing 8 posts - 1 through 8 (of 8 total)

This topic contains 8 replies, has 2 voices, and was last updated by  Pankaj Sharma 7 years, 11 months ago.

The topic ‘Change Contact Form Labels Style’ is closed to new replies.