Catalog Header Background Invisible After Page 1

[alibey]

My catalog (shop page) initially displays a light blue header background,
with the title rendering controlling by some kind of slow
background animation/transform. When you click to subsequent pages of the catalog,
the background becomes transparent, making the title barely visible.

This

.media-overlay {
background-color: #0DE664 !important;
}

only changed the background color of the first page.
the remaining page headers are still transparent.

How do I fix this?

(less critically, is there a way to disable or speed up the title animation?)

Thanks.

[Kyle – SUPPORT]

Hi

Can you provide links so I can see what you mean? It’s likely an option

– Kyle

[alibey]

This reply has been marked as private.

[Kyle – SUPPORT]

Which link has the issue? I’ve checked category pages and it’s fine

However when I first go to a new page I get this error:

The requested URL /wp-content/uploads/sites/3/2014/12/form-percolator-header.jpg was not found on this server.

– Kyle

[alibey]

This reply has been marked as private.

[alibey]

hi kyle

We can kill this ticket as I figured out to fix the missing header/title Shop page problem (even after
I deleted the Shop page in my WP admin panel. Obviously the Woocommerce entries are highly protected in the DB, so even this braindamaged move did not kill my catalog.)
I will show the code here in case someone else
ever runs into this issue. The constraint I set for myself is to fix this problem without mucking with any HTML directly.

so looking at the Atelier code the html for the Woocommerce/Atelier shop page is this:

<span class=”media-overlay” style=”background-color:#6193bf;opacity:0.37;”></span>

<div class=”heading-text container” data-textalign=”center”>

<h1 class=”entry-title” ></h1>

so to change color and opacity of the header (which was whitish) the custom css is trivial:

.media-overlay {
background-color: #BDBDBD !important; /* important is required even though the preprocessor complains */
opacity: .7 !important;
}

and then all that is left to do is access the DOM using JS using replace the content in entry-title.
like this…

document.addEventListener(“DOMContentLoaded”, function(event) {
document.getElementsByClassName(“entry-title”)[0].innerHTML = “Catalog”;
});

So in this way, I fixed the problem using 1 line of JS and no PHP or child theme complications.
I love JS!

cheers

ali

[Kyle – SUPPORT]

Great thanks 🙂

– Kyle