[uppawayParticipant]

Hi,

I looked up how to edit the footer in the forum and was confused. Do I need to go into the CSS to alter this? I am not sure how to do this and if there is training, I’d appreciate the video or instructions.

http://theme.co/x/member/?s=edit+footer

Thanks!

Jessie

[DarshanaModerator]

Hi there,

If you have enabled footer widget areas, you can add/edit it from Appearance -> Widgets section on WordPress back-end. There you will see Footer widget areas.

To edit the footer content at the bottom of the page, head over to Appearance -> Customize on WordPress back-end. Then click on the Footer tab on the Customizer menus. There you will see a section called “Footer Content”.

Thanks!

[uppawayParticipant]

Thank you!!

[DarshanaModerator]

Glad we were able to help 🙂

[WillbrookParticipant]

I too would like to edit the footer (not the widget), appreciate that I’ll need to use the Custom CSS as changing the text size and colour isn’t available in Footer tab on the Customizer menus. Could you help with some coding. I’ve only been using X since last Monday, thanks Paul.

[DarshanaModerator]

@willbrook

To assist you with this request, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[WillbrookParticipant]

Sorry I should have been more specific. Code to change the footer text size. Code to change the footer text color. Also code to change the Footer Widget icons, if you wouldn’t mind.

The url is: http://s521208062.websitehome.co.uk

The site is a bit of a storyboard as I’ve dumped lots of components in to see how they look and what space they take up, not quite getting roung to tidying it all up, thanks again, Paul.

Oh the code I sorted out to change the widget title is:

/* Widget title */
.x-colophon.top .h-widget {
font-family: Puritan;
font-size: 20px;
color: orange;
}
Which seems to work OK – I’m not a coder but I can follow logic 😉 Thanks again.

[Paul RModerator]

Hi,

You can add this under Custom > CSS in the Customizer.

/* Footer text */
.x-colophon.bottom .x-colophon-content {
        font-size: 11px;
        color:Red;
}

/* Footer Menu */
.x-colophon.bottom .x-nav li a {
        font-size: 11px;
        color:blue;
}

/* Footer Socials */
footer.x-colophon .x-social-global a i {
        color: #66ccff;
        font-size: 35px;
}

You may change the values to achieve your desired result

Hope that helps.

[WillbrookParticipant]

Thanks for such a speedy, I’ll have a go and get back you 😉

Oh sorry what about changing the Footer text style (font), tahnks again, Paul

[WillbrookParticipant]

Hi there

The first two worked great, which helped me work out how to change the font only trouble is it’s all caps, what’s the code to revert it back to upper and lower caps.

The last request is code to change the Footer Widget icons, if you wouldn’t mind. I’ve got four footer widgets with text in two, archives in one and pages in the other – how can I change the initial icon? I’ve almost worked out for myself how to change the styling.

Thanks again for all your great help, Paul.

[RupokMember]

Hi there,

Thanks for updating. You can modify the content of the below widgets –

/* For Text widget */

.widget_text .h-widget::before {
  content: "\f054";
}

/* For archive widget */

.widget_archive .h-widget::before {
  content: "\f040";
}

/* For pages widget */

.widget_pages .h-widget::before {
  content: "\f0f6";
}

You can find the UNICODE value of the icons from Font Awesome Icons page.

Hope this helps.

Cheers!

[WillbrookParticipant]

Hi again (sorry),

I’ve been on the Font Awesome Icons page and identified the unicodes you mentioned. I’ve tried everything I can but I can’t get the icon to display ;-( it says use the backslash to start the line then the code (if you use quotes it just displays the text). As a newbie, I haven’t got sufficient knowledge to go any further. I’ve googled the use of unicodes and am now more confused, could you help. please?

/* For archive widget */

.widget_archive .h-widget::before {
content: \&#xf039&;
}

&#xf039& is the unicode for a ‘burger menu’ – I’ve tried various others still with no joy, disappointing as I’m almost there, hope you can help (again), thanks Paul.

[ZeshanMember]

Hi there,

You need to wrap the unicode inside single quotation marks. So for example, your code for archive widget would be:

/* For archive widget */

.widget_archive .h-widget::before {
   content: '\f039';
}

This code needs to be added to your in your child theme ‘s style.css file.

If you are adding the code under Custom > CSS in the Customizer, you need to use double slashes, so the code would become:

.widget_archive .h-widget::before {
   content: '\\f039';
}

Thank you!

[Author]

Posts