How to edit footer layout

Hi, I don’t see a whole lot of options on X Theme so far when it comes to editing the footer… I haven’t looked super hard yet though. As far as I can see you can turn on/off the footer, menu, social icons, etc., and do some coding for the content. I have some layout issues though that I want to adjust. For example, I have about 16 post category links in one row and I want them to be in two rows, 8 on top and 8 on bottom of each other. Also I want to add some more social icons and adjust their positioning as well. How do I go about doing this, adjusting layout?

Thanks!

Hi there,

The options of the footer layout can be found in X > Launch > Options > Footer. There you can set few layout options such as the columns.

Then the rest is set from the Appearance > Widgets to assign different widgets to one of the footer widget areas.

You do any have more options regarding the footer in X. You either need to find a 3rd party widget which you can assign to the footer to do such a layout, or customize the theme yourself or use the Pro Theme which has a specific footer builder and it will be suitable for your case. For more information about the builder of the Pro:

Here is the information on how to convert from X to Pro:

Please consider that Pro is a separate theme and may not have some of the functionalities of the X theme. Such as Demo Import.

Thank you.

Ok thanks a lot for the information, I don’t want to go to Pro just yet as this is my first website… although I guess that is what I was looking for. What about any custom CSS… is there a code that could put a break in there so I can split the footer links into two lines instead of one long line (please see website). Also, is there a way to add other social icons besides the default ones?

Thanks

Hi There,

Please add the following css to the customizer CSS and let us know how it goes.

.x-colophon.bottom .x-nav {
    max-width: 500px;
    margin: auto;
    line-height: 2;
}

Thanks

Perfect.

What about the social icons… is there a way to add other social icons to the footer besides those provided by default… for example, Bandmix?

Thanks!

Hello @yearegods,

Thanks for asking. :slight_smile:

Yes, absolutely. If you would like to add additional social icons, I suggest you to please refer solution mentioned in following ticket:

Thanks.

That ticket was a bit confusing but I did in fact figure it out with this ticket (in case anybody else wants to know how to add new/custom social icons to their site):

Unfortunately though I can’t find the Unicodes to some pretty common sites out there that I’m looking for using Font Awesome’s icon list (https://theme.co/apex/forums/topic/i-class-symbol-list/)… like Craigslist, Bandmix, Kompoz, etc. Are there any alternatives to Font Awesome or any other way to add these icons to my site?

Thanks

Hello There,

The icons in the theme is relying to Font Awesome. If the icon you need does not exist, you will have to find another icon font where you can use the icons you want. If there isn’t available, you might need to use a custom image icon instead and place it in the code.

Have a nice day and take care!

Cheers

Ok great, how do I input a custom image icon into the code? And is it legal to sort of copy/paste an image icon (like eBay’s or Craigslist’s) without their permission/consent? I’m worried that the reason maybe these 2 icons (among others) don’t exist on Font Awesome or other icon fonts is because perhaps they are forbidden by those brands?.. I don’t know. Seems strange to me that Font Awesome and others would not include them.

Hello @yearegods,

You need to add the relevant code outputting social icon. To get started you can refer thread link that you have shared. Also most of the well known companies maintain resources for Press that includes logo, icons and other stuff. Here is the link that can be used to download eBay logo https://www.ebayinc.com/stories/press-room/#assets-logos

Thanks.

Ok, well that’s interesting… thanks for the info about press resource icons. That will probably be of some use in the future. However, I’m sorry but I’m still not really understanding. You say I need to “add the relevant code outputting social icon” and I’m trying to figure out what that means. Referring back to my first thread where friech was helping somebody input a yelp icon… what exactly do I change in this line of code if I want to use a custom image icon like the eBay one you referenced above?..

I know for Yelp it was as simple as copy/pasting the unicode “f1e9” in there after “data-x-icon=”&#x"… but I’m not seeing such a corresponding unicode attached anywhere to that eBay icon you referenced. How would I get it in there?

Thanks

Hello There,

Right after the line for Yelp, you will need to add your own code with the image icon in it. Have it something like this:


$output .= '<a href="your-craiglist-link" class="craiglist" title="Craiglist" target="_blank"><img src="http://placehold.it/30/30/ffee66" alt="placeholder"> </a>';

Please be very careful with the quotes to avoid any fatal error.

Please let us know how it goes.

Ahh ha, very cool. Ok I guess my only other question is how do I select a hover color for the background… so it lights up like the other ones when hovered over.

Thanks!

Hello @yearegods,

I checked craigslist.org to see what’s the link hover color they have on website and it’s seems that they are using purple color. In that regards you can add following CSS under X > Launch > Options > CSS to change hover color of Craigslist icon:

.x-social-global a:hover.craiglist {background-color: #800080;}

You can change color code as per requirement.

Thanks.

Ha… that’s awesome. I wish I could ask you how you found the color code but I know it will be a different support tech the next time! Thanks a lot for the help everybody, this was a long one!

Thanks,

Jake

You are most welcome!

Thanks

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