[Support request] Change the format of the first title

[Horst]

Hello,

I have learned how to specify a different excerpt length for the first post on the start page. I can also use this CSS code article:first-child h2.entry-title { font-size: 50px; font-weight: 700; } to format the title output. Is it possible that this formatting is only output for this one article (on the front page) and not on every other page that is opened?

https://www.screenpresso.com/cloud/XAqTc/

Many Thanks.
greetings
horst

[Elvin]

Hi there,

We can change your CSS’s selector so the CSS only applies to specific pages.

WordPress adds classes to its body tag by default depending on what page it is. On Front page or Home page, WP adds home class to the body tag. These classes being added to the body tag can be used as a selector.

Say for example, you want a CSS to apply on the front/home page only.

Example CSS: applying CSS to front page/home page only.

body.home article:first-child h2.entry-title { 
font-size: 50px; 
font-weight: 700; 
}

Alternatively, you can use a Hook element hooked to wp_head with display rule location set to your front page with your CSS placed in its code area.

Example CSS code for Hook element:

<style>
article:first-child h2.entry-title { 
font-size: 50px; 
font-weight: 700; 
}
</style>

A wise man once said:
"Have you cleared your cache?"

[Horst]

Hello Elvin,
thanks for the help.

As the two screenshots show, both variants do not give the result I wanted.
1.) https://www.screenpresso.com/=PEyzg
2.) https://www.screenpresso.com/=JNGyg

I want only the 1st article to be displayed in a different font size. However, these changes are also displayed when scrolling. Can anything be changed about that?

Many Thanks.
greetings
horst

[Horst]

Hello,

after I switched from scrolling to endless scrolling, the problem was resolved.

Many Thanks.

greetings
horst

[Elvin]

Nice one. Glad you got it resolved. Thank you for letting us know. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts