Custom Footer / X Ethos stack

I have used Html and CSS to create a footer for the aforementioned theme. When I use the code combination in an online editor the footer looks just the way I want it. However, when I transfer it to the Theme it looks wrong.

This image is how it looks on the site…


This is how I want it to look and it looks like this using the online editor??

Am I missing something?
I have the HTML and CSS but it won’t allow me to upload (file extension not allowed)

Hi @JB2012,

Thanks for reaching out.
What you are expecting can be done by customizing the Footer using the Footer builder, which is exclusively available with Pro not with the X you are using. I would suggest you upgrade to the Pro theme, please go through the process here: https://theme.co/docs/converting-from-x-to-pro

I would also request you go through the following article on Footer Builder.

Hope it helps.
Thanks

Thank you for your response.

I’ve converted the license to pro and have installed the new theme. Following the instructions regarding the footer, the builder makes no mention of HTML, and I see no HTML in the elements? How do I insert the HTML code? I see where to put the CSS code as that hasn’t changed.

Previously I imported demo content and edited that and then just cloned pages. So I’m not great with building from scratch, that is why I wanted to use the HTML code.

Can you assist with this? Sorry to be a bother.

Regards
Jason

Hi Jason,

Glad to know that you have chosen the Pro, you can acheive the expected design by following the instruction given in the previous documentation and the youtube videos in the following link

If that does not help, please share the URL along with the credentials and let us know where you need our help. Please remember that creating it from scratch is beyond the scope of theme support. I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

Thanks,

Since converting to Pro I now have a number of new issues and as I can’t revert to X I need your help.

  1. I have watched the Youtube videos and they don’t help.

  2. The footer I created with HTML still shows up as I put it in a Widget in the footer area… it just doesn’t display correctly?

  3. I imported a footer from design cloud and assigned it to the contact page and it shows up ok no problem.

  4. When I enter the Footer builder the panel on the right just displays the buffering wheel and nothing happens.

  5. If I disable all the plugins on the site when I enter the footer builder it loads the front page which is a landing page I created with no headers or footers… so I get a message saying I need to assign the footer to a page with footer output… I have done that but it keeps loading the front page so I cant edit the footer.

  6. I have selected to have the post carousel display in the masthead section but it only displays on the about page and contact page?

I have created a user called XPRO and will attach the credentials via secure note… Please Help.

Hey @JB2012,

1.) We are glad that you watch the video tutorial about Footer Builder.

2.) I check your custom HTML footer in the widget area and you need to style it with CSS in order to mimic your desired colors and layout.

3.) I don’t see the issue here, would you mind explaining more information because the setup of your Footer Builder was set to a specific contact page called Contact.

4.) It was a plugin conflict with the Autoptimize plugin, I tried to disable the said plugin and the circle spinning was gone. To know how to improve the performance using the theme, you may check this doc.

5.) It was the same answer with the number 4

6.) The reason why the post carousel is not displayed on the other pages is that it conflicts with your custom footer in the widget area. A conflict between scripts, as you can see your about page doesn’t have a footer while your contact page is using the footer builder that’s why the post carousel is showing on that pages.

Hope that helps.

Ok,
I understand all that you have said.

I will disable Autoptimize when I need to edit the Footer… but can you explain how to put HTML code into the Footer builder so I can delete the HTML widget i put into the footer area and then it won’t conflict with the post carousel.

Could you look at the CSS code I have added and tell me where I have gone wrong because as you can see in my first post, everything looks good in the online editor, but when I insert it into the site it goes wrong?

Thanks.

Hey @JB2012,

You can use the Raw Content element to add your custom HTML code.

The theme CSS is overriding some of your CSS and in order for you to mimic your online editor layout, you need to override our theme CSS. Since this involves custom CSS code, further enhancement should be directed to 3rd party developers or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps and thank you for understanding.

Thank you for your help.

Regards,
Jason

Hey Jason,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.