Logo is Super Small & Menu Items are not Contained

[David Martin – Support]

You need to utilise CSS. You can add your own CSS to Theme Options => Custom CSS

.page-id-80 #main-container .container:first-of-type {
    background-color: rgba(0,0,0,0.7);
}

[ap2garci]

Awesome! How can I do the same sort of thing with only the icon boxes in the middle of this page: http://exertd.com/contact-us/

So where it has the icons and contact info I want that box behind it to be like what we just did with the semi-transparent box behind the text.

[David Martin – Support]

You would need to first remove the background color settings from the icons.

Then add a custom class to each icon using the “Extra Class” option in each icon asset. Ex:

Custom Class: bg-color-opacity.

Theme Options => Custom CSS

.bg-color-opacity {
   background-color: rgba(0,0,0,0.7);
}

[ap2garci]

Great! Now the last I need that I can’t figure out is the tab section on this page: http://exertd.com/faq/

I need the tabbed section to have a transparency background to standout as well.

[David Martin – Support]

You apply the same concept. Use the Chrome web inspector to locate the div container the content, this will let you know what class is being used. You then add your CSS to that class.

Ex:

.spb_tabs .tab-content>.tab-pane {
    background-color: rgba(255,255,255,.7);
    padding: 0 25px;
}

[ap2garci]

Great. Since you’ve helped me with this I figure you can find the solutions to the problems I have now. There’s a couple issues with the responsiveness now:

1) On the Contact Page (http://exertd.com/contact-us/) the semi-transparent background behind the text is not appearing on mobile so it blends into the background too much. It looks great on the desktop but all mobile responsiveness is off.

2) Now, on the contact page, the orders & returns page, the privacy policy page, and the terms of use page the background photo looks great with the transparency on desktop but all mobile versions are not responding correctly to scale the image appropriately. The return policy, privacy policy, and terms of use pages all keep the semi-transparent background like the desktop version unlike the contact page but the photos on all of them are not re-sizing appropriately.

Thanks!

[ap2garci]

I’m not super technical with the coding so that is a little difficult for me, but this code puts the transparency behind the tab content but not the tab labels themselves so they’re still hard to read:

.spb_tabs .tab-content>.tab-pane {
background-color: rgba(255,255,255,.7);
padding: 0 25px;
}

[David Martin – Support]

Hi there,

Unfortunately that customisation is beyond our scope of support as it is more work than a small customisation. We only provide support for theme issues, and at times basic customisations.

While we’d love to be able to support every customisation request, we simply don’t have the time.

We recommend that you seek a freelance developer if you need to make that customisation:

https://codeable.io

Home

http://www.microlancer.com

[ap2garci]

Ok I will seek help elsewhere for the tab customization. Can you just tell me one final thing? How can I hide the background image of the certain pages from showing up on mobile? Or have the adjust properly? Because the exertd.com/contact-us, exertd.com/terms-conditions, exertd.com/privacy-policy, and exertd.com/return-policy do not respond automatically for mobile so I need to place a custom css for each page to hide the background images of these pages or have them respond to mobile. That’s my only issue now.

Thanks.

[Rui Guerreiro – SUPPORT]

Hi,

Just a doubt, do you mean for instance in the contact us page to remove that background of the Telephone?
https://www.dropbox.com/s/dc96b1zfedlf68t/Screenshot%202016-10-04%2018.18.42.png?dl=0

-Rui

[ap2garci]

Preferably make it mobile responsive so it’s not really big OR remove it completely and make the page background a different color just on mobile.

[Rui Guerreiro – SUPPORT]

This css should sort it, I used the id’s of the pages.
Already added the css below to your custom css option

@media only screen and (max-width: 479px){
.page-id-65 #main-container , .page-id-392 #main-container,.page-id-414 #main-container,  .page-id-405 #main-container{
   background: #000!important;
  }
}

Hope it helps.

-Rui

[ap2garci]

Thanks. So another question. No matter what I change in the font settings, I cannot change the hover font of the shopping cart icon or the wishlist icon where is says “Your Cart Is Empty” or “Your Wishlist Is Empty” . The same is true for the font type and size when attempting to search something within the search icon. How do I change these if none of the fonts are associated with them?

[ap2garci]

Also, How do I hide the stock availability on the front end?

[ap2garci]

I figured out the stock on the frontend display but I still need help with these issues:

1) No matter what I change in the font settings, I cannot change the hover font of the shopping cart icon or the wishlist icon where is says “Your Cart Is Empty” or “Your Wishlist Is Empty” . The same is true for the font type and size when attempting to search something within the search icon. How do I change these if none of the fonts are associated with them?

2) Is it possible to change the font for all shop & individual product pages? I would like a specific font different for everything else for these pages.

3) I enabled the mobile filters to be visible all of the time but I cannot see any filters on the product shop pages, my pages are very plain without this.