Archived topic

Custom field color to change element background

47 replies · Started by William on December 7, 2020

Viewing posts 31–45 of 48

December 30, 2020 at 4:48 am #1599292

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>

January 3, 2021 at 3:39 pm #1604242

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;
}

January 4, 2021 at 4:25 pm #1605683

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.

January 4, 2021 at 5:12 pm #1605715

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

January 4, 2021 at 5:21 pm #1605719

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

January 4, 2021 at 6:06 pm #1605752

– 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.

January 5, 2021 at 10:43 am #1606975

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

January 5, 2021 at 5:22 pm #1607316

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.

January 6, 2021 at 8:33 am #1608230

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.

January 6, 2021 at 5:18 pm #1608718

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

January 8, 2021 at 5:34 am #1610761

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?

January 10, 2021 at 4:55 pm #1613729

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.

January 13, 2021 at 6:55 am #1617200

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: "";
}

January 13, 2021 at 3:19 pm #1617768

Not sure what you mean.

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

January 15, 2021 at 4:42 pm #1620685

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

This archived topic is closed to new replies.

Start building better websites today.