[Resolved] Custom field color to change element background

[William]

Okay, I’ve updated the header element to this code you can see here:

<div class="meta-category">
<a class="category-style" href="https://wordpress-425633-1629918.cloudwaysapps.com/claude-mckay/">
<span style="background:[category_background_color]; font-size: 3rem;" class="cat-first-letter">[cat-first-letter]</span>
<span class="label">{{post_terms.category}}</span></a>
</div>

<h1 class='post-title'>
	{{post_title}}
</h1>

<div class="post-excerpt">
	[post-excerpt]
</div>

<style>
	.meta-category {
		font-family: Brawler;
	}
</style>

[Elvin]

Thanks.

You can then add this CSS:

.meta-category {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 1.5rem;
}

.meta-category a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color: #000000;
	margin-left: 1rem;
}

.meta-category a:before {
	-webkit-box-ordinal-group: 3;
	-ms-flex-order: 2;
	order: 2;
	color: #A8AAB2;
	padding: 0 0.5rem;
	content: '—';
}

.meta-category a:first-child {
	margin-left: 0;
}

.meta-category a .label {
	position: relative;
	-webkit-box-ordinal-group: 4;
	-ms-flex-order: 3;
	order: 3;
	color: #A8AAB2;
	-webkit-transition: color .15s;
	transition: color .15s;
}

.meta-category a .label:after {
	background-color: #000000;
	width: 100%;
	height: 1px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 100%;
	-webkit-transform: translateY(1px);
	transform: translateY(1px);
	-webkit-transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
	-webkit-transition-property: opacity,-webkit-transform;
	transition-property: opacity,-webkit-transform;
	transition-property: opacity,transform;
	transition-property: opacity,transform,-webkit-transform;
	content: "";
}

.meta-category a:hover .label {
	color: #000000;
}

.meta-category a:hover .label:after {
	opacity: 1;
	-webkit-transform: translateY(-3px) translateZ(0);
	transform: translateY(-3px) translateZ(0);
}

As for making the Drop Cap background “square”, try this:

span.cat-first-letter {
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    display: flex;
    justify-content: center;
}

[William]

Thank you for that. I’ve updated and appears to be a little different from the intended look here.

This page is where the CSS from above is.

[Elvin]

Add in align-items: center; property on span.cat-first-letter selector so it’s centered.

Example:

span.cat-first-letter {
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

And let’s remove the color: #000000; property on .meta-category a{...} selector so it keeps the color white.

Lastly, to remove the extra dash, replace the selector .meta-category a:before with .meta-category a.category-style:before.

It will look something like this after applies these changes:
https://share.getcloudapp.com/6quxX1WB

[William]

Thank you for all that – seems to be pushing things in the right direction! I think what’s left is:

– Spacing of category is quite far from ‘-‘
– For mobile here, the size of the letter background box is smaller
– Making the whole div element clickable
– Copying the hover effect

[Elvin]

– Spacing of category is quite far from ‘-‘

You can completely remove margin-left: 1rem; property on .meta-category a selector.

`– For mobile here, the size of the letter background box is smaller</blockquote>

Not sure what you mean by this. Do you want to make the whole thing smaller? or you just want the blue background box to be smaller, with its edges closer to the letter?

If you simply want the box to be smaller for mobile compared to desktop then we must use a @media rule.

@media(max-width:768px){
span.cat-first-letter {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
}
}

This CSS makes the box 1rem smaller for mobile (4rem for desktop, 3rem for mobile).

<blockquote>– Making the whole div element clickable</blockquote>

Ah, I see the issue here:

You’re using {{post_terms.category}} which creates a link instead of just displaying a text we can wrap along with the dropcap box.

Let’s replace it with a shortcode that outputs the category in plain text.

Use this PHP snippet to create a shortcode that displays category.

add_shortcode( 'display_category', function() {
    ob_start();
    foreach((get_the_category()) as $category) 
	{ echo $category->cat_name; }
    return ob_get_clean();
} );

You then replace <span class="label">{{post_terms.category}}</span> with <span class="label">[display_category]</span> shortcode.

<blockquote>– Copying the hover effect</blockquote>

Add this in:

.meta-category a:hover .label:after {
    opacity: 1;
    -webkit-transform: translateY(-3px) translateZ(0);
    transform: translateY(-3px) translateZ(0);
}

.meta-category a .label:after {
    width: 100%;
    height: 1px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
    -webkit-transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
    -webkit-transition-property: opacity,-webkit-transform;
    transition-property: opacity,-webkit-transform;
    transition-property: opacity,transform;
    transition-property: opacity,transform,-webkit-transform;
    content: "";
}

We may have to adjust this a bit to match your preference.

[William]

That looks great! Only thing left is to do is on hover to make the underline and text white?

[Elvin]

That looks great! Only thing left is to do is on hover to make the underline and text white?

Find this CSS on site:

.meta-category a .label {
    position: relative;
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    color: #A8AAB2;
    -webkit-transition: color .15s;
    transition: color .15s;
}

Change color: #A8AAB2; to color: #fff; so it changes to white. It should apply to both the text and the underline decoration when hovering.

[William]

That has seemingly made it all white and the line that appears quickly changes color from #A8AAB2 to #fff (see here).

What I am after is that the text is #A8AAB2 and then on hover, changes to #fff and the line that appears as an underline is #fff too.

[Elvin]

What I am after is that the text is #A8AAB2 and then on hover, changes to #fff and the line that appears as an underline is #fff too.

Ah in that case, revert the color property of .meta-category a .label to #A8AAB2.

And then add this CSS:

.meta-category a:hover .label {
    color: #fff;
}

This is how it will look like: https://share.getcloudapp.com/NQuK9jEQ

[William]

That’s great thank you 🙂 Only left small thing is that the underline that appears goes white then resorts back to what seems A8AAB2 – is there a way to make the underline always and only appear as white?

[Elvin]

That’s great thank you 🙂 Only left small thing is that the underline that appears goes white then resorts back to what seems A8AAB2 – is there a way to make the underline always and only appear as white?

I’m not sure I see this occuring on my end.

To clarify: Do you mean the underline reverts back to #A8AAB2?

I think what you’re seeing is the transition between opacity 0 and opacity 1.

The color transition between this 2 states of the under line will look something like #A8AAB2 but in fact, its just opacity. It’s more obvious to the eyes because of transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);

But if you don’t want to see this, you should change this:
transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);

To this:
transition: transform 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);

So there’s no fading in color transition between a non opaque #fff and fully opaque #fff.

[William]

Okay I have added what I think is the right area and I don’t see any difference – still does not appear fully white the underline on hover:

.meta-category a .label:after {
	background-color: #fff;
	width: 100%;
	height: 1px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 100%;
	-webkit-transform: translateY(1px);
	transform: translateY(1px);
	-webkit-transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition: transform 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
	-webkit-transition-property: opacity,-webkit-transform;
	transition-property: opacity,-webkit-transform;
	transition-property: opacity,transform;
	transition-property: opacity,transform,-webkit-transform;
	content: "";
}

[Elvin]

Not sure what you mean.

It appears fully white on my end as shown here:
https://share.getcloudapp.com/E0u4pyBg

[William]

The underline still appears not fully white when hovering – I made a video to show what I see here.

[Author]

Posts