hebhansen

Testing with debug code reveals correct url to style.css

Debus:

    $child_style_uri = get_stylesheet_uri();
    // Debugging output: Check the URL of style.css
    echo '<!-- Child theme style URI: ' . $child_style_uri . ' -->';

Output in source:

<!-- Child theme style URI: https://my-cool-site.com/wp-content/themes/draupnir-9/style.css -->

I clear cache all the time

I added above url to my browser and I see this old css that got changed maybe 1 hour ago:

.has-red-background {
    color: var(--wp--preset--color--draupnir-red) !important;
  }

I checked in my code editor to see if file was actually updated. I also checked from c panel > file manager > style.css and it has latest edits….

.has-styling-style {
    color: var(--wp--preset--color--post-it-yellow) !important;
  }

So why this latency?

And now finally testing from Chrome Incognito where style.css shows correct?????? What is causing this delayed style applied, and how can I get around it. Obviously it’s impossible to style css if you do not the effect….

@threadi So messing with this again!!!!

Inspired by chatGPT I have expanded the enque to more css files residing in assets/css/files.css. All of this works as supposed except the most central style.css of my theme………

 // Theme WordPress default does not enque parent style.css nor the child style.css, when creating a child,
 // We call/enque child css display effect on frontend and also inside block theme editor.
function draupnir_9_enqueue_styles() {
    // Enqueue the child theme's style.css
    wp_enqueue_style(
        'draupnir-9-style', 
        get_stylesheet_uri()
    );

    wp_enqueue_style( 
        'twentytwentyfour-primary',
         get_template_directory_uri() . '/assets/css/button-outline.css'
    );


        // Enqueue global.css for general styles
    wp_enqueue_style(
        'draupnir-9-global',
        get_stylesheet_directory_uri() . '/assets/css/global.css', // Correct path to global.css
        array(), // No dependencies
        null, // No version number
        'all' // Load for all media types
    );

        // Enqueue forms.css for general styles
        wp_enqueue_style(
            'draupnir-9-forms',
            get_stylesheet_directory_uri() . '/assets/css/forms.css', // Correct path to forms.css
            array(), // No dependencies
            null, // No version number
            'all' // Load for all media types
    );
    

    // Enqueue woo.css for WooCommerce styles (conditionally loaded if WooCommerce is active)
    if ( class_exists( 'WooCommerce' ) ) {
        wp_enqueue_style(
            'draupnir-9-woo',
            get_stylesheet_directory_uri() . '/assets/css/woo.css', // Path to woo.css
            array(), // No dependencies
            null, // No version number
            'all' // Load for all media types
        );
    }

    // Enqueue wcfm.css for WCFM styles (conditionally loaded if WCFM is active)
    if ( class_exists( 'WCFM' ) ) {
        wp_enqueue_style(
            'draupnir-9-wcfm',
            get_stylesheet_directory_uri() . '/assets/css/wcfm.css', // Path to wcfm.css
            array(), // No dependencies
            null, // No version number
            'all' // Load for all media types
        );
    }

    // Enqueue product-page.css on product pages (conditionally loaded on product pages only)
    if ( is_product() ) {
        wp_enqueue_style(
            'draupnir-9-product-page',
            get_stylesheet_directory_uri() . '/assets/css/product-page.css',
        );
    }
}

add_action( 'wp_enqueue_scripts', 'draupnir_9_enqueue_styles' );
add_action( 'enqueue_block_editor_assets', 'draupnir_9_enqueue_styles' );
//add_editor_style( 'editor-style.css' );

Everything tested but style.css does not enque and takes no effect. I am getting seriously annoyed with this. Also I do not see styling in editor.. I have upgraded to 6.7 and tested in 67 that all works but not style.css. Am I not supposed to style in style.css???

The twin box on frontpage appears to be a <p> tag after each category that then adopts the container above from category. How do I fix this?

Here I am pointing to css selector: .woocommerce ul.products li

Hover over the P tag looks like this

