simcoweb

Greetings. We're running a WooCommerce cart for a client. The problem is that his supplier apparently doesn't provide any type of spreadsheet with their product info that we can use to import them into our cart. As a result, it's taking literally months to gather images, product descriptions and so forth from the supplier's site. The client is clueless on what to do and i'm tired of hand-scraping info off their site and trying to match it up with WooCommerce's needs regarding product fields. So, what i'm hoping is SOMEONE... anyone....has info on a script that can harvest product information from a source site and compile it into a CSV file. I've searched in some of the typical places but can't find anything suitable or product orientated. Please advise if you have info that could help. Thanks!

Brilliant! You're right, I wasn't even thinking in that direction. Probably because I used the CSS Classes element of the Wordpress custom menus to simply 'assign' the class to the menu thinking that I could configure a way to 'unassign' it later. So, as you suggested, I incorporated the code into an @media screen directive and, so far, it works perfectly. It displays on my computer but is removed on mobile devices. However, there's still going to be this issue of browser width. I'm not 100% certain how to handle that.

Perhaps this will help. Here's the code creating the float-shadow effect. I've tried several variations within the @media directives to 'turn off' the float-shadow effects (or, disable them basically). But to no avail. Perhaps you have some insight on which directives need to be present and what the settings are? /* Float Shadow */ .float-shadow { display: inline-block; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 0%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } .float-shadow:hover, .float-shadow:focus, .float-shadow:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); /* move the element up by 5px */ } .float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ }

Thanks for your response. I've definitely considered that but there's about 40 lines of CSS related to the float-shadow class and there's 5 media queries. This could mean 200 more lines of CSS to bloat the page load. Unless, of course, there's a way to isolate the main components only and have directives just for those. So far, however, my experiments have not produced the results needed. Just for FYI, here's the code in question: /* Float Shadow */ .float-shadow { display: inline-block; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 0%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } .float-shadow:hover, .float-shadow:focus, .float-shadow:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); /* move the element up by 5px */ } .float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ }

I've added a CSS class to the main menu of a Wordpress site and wish to remove the class if the browser width drops below a certain number. I've tried a number of different approaches but none has worked. Some examples: $(document).ready(function() { if($(window).innerWidth() <= 751) { $("#top-menu .menu-item").removeClass("float-shadow"); } }); $(document).ready(function() { if $(document.width < 767) { $("#top-menu .menu-item").removeClass("float-shadow"); } }); $(function(){ if $(documentElement.clientWidth <= 767) { $("#top-menu .menu-item").removeClass("float-shadow"); } }); And a bunch of variations of these. None worked. Anyone have an answer for this? Thanks in advance for your help.

Thanks for the response and the idea. I considered that. The problem is there's about a half dozen @media controls to consider and the .float-shadow class contains 40 lines of CSS code. That would add about 240 extra lines of code to counteract the original instructions. Essentially a lot of extra bloat. It would be much simpler if there was a method of removing the CSS class from the menu completely. I've been looking at a potential solution with jQuery using their removeClass function but haven't had any luck with the proper syntax to determine the browser width and trigger the removal of the class. If you're familiar with jQuery please, by all means, post a function that you think would accomplish this.

I have Wordpress based site where i've included a class for the main menu that produces a hover and shadow effect. Problem is it breaks the menu in the fully responsive mode when the display adjusts for the viewing dimensions. So I need to remove that class from the menu for anything related to the @media controls. The site is viewable here: http://ailimconsulting.com If you view it full screen then you'll see the hover effect. Shrink it down and you'll see the menu collapses (it's designed to) but when you use the menu the shadow/hover effect is still present and 'breaks' the menu (loooks like jumbled crap). We just want to remove the hover effect for viewing on mobile devices. I'm not sure if there's a CSS way to 'remove' a class. This may have to be done with jQuery. I'm looking for options and if anyone knows how I would either remove or counteract the float-shadow class. Thanks.

Greetings. I'm working on a Wordpress site utilizing a fully-responsive theme ( www.ailimconsulting.com ). One of the features that was requested was the integration of a special menu hover effect found at GitHub that creates a shadow below the menu item being moused over ( you can see this effect by visiting the link above ). As part of the fully responsive nature of the theme, when the browser collapses to a certain point or the site is viewed on mobile devices the menu itself collapses to a single-tabbed system. The problem is that the class that controls the shadow float causes this collapsed menu to look like crap. So, we want to remove the directives of this class from all the mobile viewing settings ( the @media controls ). The effect is added to the menu via the Appearance / Menus in the CSS Classes field in each menu item with the class name of .float-shadow. The effect works perfectly in full browser mode but needs t be removed from all the @media sections of the CSS that control the fully-responsive nature of the theme in various devices dimensions. For example, these are the @media directives: /*-------------------[320px]------------------*/ @media only screen and ( max-width: 479px ) { } /*-------------------[480px]------------------*/ @media only screen and ( max-width: 767px ) { } @media screen and ( max-width: 782px ) { } @media only screen and ( min-width: 768px ) and ( max-width: 980px ) { } /*-------------------[768px]------------------*/ @media only screen and ( max-width: 980px ) { } My question is HOW can I tell these @media controls to NOT display or use the .float-shadow parameters and class. Any help with be much appreciated! If you need the actual CSS for the .float-shadow controls then I'm happy to post it.