Archived topic

Post title formatting before and after click

9 replies · Started by Amit on July 15, 2015

Viewing posts 1–10 of 10

July 15, 2015 at 12:03 am #121134

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

July 15, 2015 at 8:51 am #121218

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

July 15, 2015 at 9:46 am #121243

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

July 15, 2015 at 9:53 am #121245

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

Do you have a link to your site?

July 15, 2015 at 9:59 am #121263

Hi Tom,

You can access my site here

July 15, 2015 at 10:03 am #121266

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

July 15, 2015 at 10:13 am #121276

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

July 15, 2015 at 10:14 am #121277

This should work:

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

July 15, 2015 at 10:18 am #121279

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

July 15, 2015 at 12:02 pm #121309

No worries. Glad I could help :)

This archived topic is closed to new replies.

Start building better websites today.