Return to previous page

Changing social media icons & text in prefooter

This topic has 19 replies, 3 voices, and was last updated 9 years ago ago by Jack Richardson

netmined

Member

November 30, 2015 at 08:06

Hi,

Rather than the Twitter and RSS icons/links which appear in the prefooter, I need to be able to show icons/links for Instagram and Pinterest. Could you please tell me how I can change the icons and links which display there now?

I also need to change the text which appears in the second and 3rd block of the prefooter. The backend seems to only allow an image URL to be uploaded there. I don’t need these. I simply need to be able to place text into the middle block and then an email address into the last block on the right.

I tried playing around with the prefooter widgets to see if I could add text but it didn’t seem to do anything.

Basically, I would like to retain the prefooter look that is there now from the demo just to change the content and some of the social media icons/links.

Could you please advise how I can do this?

Many thanks in advance.

Please, contact administrator
for this information.

#101876 Copied

18 Answers

Brian Johnson

Member

November 30, 2015 at 10:31

Hello

You may change tabs in wp-content/shortcode.php starting from 387 line.

Regards,
Brian Johnson

#101908 Copied

netmined

Member

November 30, 2015 at 23:20

Hi Brian,

Many thanks for your reply.

I am not a developer so please advise what/how I should be changing (if new code is required, could you please tell me what this is) to get the text and links that I need into the tabs as I outlined above.

If I change the shortcode.php file, does that mean that the changes will be overwritten if there is ever an update to the theme?

Can the changes be made in the custom.css stylesheet so they are not overwritten in an update?

Isabella

#102057 Copied

Jack Richardson

Support staff

December 1, 2015 at 09:09

Hello,

You can disable “Use Prefooter” in Blanco settings > Footer section and add Text widget with needed content in Appearance > Widgets > Prefooter area.

Best regards,
Jack Richardson.

#102086 Copied

netmined

Member

December 1, 2015 at 10:09

Hi Jack,

I tried that already. The widgets do not line up in a row as they do on the demo, there is no way as far as I can see to add the social media icons as they are shown in the demo but more importantly the font sizing is all over the place. If the text is placed into the heading of the widget, it is huge – way too big for the placement, and if it is iserted into the body of the widget, it is tiny, too small to stand out. I have left it there for you to see what I mean.

I just want to be able to get the same look/size as in the demo but just with different text and social media icons in it.

Surely everyone that buys the theme and wants to keep that prefooter area would be needing to change the text and possibly the icons as well but to have it display in a row as it does in the demo.

If it is not possible to simply amend the icons and text on the prefooter which is loaded, could you please tell me how to make the widgets align in a row with a separating bar between them, how to insert the social media icons you have there for Facebook plus Instagram and Pinterest and how to adjust the size of the font so it is readable without being over the top.

Many thanks in advance

#102096 Copied
Jack Richardson

Support staff

December 1, 2015 at 11:02
Hello,

I’ve added this code in custom.css file:
```
.prefooter_icons {
 display: inline-block;
 margin-right: 20%;
}

.prefooter_icons span {
 font-size: 14px;
 text-transform: uppercase;
 color: black;
 line-height: 24px;
 margin: 2px 13px 0 0;
}

.prefooter_icons a [class^="icon-"] {
 display: inline;
 color: grey;
 font-size: 20px;
 padding-right: 15px;
}

a.prefooter_text {
 color: grey;
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
 margin-right: 20%;
}

a.prefooter_email {
 color: grey;
 font-size: 16px;
}
```
and this code in Text widget in Prefooter area:
```
<div class="prefooter_icons">Follow Us: <a href="#"> </a> <a href="#"> </a> <a href="#"> </a></div>

<a href="#" class="prefooter_text">Secure Payment</a> 

<a class="prefooter_email">email: sales@1950sGlam.com</a>
 
```
Please check prefooter now and clear browser cache before.

Best regards,
Jack Richardson.
#102108 Copied
netmined

Member

December 1, 2015 at 11:47

Hi Jack,

Thank you for taking a look.

I’ve just checked the theme files but I don’t see the code you added. I have a child theme created there – did you add the code to the parent by any chance?

In any case, I refreshed & had a look and the three blocks are still running under each other rather than in a row.

The font is now even smaller, as are the social media buttons – these are tiny. And how/where do I now insert the appropriate social media page link for each icon?

#102114 Copied

Jack Richardson

Support staff

December 1, 2015 at 12:21

Hello,

The code was added into one Text widget in Appearance > Widgets > Prefooter Area.
You didn’t have to re-add it.
So I’ve re-added the code again in Appearance > Widgets > Prefooter Area:
http://storage5.static.itmages.com/i/15/1201/h_1448968780_3157450_f41feb65fd.png

and added css code in Appearance > Editor > custom.css file.

