Archived topic
Applying font size to specific pages
9 replies · Started by CRAIG on July 16, 2021
I will be using pages instead of posts for my "blog". I am putting blog in inverted commas to make it clear that it is blog content but I am not using the inbuilt posts feature.
I need my "blog" pages to use a larger font size than what is used on the general site pages e.g. home,contact,about,privacy
Would it be efficient to use a content layout element to set the default font sizes for all pages, and then exclude the 4 pages named above which will be controlled by customizer?
Or should I set the font size for the "blog" in customizer, and then set a different font size in a layout element and apply it only to the 4 pages above?
I just don't want to have to manually set a larger font size for every page which is being used for blog content
Also, I currently have an element which is being used to set the style of the breadcrumbs, title and meta information for the "blog" content and this is applied to the entire site, excluding the non "blog" pages as mentioned above (home,contact etc.)
Should I just extend this element to cover the font size of the "blog" content too?
Hi there,
using Pages makes it trickier then with Posts, as we could just provide some CSS to target the Single Post.
So this means we need to specifically target some pages and not others. 'Easiest' way would be to use a Hook element to add the CSS eg.
<style>
body {
font-size: 20px;
}
</style>Then set the Display Rules Locations to Pages > All Pages.
Then set the Exclusions.
OK brilliant, I have got this working. thanks!
Actually, one other thing I wonder if you could help me with on this:
I want to set the first paragraph to be bold and slightly larger. Is there CSS I could use to target the first paragraph only?
Try this:
.entry-content > p:first-of-type {
font-weight: 900;
}Thanks David,
I tried adding that to the hook and got the following result:
On pages it had no effect, strangely on posts (which I won't be using) it did cause the first paragraph to go bold
On the post referred to above it also made the
section further down the page go bold
I Googled to see if there was an alternative and came across first-of-type
I swapped out p:first-child and put p:first-of-type in its place and now the first paragraph on the pages are bold.
However, I have added a block quote section to one of the pages to see what would happen and it has caused that to be bold as well
I have added a link privately to a page where you can see the first paragraph is bold but the block quote section further down the page is also bold
The code in its current state:
<style> body { font-size: 20px; } h2 { font-size: 32px; font-weight: 700; } h3 { font-size: 26px; font-weight: 600; } h4 { font-size: 22px; font-weight: 500; } .entry-content p:first-of-type { font-weight: 900; } </style>
***quick update***
I temporarily changed the code back to first-child, and now only the blockquote section is bold
I have reverted back to first-of-type
This CSS seems to be having a strange effect on other parts of the site such as the homepage where bits of text are now bold. Strange because the hook has the homepage excluded
Sorry for adding the wrong selector.
I updated the code above so it only applies to the first paragraph that sits inside the entry-content. It won't apply to P inside a container inside the entry-content
Great, thanks a lot David
Glad to be of help
