Kryptronic Software Support Forum

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.

#1 02-29-2020 15:20:46

garden1
Member
Registered: 02-06-2020
Posts: 61

Widget Group Not Conforming To css

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

 

#2 03-01-2020 01:29:15

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Widget Group Not Conforming To css

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

 

#3 03-02-2020 09:01:38

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: Widget Group Not Conforming To css

Alright.  Please post back if you need assistance.


Nick Hendler

Offline

 

#4 03-02-2020 11:26:42

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Widget Group Not Conforming To css

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

Code:

.bluelinks ul > a {
   color: blue;
}

skins/[skinname]/css/all.min.css contained

Code:

#the_most_important_link {
   color: black;
}

and skins.php contained

Code:

<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

Code:

.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

 

#5 03-03-2020 09:32:18

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: Widget Group Not Conforming To css

Gotcha.  Something like this:

Code:

.bluelinks ul > a {color: blue !important;}

Or:

Code:

#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.


Nick Hendler

Offline

 

#6 03-08-2020 17:40:03

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Widget Group Not Conforming To css

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

 

#7 03-09-2020 07:50:25

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: Widget Group Not Conforming To css

Thanks for the post back.  I'm glad you're on the way to working it out.


Nick Hendler

Offline

 

Board footer