Several glitches with the X and Pro theme today

[IanEricson]

Hello Everyone. The X and Pro themes are my favorite themes. I have at least 20 licenses and almost that many good looking websites.

Today I wanted to put together a site quickly and have run into all sorts of problems which I don’t normally have. This went from a quick site to it is going to take days to get the bugs worked out site.

I will attach a screenshot. I have tried several bits of css and none have helped. Normally they work but in today’s website, they do not work at all.

I have a problem with the Top Bar. For some reason the phone number displays at the top with a lot of space, then the social icons display at the bottom of the top bar. Can they display on the same row and then let the top bar display to be half as tall? Also, the social icons are kind of greyed out and not as visible as normal. How can I control the color of the social icons?

Then there is the footer and bottom bar. The titles are nice and bright white. They display really nicely. How can I make the rest of the text in the footer and bottom bar display as nice white text?

There is a white gap above and below the content area on the homepage. I have opened a ticket earlier today but no solution could be found. I tried both the X and Pro themes, css, and different page templates. I have at least 5 other sites using the Pro theme and with a couple bits of css that white gap dissapears. However, nothing works to make that gap dissapear on this site. I use all the same themes and plugins typically to build websites and am surprised that what works on all of the other sites does not work on this one.

Please take a look at the screenshot and I suspect you know exactly how to solve all of these issues. Thank you in advance for all of your work and assistance.

[IanEricson]

https://www.temporaryserver15.com/

[christopher]

Hi Jon,

I have checked the topbar of the website and found out that the HTML P tag with the class of p-info which is supposed to be the wrapper of the topbar information can not hold the info and it shows empty and the rest of the information pushed below:

Then, I checked the actual source code and I see this:

As the wrapper tag of the topbar section is the P tag, you can not use any other block-level tag inside the topbar. So you need to remove the P tags that you have added in the topbar option:

---

The color of the social media icons in the header is transparent white in Ethos stack. You can override that by adding the CSS code below to Pro > Theme Options > CSS:

body .x-social-global a {
   color: #fff;
}

Feel free to change #fff with whatever color code you like.

---

The link colors of the footer menu are transparent white in the Ethos stack. You can override that by adding the CSS code below to Pro > Theme Options > CSS:

body .x-colophon.bottom .x-nav li a,
body .widget ul li a,
body .widget ol li a,
body .widget_tag_cloud .tagcloud a,
body .widget_product_tag_cloud .tagcloud a,
body .widget a,
body .widget p {
    color: #fff;
}

Feel free to change #fff with whatever color code you like.

---

The gap at the top/bottom of the content area is another characteristic of the Ethos stack due to its unique design. You can override that by adding the CSS code below to Pro > Theme Options > CSS:

body .x-container>.offset {
    margin: 0;
}

I hope we could be of help clarifying why you see the behavior on the website .

Thank you.

[IanEricson]

Hello Christopher.Amirian,
You knew how to address every one of those. Thanks for making that so easy! I used each of your specific recommendations and they worked perfectly the first time!
Thanks,
Jon

[friech]

We are delighted to assist you with this Jon.

Cheers!