This P tag also links to category, as can be seen in inspector. It only appears on frontpage, not on pages. Any ideas, thx

• This reply was modified 1 week, 4 days ago by hebhansen.
• This reply was modified 1 week, 4 days ago by hebhansen.

hmmmm

Setting margin to 0 as opposed to auto fixed the bottom space. That fixes the 1.1 scale issue.

On front page twin empty container still exists and it’s not pretty and I have no idea why it does that. Is this a bug when applied on block theme front page?

@reynierc

Container: Overflow set, Position is relative, display has flex.

So again,

• why does align-items push things up in the container?
• Why do I have a twin container below each icon that leaves a HUGE margin where cursor turns pointer?

/***************** Product Categories - Container *****************/
body:not(.single) .woocommerce ul.products li.product a {
    position: relative;
    overflow: hidden;
    display: flex;
  /*  align-items: center !important; /* vertical when flex */
    justify-content: center; /* Horizontal */
    margin: auto;
    border-radius: 5px;
	aspect-ratio: 1; /* Forces the container to be square */
    max-height: 300px; /* Adjust this value as needed */
	height: 100%; /* Ensure the container's height stretches properly */
	z-index: 1;
}

Image:

• As images get bumped to the top for an unexplainable reason I have empty bottom margin. Hense I need to scale to 1.1 initially. Why does object-fit cover not fix this at scale 1.0? Is it a problem? yes! Icons with surrounding transparent background or white background, gets cut as they scale and hit container edge. As you can see below I then need repair code to force these back to scale 1.0. In other words the shortcode do not respond normal to css. Can you guide me to the default css file for these, so that I can overwrite them accurately. In other I need images to cover container at scale 1.0

/***************** Product Categories - Image Behaviour *****************/
body:not(.single) .woocommerce ul.products li.product a img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the square */
	object-position: center center; /* Optional: Align the image in the center */
    transition: transform 0.3s ease-in-out;
	transform: scale(1.1); /* Cheat zoom to fill the initial container */

/*************** Hover Effect - Image Zoom **************************/
  &:hover {
	transform: scale(1.2); /* Smooth scaling effect */
  }
}

/*************** Some images freak out at scale 1.1 - We Fix that Here **************************/
.the-smaller-scale .woocommerce ul.products li.product a img {
	transform: scale(1.0) !important;

/*************** Hover Effect - Image Zoom **************************/
  &:hover {
	transform: scale(1.1) !important;
  }
}

Title text Position is absolute

• Responsive – Icons at small sizes squeeze title to the bottom. When it jumps to 2 lines, the bottom line dissapears behind and outside container. z-index doesn’t do anything. How can I enforce text on top and no line break (Stay in one line) and allow overflow outside of container.

/**** Category Grid Title - Text Overlay ****/
.woocommerce-loop-category__title {
	position: absolute;
	inset: 70% 2% auto auto;
	font-size: 1vw /*var(--wp--preset--font-size--medium)*/ !important;
	letter-spacing: -1px;
	display: flex !important;
	flex-wrap: nowrap !important;
	/*justify-content: flex-start !important;*/
	font-weight: 400;
	font-family: "Inter";
	text-align: left;
	color: var(--wp--preset--color--base-2);
	background-color: rgba(7, 7, 7, .15);  
	backdrop-filter: blur(5px);
	padding: 2px 6px !important;
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); 
	z-index: 5;
}

@media(max-width: 768px) {
    .woocommerce-loop-category__title {
	padding: 2px !important;
    }
}

I think it’s fair to say, that this is not quite fix’ed. Also I am not looking for IT consultants. I am looking to figure this out, that’s all.

@ali622

• because I run a multisite
• I want all buttons initially to be as I want across all sites, hence, the restyling in child theme, then I can edit individual buttons in settings, where they appear.
• I don’t have the style settings I need to do what I want. Either they are not supported yet by theme.json ver 2/3 or simply not made available in WP / TT4 (box-shadow, text-shadow adding icons and more)
• I want my style to survive the next update of TT4 and not get overwritten
• While I want to inherit everything possible from a new theme, fx TT5, I want my customisation to stay intact after upgrade, hence a child theme
• I have other reasons to go for child theme, such as custom variables. I need those to syle plugin’s css and ensure they update with a new style in TT4 or an upgrade of theme

