You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.
Let me preface this by saying I am not making this up, and I have tested this on multiple devices.
#kwidgetgroup_FOOTER is setup in our skin css to display centered on all screens.
When the page loads, the kwidgetgroup_FOOTER div instead displays to the left. However when I open devtools to see what's up, it immediately displays correctly. Smells like javascript to me, but I'm lost. Really and truly.
For now, you can see at:
gardenofone.com/store
from skin's all.min.scss (I use SASS):
#kskin_foot {
background-color: $header-footer-color;
width: $main-wrapper-width;
margin: auto;}
#kskin_foot{
border-radius: 0 0 20px 20px;}
#kskin_footinner {
max-width: 1100px;
margin: 0 auto 0 auto;
text-align:center;}
#kwidgetgroup_FOOTER{
float:none;}
And just in case it matters, I keep a log of all the code changes I've made. Here are my logs:
Edited apps/ecom/ECOM/includes/prodshowextras.php
Commented out social media icon display (sharing) and added code to display addtoany display
id="add_to_any_prodshowextras"
Edited core/CORE/includes/skinwidget_account.php
to reorder link display
Edited core/CORE/includes/skinwidget_social.php
Added display for <h4> Follow </h4>
Edited apps/ecom/ECOM/includes/skinwidget_minisearch.php
Commented out "advanced search" div
----------------------------
/media/scripts/common.min.js
Added conditional to kWidgetManager
jQuery('.kwidget_clickcontrol .kwidget_wrap').each(function() {
if (jQuery(this).find('.kwidget_icondrop .kwidget_hover, .kwidget_fulldrop .kwidget_hover')) {
//Added by Brian
if (jQuery(this).attr('id') != "ecom_skinwidget_categories") {
//-------------
jQuery(this).addClass('kwidget_wrap_click');}
//-------------
}
//-------------
});
Offline
Put a hold on answering this for the moment. I tried using addtoany buttons on a wordpress site and the css of it and things near it got wonky. I've contacted addtoany.
Offline
I got it figured out (kind of).
I still have no idea what exactly went wrong, but I was able to fix the problem by specifically overriding the problematic css in the skin's all.min.css.
Here's what it was doing:
Let's say that media/skins/css/all.min.css contained something like
.bluelinks ul > a { color: blue; }
skins/[skinname]/css/all.min.css contained
#the_most_important_link { color: black; }
and skins.php contained
<ul> <a href="somewhere" id="the_most_important_link" class="bluelinks"> Hello Universe </a> ...
After adding the addtoany icons, that link would display blue instead of black. Maybe it just illuminated a problem that was already there (probably my own making), but I fixed by adding to the skins/[skinname]/css/all.min.css something like
.bluelinks ul > a #the_most_important_link { color: black; }
in order to fix the areas of weirdness.
I checked a dozen times or so to make sure it was linking the css files in the correct order.
Still confused as all get-out but at least it's working now!
Offline
Gotcha. Something like this:
.bluelinks ul > a {color: blue !important;}
Or:
#the_most_important_link {color: blue;}
Would work too. Id references (#) override class references (.) in CSS. So what you're seeing in the skin CSS file is an id reference and in the main CSS file you see a class reference. The id reference will always override the class reference.
Offline
Thanks, again, Nick. I think I finally got something of a handle on what happened, and it mostly revolves around lack of sleep and a misunderstanding of precedence, specificity, and !important. The added css and js from the addtoany buttons just illuminated problems that were already there but had yet to manifest.
For people new to css (like me)
https://css-tricks.com/when-using-impor … ht-choice/
https://css-tricks.com/specifics-on-css-specificity/
When I get a spare chance I'll go in and fix things the right way (not my wonky patches)
Offline