mineralman

To be honest it was never “Fixed”

The solution was to disable mod_security for the site. That fixed the problem. I wasn’t to keen on that idea so I created a subdomain shop.nutritionap.com – and run WooCommerce there.

mod_security was enabled in the sub domain so… it had to be a conflict with probably my theme.

Ok, I appreciate the quick answer.

I’ll stick a pin in this idea for awhile. I’ll check back in 3 or 4 weeks to see if you came to a conclusion as to whether or not it can be done.

All the best on your projects!

Took awhile but all plugins are active and tabs is working! Its the start of a beautiful day

I have disabled mod_security for the site

Ok, now I am in beyond my depth. Whats my move here? Ask the hosting company about this? I absolutely have no problem giving you access if you would like.

Reading about mod security now. InmmotionHosting does use it, thats my hosting company

I went ahead and disabled everything except WooCommerce and Tabs.

Take a look if you have a chance. If there is a way to get past this I am all for looking into it.

My theme, WooCommerce, and Tabs.. All other plugins are disabled.

Still have a conflict.

If it is between my theme, woo, and you…. Woo or you lose that battle. Not giving up the theme for tabs.

Got it to work but I used margin-left: ##px; and that seemed to work the best.

my goal was to be able to adjust image placement as needed. I used 2em, 1em and 0em as values but none worked to move the image.

On mobile the responsive tabs want to stack, so If I an shrink the icon image spacing maybe I can use the same [tabs} for small tablets and phones and not have the actual tabs stack.

If it can be done, great! If not, no worries, I adapt well

Hi Matt

https://nutritionap.com/

I turned WooCommerce back on and the tabs broke on the HomePage. I have not set up WooCommerce except to identify countries and currencies and allow it to create needed pages with auto setup.

No luck moving the icon:

https://nutritionap.com/

used:

.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li .squelch-taas-tab-icon {margin-left: 0em;}

and

.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li .squelch-taas-tab-icon {margin-left: 0em !important;}

Here is the Tab usage:

[tab title="US" icon="https://nutritionap.com/wp-content/uploads/2013/01/MiniQRCodeKTGH-e1375271076869.jpg"]

Works great. If I could adjust the image horizontally I might not need to create a new mobile version of tabs. (to avoid stacking tabs on mobile portrait devices)

OK. THis is the code used to get icon on tabs, BG Nav Bar color change and Active Tab Color White:

.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li {font-size:85%;}
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a {color: #FF1C33;}
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-state-hover a {color: #FF1C33;}
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav {background-image: none;background-color: #A8E71E;}

.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li .squelch-taas-tab-icon {height: 26px;vertical-align: middle;}
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a .squelch-taas-tab-icon {height: 26px;vertical-align: middle;}
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-state-hover a .squelch-taas-tab-icon {height: 26px;vertical-align: middle;}
.squelch-taas-override.squelch-taas-tab-group.ui-tabs .ui-tabs-nav li.ui-tabs-active a .squelch-taas-tab-icon {height: 26px;vertical-align: middle;background-color: #FFFFFF;}

Q: Can the Icon images placement be adjusted to the left using padding or margin?

All thats left is changing the inactive tab BG color to #FFFFFF

I have the hover tabs bg already, just cant figure out the inactive state so the tab color is white all the time

In and Working. Seems now to line up text and icon image and Change BG inactive tab color to #FFFFFF. Any suggestions on

moving the text up

or the image down?

https://nutritionap.com/resources/