[Jimmy PParticipant]

1. I would like to change the widget colors that are located in my footer. I Would like to change the text color to white and the background color to black without changing the entire theme from Integrity Light to Dark.

2. Going with question 1, I would like to change my Top bar above the header to black as well with white text (to match)

3. Is there any way to add a Shopping Cart icon to the Top bar? Essentially I would like to put a shopping cart up at the top of my page – on the top right of the page and move the social icons to the left of the top bar if possible. What are my options for this?

Any help would be greatly appreciated!

Thank you!

[NicoModerator]

Hi There,

Thanks for writing in.

Would you mind sharing us your URL and some screenshots of the issue so we could take a closer look.

Thank you so much.

Cheers!

[Jimmy PParticipant]

Hi,

Here is the current home page for the site: http://www.empowersperformance.com
Screenshot: http://prntscr.com/6hgoxw

The theme we were using before was Musica:
Screenshot: http://prntscr.com/6hgqi3

It had the cart icon at the top right – which we wanted to carry over to this theme if possible. Also the color schemes like the black top header and footer widgets.

This is my brother’s site that he had someone build for him – I took it over and moved it to X because I had such a great experience with the first site I did. The support you guys provide here and the knowledge base couldn’t make it easier. I had never worked with WordPress before and now get phone calls from new clients that want to work with us because of how professional we come off just by visiting our website.
I am trying to bring that same idea to my brothers company and just want to tweak some things here and there if possible.

Thanks again for all you do!

[ChristopherModerator]

Hi there,

#1 Please add the following CSS under Customize -> Custom -> CSS :

.x-colophon {
  background-color: black;
}
footer h4.h-widget {
  color: white;
  text-shadow: none;
-moz-text-shadow: none;
-webkit-text-shadow: none;
}
footer .widget ul li a, footer .widget ol li a, .x-comment-time, footer p,.x-colophon.bottom .x-nav li a,x-colophon-content {
  color: #fff;
  text-shadow: none;
-moz-text-shadow: none;
-webkit-text-shadow: none;
}

#2 Add these as well :

p.p-info,.p-info a {
  color: white;
}
.x-social-global i {
  color: white;
}
.x-topbar{
background-color:black;
}

#3 You can add it this way :

<a style="float:right" href="#">Cart</a>

To move social icons to left:

.x-topbar .x-social-global {
  float: left;
}

Hope it helps.

[Jimmy PParticipant]

Thank you so much for your help!

Everything you suggested worked great. However, I am still unable to get the shopping cart icon in the top right of the header topbar content (where the social icons used to be). Essentially I would like the shopping cart to placed there and possibly other woocommerce page listings like “My Account” and “Shop”

Also, it seems like the colors for the header topbar won’t change from black. The social icons color changed, but for any wording it remains black.

Thanks again.

[Nabeel AModerator]

Hey Jimmy,

To change the background color of the Topbar you can use this code:

.x-topbar {
  background-color: #fff;
}

To add the shopping cart in your Topbar you can add the following code in Appearance > Customize > Header > MISCELLANEOUS > Topbar

<a href="http://yoursite.com/cart"><i class="x-icon-shopping-cart"> </i></a>

You can change the link with the actual link to the shopping cart.

Hope this helps!

[Jimmy PParticipant]

Thank you for your help.
I still cant get it on the top right side.
Since I am using the Custom CSS:

.x-topbar .x-social-global {
float: left;
}

It seems I cant get the cart on the right side of page –

Any ideas?

[FriechModerator]

Hi There,

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

p.p-info {margin-top: 5px !important;}

Hope it helps, Cheers!

[Jimmy PParticipant]

When the page becomes smaller (responsive) it moves the cart to the top right side of the page – but in normal settings I still cant get it over there.

Heres my CSS:

.x-colophon {
  background-color: black;
}
footer h4.h-widget {
  color: white;
  text-shadow: none;
-moz-text-shadow: none;
-webkit-text-shadow: none;
}
footer .widget ul li a, footer .widget ol li a, .x-comment-time, footer p,.x-colophon.bottom .x-nav li a,x-colophon-content {
  color: #fff;
  text-shadow: none;
-moz-text-shadow: none;
-webkit-text-shadow: none;
}
p.p-info,.p-info a {
  color: white;
}
.x-social-global i {
  color: red;
}
.x-topbar{
background-color:black;
}
.x-topbar .x-social-global {
  float: left;
}

.woocommerce li.product .entry-header, .woocommerce-page li.product .entry-header {
   position: static;
}

p.p-info {margin-top: 5px !important;}

Here is my Header Topbar code:
<a href="#"><i style="color: red; font-size:28px; float: right;" class="x-icon-shopping-cart"> </i></a>

Thanks

[NicoModerator]

Hi There,

Try adding this in your Custom CSS:

.x-topbar .p-info{
float:right;
}

Hope it helps.

Cheers!

[Jimmy PParticipant]

Thank you! Works perfectly.

[Jimmy PParticipant]

I added some links to different parts of the site – WooCommerce cart, checkout, account, etc..

However, the wording is stuck together now on the right side header topbar.
See the site: empowersperformance.com

Here is my header topbar content:

<i style=”color: red; font-size:28px; float: right;” class=”x-icon-shopping-cart”> </i>
<i style=”color: red; font-size:20px; float: right;”>Checkout</i>
<i style=”color: red; font-size:20px; float: right;”>My Account</i>
<i style=”color: red; font-size:20px; float: right;”>Membership Login</i>

How can I get spacing between the words?

Thanks

[NicoModerator]

Hi There,

Try adding this:

<a href="#"><i style="color: red; font-size:28px; float: right;" class="x-icon-shopping-cart"> </i></a>
<a href="#" style="color: red; font-size:28px; float: right;margin-right: 15px;">Checkout </a>
<a href="#" style="color: red; font-size:28px; float: right;margin-right: 15px;">My Account</a>
<a href="#" style="color: red; font-size:28px; float: right;margin-right: 15px;">Membership Login</a>

Adjust 15px to your customization.

Hope it helps.

Cheers!

[Jimmy PParticipant]

Yes it did, thank you!

[Nabeel AModerator]

Glad it worked.

Cheers!

[Author]

Posts