Now prefooter on your site is shown this way:
http://storage8.static.itmages.com/i/15/1201/h_1448968827_8471132_513848bce2.png

To change links for social icons you need edit the code, for example <a href="#"> , in Appearance > Widgets > Prefooter Area and write url to your social account instead of #.

Best regards,
Jack Richardson.

#102121 Copied

Brian Johnson

Member

December 1, 2015 at 12:25

Hello

This is the code on your page: http://prntscr.com/991agp. Please specify your request to let us know what kind of look you expect to see.

Regards,
Brian Johnson

#102125 Copied

netmined

Member

December 1, 2015 at 13:03

Hi Jack and Brian,

Thanks for your replies.

Jack, did you add the css code in the Child theme? If not, will it disappear if I update the Blanco theme next?

In relation to the way it looks in the prefooter and what I am after – at the moment, the statements are still stacked one below the other. What I need is for it to run along the bottom as it does in the demo. So something along the lines of this:

FOLLOW US: (icons) | SECURE CREDIT CARD PAYMENT | email: sales@1950sGlam.com

Could you please make the text and icons the same size as what it is in the demo too – right now it is tiny.

Many thanks in advance

#102136 Copied

Jack Richardson

Support staff

December 1, 2015 at 13:07

Hello,

I told you in the previous post that css code was added in custom.css file, not in the child theme. It won’t be lost after theme update.

I see prefooter in one line http://storage8.static.itmages.com/i/15/1201/h_1448968827_8471132_513848bce2.png

Clear browser cache or check in another browser.

Best regards,
Jack Richardson.

#102140 Copied

netmined

Member

December 1, 2015 at 22:56

Hi Jack,

Yes you did mention earlier that you had added the code to the custom css file but you didn’t address whether that would be lost with an update. Thank you for clarifying.

As far as the changes, these haven’t come through. I’ve checked on 3 browsers on desktop as well as a mobile. All after emptying cache as well as emptying the website’s cache – no change.

I haven’t been able to attach or paste a screenshot of how it looks on my end but still all tiny writing with ‘Follow us’ on one line and ‘secure payment’ and email on line below.

#102275 Copied

Jack Richardson

Support staff

December 2, 2015 at 08:15

Hello,

Here is the link how your site looks via proxy service http://anonymouse.org/cgi-bin/anon-www.cgi/http://www.1950sglam.com/ . As you can see prefooter displays correctly in one line.

Best regards,
Jack Richardson.

#102292 Copied

netmined

Member

December 2, 2015 at 12:26

Hi Jack,

I am not sure why it displays correctly through that particular proxy server but it doesn’t for me. I have been doing some changes on the site today and all of those display ok and immediately after doing them. I have emptied my cache several times and it still doesn’t appear here.

Here is a test I did through another proxy server and as you can see, it does not display correctly on that either.

https://zend2.com/open.php?u=nEzqvMVqp%2FL%2FbmYWDjTh1sBeTDQ%3D&b=29&f=norefer

I’ve checked on three different browsers after clearing the cache and it doesn’t display correctly on any of them.

I have Cloudflare set up on this site but that should not make any difference since all of the other changes which have been done recently display immediately.

For that matter, the change you did initially to initially install the statements in the prefooter was showing up immediately. Simply, this one is not. As you can see from that proxy above, it doesn’t show correctly on some machines.

#102332 Copied

Jack Richardson

Support staff

December 2, 2015 at 13:06

Hello,

Please disable cloudflare plugin and check your site with other Internet provider, as we see prefooter content correctly.

Thank you.
Best regards,
Jack Richardson.

#102339 Copied

netmined

Member

December 3, 2015 at 07:09

Hi Jack,

I force cleared the CLoudflare cache and that did it.

I’ve tweaked some of the code to change the size & colour of some of the font and to add links.

I removed the link click through from SECURE PAYMENT but wasn’t able to remove the link hover.

Code in the widget changed to:

Secure Payment

Can you tell me how to change this to remove the link hover and change it to plain text?

Much appreciate it

#102472 Copied
Jack Richardson

Support staff

December 3, 2015 at 08:58
Hello,

Use this css code to remove hover effect:
```
a.prefooter_text:hover {
text-decoration: none !important;
}
```
Don’t forget to clear cache before you check the changes.

Best regards,
Jack Richardson.
#102482 Copied
netmined

Member

December 11, 2015 at 04:39

Many thanks, that worked a treat : )

#103840 Copied

Jack Richardson

Support staff

December 11, 2015 at 10:23

Hello,

You’re welcome.

Best regards,
Jack Richardson.

#103875 Copied
Viewing 19 results - 1 through 19 (of 19 total)

The issue related to '‘Changing social media icons & text in prefooter’' has been successfully resolved, and the topic is now closed for further responses

Changing social media icons & text in prefooter

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection