Increase size of font for some of my text (2 posts)

  1. saltandserenity
    Posted 3 years ago #

    I write a food blog. Usually toward the end of each post I insert a link so that people can print the recipe. It says something like:
    "Click here to print recipe for Chocolate Cake with Peanut Butter Mousse Filling."

    I would like to have the size of that sentence in about a 16-20 size font so that it really stands out and is easily visible.


  2. paulwpxp
    Font hero
    Posted 3 years ago #

    This is what you currently have in your post editor.

    <strong>Click here to print recipe for <a href="--link to pdf--">Chocolate Cake</a>.<strong>

    Change it to this

    <p class="dl">Click here to print recipe for <a href="--link to pdf--">Chocolate Cake</a>.</p>

    I suppose you write post in Visual Mode, not Text Mode. That's okay, but do this, when you write that download message, make sure you got a linebreak before and after it, and when you're done with everything with that post, switch to Text Mode, you should see that line wrapped in <p> like this

    <p>A download message with link.</p>

    just add the class into it like this

    <p class="dl">A download message with link.</p>

    In the style.css of your theme, put this in underneath whatever you already got there.

    p.dl {
    	background: lightyellow;
    	border: 2px dotted pink;
    	font-size: 16px;
    	padding: 24px 0;
    	margin: 24px 0;
    	text-align: center;

    There are other ways to achieve this, like using JS to add class, or using shortcode plugin, or making use of customfield, or automatically pull the pdf attachment with predefined text for it.

    Still I think the method above is more robust, more flexible, and future proof. Your theme will work regardless, class in standard html tag like <p> will be shown normally when CSS for that class is missing.

    The downside is that you have to go over each post and add this.

Topic Closed

This topic has been closed to new replies.

About this Topic