-
AuthorPosts
-
Pankaj Sharma Moderator
Pankaj Sharma
- Join date:
- February 2015
- Posts:
- 24589
- Downloads:
- 144
- Uploads:
- 202
- Thanks:
- 127
- Thanked:
- 4196 times in 4019 posts
January 4, 2017 at 10:18 am #999502Hello @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.cssThat’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 ModeratorPankaj Sharma
- Join date:
- February 2015
- Posts:
- 24589
- Downloads:
- 144
- Uploads:
- 202
- Thanks:
- 127
- Thanked:
- 4196 times in 4019 posts
January 4, 2017 at 10:40 am #999509Hi
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 HereJanuary 4, 2017 at 3:08 pm #999560Hello @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/drf7gjWould 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 🙂
January 4, 2017 at 9:35 pm #999641Hello, 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/drki4iThis 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/drkil6Thank you for your AMAZING help 🙂
Pankaj Sharma ModeratorPankaj Sharma
- Join date:
- February 2015
- Posts:
- 24589
- Downloads:
- 144
- Uploads:
- 202
- Thanks:
- 127
- Thanked:
- 4196 times in 4019 posts
January 5, 2017 at 2:48 am #999729Hi
Change the code as in my example for icon sizeli.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; }
Pankaj Sharma ModeratorPankaj Sharma
- Join date:
- February 2015
- Posts:
- 24589
- Downloads:
- 144
- Uploads:
- 202
- Thanks:
- 127
- Thanked:
- 4196 times in 4019 posts
January 9, 2017 at 1:41 am #1000711You are welcome!
-
AuthorPosts
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.