[Resolved] Highlighted numbers

[gedosan]

Hi there,

How would I go about making these H2s highlighted with a color? See an example here: https://movieweb.com/star-trek-the-next-generation-episodes-ranked/ and scroll to number 10 to see an example. Notice how the number “10” has a blue background with white font. How would I do that?

Thanks

[Ying]

Hi there,

Do you have GenerateBlocks plugin? If so, you can add 2 headline blocks into a container block, and set the container block to display:flex, align-item: center, column gap: 20px in the layout panel.

1 headline block for the number, 1 headline block for the title.

Then you can set the background color for the number headline block, and add some paddings around the number.

Here’s a screenshot for your reference:
https://i.postimg.cc/WbrT4qWB/2023-03-28-12-16-03.jpg

[gedosan]

Thanks, and yes I do. Is there a way to apply this to posts that already exist? I really don’t want to go into them all to change :).

G

[Ying]

Can you link me to a post so that I can provide some CSS?

[gedosan]

Thanks, will add the link below

[Ying]

The number is already there along with the text, so it’s not possible to only select the number.

Here’s the CSS in which I added a pseudo element on top of the numbers, it’s not elegant at all, but it’s the best I can come up with…

.single-post .entry-content h2:before {
   background-color: blue;
    color: white;
    padding: 5px;
    margin-right: -1em;
    z-index: 2;
    position: relative;  
}
.single-post .entry-content  h2:nth-of-type(1):before {
    margin-right: -1.5em;
}
.single-post .entry-content h2:nth-of-type(1):before {
    content: "10.";   
}
.single-post .entry-content h2:nth-of-type(2):before {
    content: "09.";   
}
.single-post .entry-content h2:nth-of-type(3):before {
    content: "08.";   
}
.single-post .entry-content h2:nth-of-type(4):before {
    content: "07.";   
}
.single-post .entry-content h2:nth-of-type(5):before {
    content: "06.";   
}
.single-post .entry-content h2:nth-of-type(6):before {
    content: "05.";   
}
.single-post .entry-content h2:nth-of-type(7):before {
    content: "04.";   
}
.single-post .entry-content h2:nth-of-type(8):before {
    content: "03.";   
}
.single-post .entry-content h2:nth-of-type(9):before {
    content: "02.";   
}
.single-post .entry-content h2:nth-of-type(10):before {
    content: "01.";   
}

[Ying]

Hum..not happy with that CSS solution, try the below solution instead:

1. Create a hook element, choose wp_footer as hook name, choose posts> all posts as the location.

2. Add this JS into the hook element:

<script>// Get all the h2 elements in the post
const h2Elements = document.querySelectorAll('h2');

// Loop through each h2 element
h2Elements.forEach((h2) => {
  // Check if the first character is a number
  if (h2.textContent.match(/^\d/)) {
    // Replace the number with a div element 
    h2.innerHTML = h2.textContent.replace(/(\d+\.)/, '<div class="hightlight-number">$1</div>');
  }
});</script>

3. Add this CSS, feel free to change the padding values and colors.

.hightlight-number {
    display: inline-block;
    padding: 10px 20px 10px 20px;
    background: blue;
    color: white;
}

[gedosan]

Looks pretty good. Is there a way we can hide the full stop to the right of the number?
Also, are you sure this isn’t adding extra “weight” to the pages having to run this script for each page?
Thanks again

[Ying]

I’ve updated the script, it will include the . in the <div>.

Also, are you sure this isn’t adding extra “weight” to the pages having to run this script for each page?

Oh I’m sure it’s adding extra weight to the pages, so it’s your choice to use it or not.

But in the future, it’s better to use the method I mentioned in my first reply 🙂

[gedosan]

Sorry, one last thing. With the first solution, can I give the number headline div a name so I can control it with CSS? Thinking ahead if I want to change styles across all pages.

[Ying]

can I give the number headline div a name

If you are using GB headline block, you can add an additional CSS class in the advanced panel.
But you should not need to use CSS as GB’s headline block offers all kinds of built-in style controls.

[gedosan]

Thanks for this.

[Ying]

No problem 🙂

[Author]

Posts