Return to previous page

Social Media Icons – header #7 - by elijahmchenry

This topic has 19 replies, 5 voices, and was last updated 8 years, 3 months ago ago by Robert Hall

elijahmchenry

Participant

December 16, 2015 at 21:28

Hi, I am using Header #7 and I would like to customize the social media field a bit. I am hoping that you can help me accomplish the following:

1 – Make these icons connect to my own personal social media accounts, rather than making them “social share” icons.
2 – Disable the dotted grey line surrounding the icons.
3 – Disable the red text bubble that displays above the icon on the left.
4 – Remove unwanted icons
5 – Include desired icons (Facebook, Instagram, Soundcloud)

Thank you!

Please, contact administrator
for this information.

#104670 Copied Theme version: 2.6 WooCommerce version: 2.4.12

18 Answers

elijahmchenry

Participant

December 16, 2015 at 22:51

Update: I am now using Header #17 because it seems to be better fitting for my site.
Please disregard points #2 & 3 from above.

Additionally, can you please tell me where I can change the top bar background and font colors for this header?
Thank you

#104683 Copied
Eva Kemp

Support staff

December 17, 2015 at 14:47
Hello,

1. You need edit the file wp-content/themes/woopress/framework/shortcodes.php (find the section “! Share This Product” in line 1918), to change links you need edit the code, for example for Twitter <a href="https://twitter.com/share?url='.$permalink.'&text='.$post_title.'" class="'.$tooltip_class.'" title="'.__('Twitter', ETHEME_DOMAIN).'" target="_blank"> and replace https://twitter.com/share?url='.$permalink.'&text='.$post_title.' with a link to your Twitter account.

4. To remove unwanted icons you comment the code for icons in the same file shortcodes.php.

5. You need add your code for desired icons in shortcodes.php file.

6. To change background color for top bar where social icons are displayed use this code in Theme Options > Custom CSS > Global Custom CSS:
```
.header-type-17 .header-top {
    background-color: black;
}
```
To change background color for top bar where Sign In link is, you need use this code:
```
.top-bar {
    background-color: red;
}
```
Write your color values.

7. Do you want to change font color for tab bar or menu items?

Regards,
Eva Kemp.
#104760 Copied
elijahmchenry

Participant

December 17, 2015 at 19:35

Thank you for the detailed reply!

In regards to #7, I have attached a link below of the area that I am talking about.
I am hoping to change all of these top bar elements to a different color, aside from the background.
Also, I would like to change the hover color.

Please, contact administrator
for this information.

#104828 Copied
Eva Kemp

Support staff

December 17, 2015 at 20:36
Hello,

Add this code in Global Custom CSS:
```
.top-bar a {
    color: #FFF;
}
.top-bar a:hover {
    color: #FFF;
}
```
Write color values you need.

Regards,
Eva Kemp.
#104852 Copied
elijahmchenry

Participant

December 17, 2015 at 20:53

Is there also a way to change the color of the mail icon next to the “Newsletter” text and the divider lines between words to match the same color?

#104863 Copied
Eva Kemp

Support staff

December 17, 2015 at 21:24
Hello,

Please add this code:
```
.top-links li.popup_link:before, .links li:after {
   color: black;
}
```
Regards,
Eva Kemp.
#104875 Copied
elijahmchenry

Participant

December 17, 2015 at 21:41

Thank you. This changed the color of the mail icon perfectly.
Unfortunately though, this code did not change the color of the divider lines between the items in the top bar. Was there maybe a typo?

#104878 Copied
Jack Richardson

Support staff

December 17, 2015 at 22:02
Hello,

Sorry, my mistake. Please use this code also:
```
.links li:after {
  background-color: black;
}
```
Regards,
Eva Kemp.
#104881 Copied
jatinvengur

Participant

January 6, 2016 at 08:05

Hi, I would like to know about points #2 and #3 – how to:
2 – Disable the dotted grey box surrounding the social media icons?
3 – Disable the red comment icon that displays above the icons on the top left?

I am using Woopress v2.4 and currently the website is under construction.

Thankyou

#106831 Copied Theme version: 2.4 WooCommerce version: 2.4.12

Eva Kemp

Support staff

January 6, 2016 at 10:06

Hello @jatinvengur,

Your site is under construction and we can’t view it. Please provide us with wp-admin panel credentials in Private Content and show pages where you added social media icons and where you see red comment icon.

Thank you.

Regards,
Eva Kemp.

#106852 Copied

jatinvengur

Participant

January 19, 2016 at 01:40

Hi Eva,

I have provided a dropbox link in the private content to a screenshot showing the items I want to remove. Please let me know if you can help, thanks.

Please, contact administrator
for this information.

#108631 Copied Theme version: 2.4 WooCommerce version: 2.4.12
Robert Hall

Support staff

January 19, 2016 at 08:32
Helllo,

Please add the following code in Theme Options->Custom CSS->Global Custom CSS.
```
.header-type-6 .header .tbs span:before, .header-type-7 .header .tbs span:before, .header-type-8 .header .tbs span:before, .header-type-10 .header .tbs span:before, .header-type-12 .header .tbs span:before{
display:none;
}
```
```
.header-type-6 .header .tbs span, .header-type-7 .header .tbs span, .header-type-8 .header .tbs span, .header-type-10 .header .tbs span, .header-type-12 .header .tbs span{
display:none;
}
```
Regards,
Robert Hall.
#108661 Copied
jatinvengur

Participant

January 19, 2016 at 08:43

Thanks for your response Robert.

Unfortunately that code removed the social icons as well.

I wanted to keep all the social icons and only remove the dotted box around them, and the red “comment” or “call-out” box in the top left of the dotted box.

Can you advise how I would achieve that?

Thanks!

Jatin

#108663 Copied

Robert Hall

Support staff

January 19, 2016 at 09:55

Please provide us with wp-admin access in Private Content.

Regards,
Robert Hall.

#108683 Copied

jatinvengur

Participant

January 19, 2016 at 12:46

wp-admin access provided in private content.

Please let me know what changes you make, thank you.

Please, contact administrator
for this information.

#108720 Copied
Robert Hall

Support staff

January 19, 2016 at 12:51
I’ve added this code in Global Custom CSS. Please check.
```
.header-type-6 .header .tbs span, .header-type-7 .header .tbs span, .header-type-8 .header .tbs span, .header-type-10 .header .tbs span, .header-type-12 .header .tbs span{
border:none;
}
```
Regards,
Robert Hall.
#108723 Copied
jatinvengur

Participant

January 19, 2016 at 12:53

Thanks so much Robert, that is exactly what I wanted.

Best Regards,
Jatin

#108725 Copied

Robert Hall

Support staff

January 19, 2016 at 13:11

You’re welcome!

Regards,
Robert Hall.

#108728 Copied
Tagged: header 7, json array, persuasive, return resoult, seo friendly, social media icons, wordpress woocommerce themes
Viewing 19 results - 1 through 19 (of 19 total)