[Resolved] Post title formatting before and after click

[Amit]

Hi Tom,

I have a couple of questions:

1. I have enabled excerpts and after I click on the post title to see the full post, the title font is same as the content. How can I format the title content post click to show a different font and size.

2. I need to format the title content to look like one of the posts in the below link:
https://www.oracle.com/applications/modern-best-practice/logistics/inbound-shipment.html
If you see the above link, the title (Inbound Shipment to Receipt) has a red bar to its left. How can I achieve this for the title for both the excerpt and the full post.

Thanks
Amit

[Tom]

Hi Amit,

1. The title of your posts are using an H1, so you can change the look of H1s using the Typography options in “Customize > Typography”.

If you don’t want to change all H1s, you can use some simple CSS – for example:

.single h1.entry-title {
      font-size: 30px;
}

2. You could do something like this:

.blog h2.entry-title,
.archive h2.entry-title,
.single h1.entry-title {
      border-left: 8px solid #E10000;
}

[Amit]

Hi Tom,

As always, thank you for the prompt response!
Regarding 1: Thanks. I got it. I will play around with it.

Regarding 2: I added the css to Custom CSS but it did not work. In the Custom CSS editor, I noticed that some of the text (h2,h1) gets highlighted in red possibly indicating a syntax issue? For example, h2 in the following line “.blog h2.entry-title” gets highlighted in red. Do I need to change anything in the css that you provided?

Regards,
Amit

[Tom]

Hmm, shouldn’t be any issues with that code.

Do you have a link to your site?

[Amit]

Hi Tom,

You can access my site here

[Tom]

You forgot the closing bracket on the CSS block above the one I gave you above.

You have:

/* Float Social media on nav bar */
.main-navigation li.social-icon {
    float: right !important;

It should be:

/* Float Social media on nav bar */
.main-navigation li.social-icon {
    float: right !important;
}

[Amit]

Hi Tom,

Good catch! Awesome!

This is working now. One last question. How can I add a space between the red bar and title?

Regards,
Amit

[Tom]

This should work:

.blog h2.entry-title,
.archive h2.entry-title,
.single h1.entry-title {
      border-left: 8px solid #E10000;
      padding-left: 10px;
}

[Amit]

Hi Tom,

Fantastic. As expected!!

Thanks again for your prompt (almost real time chat) support.

I will put up my site to be showcased for GeneratePress. I think I am done with the layout for now.

Regards,
Amit

[Tom]

No worries. Glad I could help 🙂

[Author]

Posts