- This topic has 11 replies, 2 voices, and was last updated 1 year, 2 months ago by David.
-
AuthorPosts
-
September 19, 2019 at 4:59 pm #1014041John
Hi there,
Does anyone have any suggestions for capitalising the first letters of blog posts?
I have seen some different CSS around the web for it, but nothing quite gives a completely happy finish.
Many thansk!
JOhnSeptember 19, 2019 at 5:13 pm #1014051LeoStaffCustomer SupportHi there,
What about this?
.inside-article p:first-of-type:first-letter { text-transform: uppercase; }
Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know ๐
September 19, 2019 at 6:54 pm #1014086JohnHmm…not quite: I am trying to replicate something more along the lines of the Drop Cap first letter
https://www.wpbeginner.com/plugins/how-to-add-drop-caps-in-wordpress-posts/The plugin they refer to is not in use any more
September 19, 2019 at 7:59 pm #1014107LeoStaffCustomer SupportTry this:
.inside-article p:first-of-type:first-letter { float: left; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; }
September 19, 2019 at 10:02 pm #1014145JohnWonderful – thank you for such clear and quick support!
September 20, 2019 at 8:48 am #1014604LeoStaffCustomer SupportNo problem ๐
September 22, 2019 at 2:08 am #1015717JohnHello again,
I have noticed a small issue with this – when applied it also adds the Drop Cap to the Blockquotes – this really skews their appearance.
I have applied the following code to make it fit – but if I make any changes to the Blockquote style (or change to pull quote, then it does not work – :
.wp-block-quote p:first-of-type:first-letter{
float: none;
font-size: 20px;
line-height: 65px;
padding-top: 0px;
padding-right: 1px;
padding-left: 0px;
}
How can I exclude blockquotes from the Drop Cap?
Many thanksSeptember 22, 2019 at 4:07 am #1015750DavidStaffCustomer SupportHi there,
thats odd – can you link me to a post with the code in place so as the issue with the blockquote can be seen.
September 23, 2019 at 3:04 am #1016427JohnHi David – I found a way around it and am using a Gutenberg add-on to apply a different and more stylised blockquote – this does not seem to suffer the same problem.
I have though, run into issues with the way the drop cap shopws on different screens.
My wife uses a MAC and the dop cap appears with spacing issues – it does not fit correctly on the lines.
Here is the link to the page itself – https://artemes.global/blog/
On my ASUS desktop it looks fine – takes up two regular lines and fits nicely.Is there a different class needed to apply the code for mac users?
We have tried clearing caches and using diffeent browsers, but the same result occurs.September 23, 2019 at 4:01 am #1016464DavidStaffCustomer SupportYeah common issue that the two OSes render fonts differently. Try this method which uses EM sizes for the font.
.inside-article p:first-of-type:first-letter { float: left; font-size: 6em; line-height: .78; margin: .05em .1em 0 0; text-transform: uppercase; font-style: normal }
January 1, 2023 at 9:15 am #2479818RobertThis works great on blog posts, but the problem is that it also capitalizes paragraphs on my homepage and other pages too. Is there a way to make this apply *only* to blog posts?
January 1, 2023 at 9:58 am #2479853DavidStaffCustomer SupportHi there,
change it to this:
.single-post .inside-article p:first-of-type:first-letter { float: left; font-size: 6em; line-height: .78; margin: .05em .1em 0 0; text-transform: uppercase; font-style: normal }
-
AuthorPosts
- You must be logged in to reply to this topic.