I can go on, but that should give you an idea. And that makes me comment back: Howcome there is little to no replies for support. And when an answer arrives it’s like “Ask over there” or “Why dont you just style buttons 500 places, that get’s lost at updates or upgrades”. Don’t get me wrong, but this takes soooo loooong time! I urgently need help to overcome these issues ok. I setup a child and that was a very very hard birth. Getting into theme.json is like knowing nothing and starting over….

So MY MISSION IS TO INHERIT ALL I CAN FROM WP THEMES SUCH AS TT4 AND HAVE IT ACCESSIBLE IN MY CHILD THEME. I WILL NOT START OVER EVERYTIME I SWITCH A THEME, SUCH AS STYLES, SETTINGS, CUSTOM PART PATTERNS AND TEMPLATES. I DO NEED MORE STYLLING THAN THEME.JSON VER 3 CURRENTLY OFFERS, SO I STYLE FROM BOTH T.J AND STYLE.CSS

So please, I need help to manage child theme.json thx. I just need progress

@bcworkz So how do you add related posts in block themes if not php?

How do I add the php as pattern or custom block?

Sounds great thx

body:not(.single) .woocommerce ul.products li.product a {
    position: relative;
    overflow: hidden;
    display: flex;
  /*  align-items: center !important; /* vertical when flex */
    justify-content: center; /* Horizontal */
    margin: auto;
    border-radius: 5px;
	aspect-ratio: 1; /* Forces the container to be square */
    max-height: 300px; /* Adjust this value as needed */
	height: 100%; /* Ensure the container's height stretches properly */
}

It appears that align-items push image to the top and creating the bottom edge, but why?

It appears that aspect-ratio: 1 adds kind of another invisible twin below the category icon. Why?

Further additions container height 100%

and for image object position center center.

Further puzzle. On page they behave. On frontpage they do not. It appears theres a lot of invisible container below the cats on front. Mouse turns to pointer. It looks like there is a large margin where it should just be a grid….. Why https://svalinnart.com/

vertical-align: middle; does nothing???? I add it to container. Is that correct?

It appears the image is initially not center/center fixed but rather goes to the top and then leaves empty edge at the bottom. I thought center was included in code, but maybe not.

I tried to initially scale to 1.1 and then even more on hover to 1.2. That does almost cover cotainer, but I loose to much of the image, so much better that it center correct in 2 dimensions. How can I fix that?

And here cleaner code but with the same issue:

/***************** Product Categories - Container *****************/
body:not(.single) .woocommerce ul.products li.product a {
	position: relative;
    max-height: 300px;
    max-height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: auto;

	border-radius: 5px;
}

/***************** Product Categories - Smaller Screen w. Sidebar *****************/
/*@media(min-width: 1024px) {
    body:not(.single) .woocommerce ul.products li.product a {
        width: 200px !important;
        height: 200px !important; 
    }
}*/


/***************** Product Categories - Image Behaviour *****************/
body:not(.single) .woocommerce ul.products li.product a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	-moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
		
body:not(.single) .woocommerce ul.products li.product:hover a img { 
	-moz-transform: scale(1.1);
    -o-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

Answer is custom templates, parts and patterns do not transfer to the child, hence, they do not show. But they do in editor though ?????♂?

Fix. In editor, detach them one by one. Save as new with new name. They are now in child theme and show on front.

This is obviously not comme il faut. I would say it’s a bug and WordPress needs to fix this, as they assumably are !?

hi @kel-dc

Thx I was messing with it. After transfer to child theme, all my custom template parts are gone, and this is one. I created a new, so that fixed it.

Speaking of:

on mobile images are positioned left. How can I fix that?

Title is sentered. How can I float it left? I checked throughout the cascade of blocks and I do not find a centered setting. So I wonder