[Ben Siegfried]

I found the problem. It was Siteground's SG Optimizer plugin. It is the Combine CSS Files setting in the Frontend Optimization section of that plugin. It breaks the CSS.

[Ben Siegfried]

It is that class Victor. It's this that is causing it: https://daneden.github.io/animate.css/

The newest version of Chrome for OX X, Version 62.0.3202.62 (Official Build) (64-bit), doesn't like it.

[Ben Siegfried]

You're welcome!

[Ben Siegfried]

Here's a better fix than the previous CSS rule, disregard that one, use this one:

/* WooCommerce 3.0 Gallery
 * ======================================================================= */

.woocommerce-product-gallery {
position: relative;
margin-bottom: 3em
}

.woocommerce-product-gallery figure {
margin: 0
}

.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
width: 25%;
display: inline-block
}

.woocommerce-product-gallery .flex-control-thumbs li {
list-style: none;
float: left;
cursor: pointer
}

.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1
}

.woocommerce-product-gallery img {
display: block
}

.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
width: 33.3333%
}

.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
width: 25%
}

.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 20%
}

a.woocommerce-product-gallery__trigger {
text-decoration: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #b89a7b;
border-color: #b89a7b;
}

[Ben Siegfried]

Thanks Victor.

[Ben Siegfried]

Thanks, I saw Sridhar's tutorial for this one, which looks similar. The thing I don't like about it is that the values don't update with changes in the Cart via AJAX. This one have in my post here does, however it does not display the price. I'm more interested in seeing one with AJAX though, and ideally, it shows the item count and accumulated price changing via AJAX, and in my specific issue be able to put it into a menu.

With Sridhar's or yours, I'm pretty sure you both have a way to choose a menu target of primary or secondary. With my scenario I don't think that applies as you've pointed out that I need to filter it.

[Ben Siegfried]

I was able to add it to genesis_before_header, but I need to get it to become a list-item (li), that would be the ideal position. Are you saying filtering the nav menu for that would be get me there? I'm not skilled with filtering, I have a vague understanding of it.

[Ben Siegfried]

Yes, that is a widget area that the theme developer installed, it is titled Before Header.

[Ben Siegfried]

Thanks Brad!

[Ben Siegfried]

Geez, I should have known about that detail difference, that was the problem. I got it working now.

Two questions now:
1. Is "genesis_get_custom_field" a parameter that in the core of genesis now made to work with ACF?
2. To add additional fields that are part of the field group, do I just add them like this on the line below or create an array or key:value arrangement?

[Ben Siegfried]

You need to put a Custom Menu widget in the Header Right widget area.

[Ben Siegfried]

Found this and adapted it to my need here: media query not just on run time, but also when any changes to the window state occur

Seen working here: Americastributetoparis.com

[Ben Siegfried]

Ok, so the reason I wasn't seeing the image at 800px screenwidth was that I didn't add enough image filepath to bring the image in. I currently have it working but you have to refresh the page if you're viewing it on a desktop. You'll notice I removed the RGBA on the wrap for the HTML text.

How would we get it to swap without having to refresh the page? The first code block you said would do that doesn't do that, but the second block works as it is now. Check it out at dev.americastributetoparis.com

jQuery(document).ready(function($) {

//Assign an image to a variable depending on media query
var bgImage = (window.matchMedia("(max-width: 800px)").matches) ? "/wp-content/themes/digital-pro/images/americas-tribute-to-paris-mobile.png" : BackStretchImg.src;

// Output the image with backstretch
$(".front-page-1").backstretch([bgImage]);
});

[Ben Siegfried]

Between the two code blocks you provided, I'm confused as to whether I add one or the other or both?

I didn't even have either of them installed on the dev. site, I was just tooling around on local dev.

Which would you like to see installed?

The image is in the images directory and the name in the code is patent with its name, and it is a png.

Just so you know, the image that should be swapping in is the same one you're seeing except that all of the graphical elements are given opacity so that the html text above it becomes legible. Right now as a temp solution I'm giving an RGBA value to the wrap at 800px screenwidth.

[Ben Siegfried]

I was told this by Studiopress but I don't know how to write that PHP. This is why I included that part of the front-page.php code block in the initiation of this post:

1. The code that passes on the image information can be seen at line# 48 of file "front-page.php". You can add information about another image the same way.

wp_localize_script( 'digital-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) );

[Ben Siegfried]

No matter what I do I can't get the other image, the one in the images directory to even appear. I'm looking at the console and it gives a '404' for that image. The filepath is correct, the name of the image file is correct, the image is different than the one loading for desktop.

Also, I'm not sure how to put together what you're showing me. I hear what you're saying though.

the window on resize function is causing backstretch to lose its ability to stretch to all four sides of the window.

$(window).on('resize', function(){

[Ben Siegfried]

You're welcome.

[Ben Siegfried]

Well, try this, is this what you were looking to do? Get margin-top to '0' and I think that is what you were looking for?
I think it's on line: 550 of your stylesheet.

.parallax-home .site-inner {
    margin-top: 0px; /*---was 70px---*/
    max-width: 100%;
}

[Ben Siegfried]

It is behind the menu. It may not appear that way because some of the text is white. Look at the non-white text up there, it is above the image just like the white text.

[Ben Siegfried]

You're welcome

[Author]

Posts