Blockquotes are a Must for Book Bloggers

Some themes and templates do not come with nice, blockquotes installed. But, styling your blockquote can be very easy.

In a few easy steps you can have a pretty blockquote like this:

22749788

Sixteen-year-old Lyric Walker’s life is forever changed when she witnesses the arrival of 30,000 Alpha, a five-nation race of ocean-dwelling warriors, on her beach in Coney Island. The world’s initial wonder and awe over the Alpha quickly turns ugly and paranoid and violent, and Lyric’s small town transforms into a military zone with humans on one side and Alpha on the other. When Lyric is recruited to help the crown prince, a boy named Fathom, assimilate, she begins to fall for him. But their love is a dangerous one, and there are forces on both sides working to keep them apart. Only, what if the Alpha are not actually the enemy? What if they are in fact humanity’s only hope of survival? Because the real enemy is coming. And it’s more terrifying than anything the world has ever seen.

Place the following code within your CSS, if you already have a blockquote installed, search for “Blockquote” and replace the code:

blockquote {
background: #f9f9f9;
margin: 1.5em 10px;
padding-top: 30px;
padding-right: 30px;
padding-left: 30px;
padding-bottom: 30px;
border: 1px solid #000;
color: #000;
}
blockquote p {
display: inline;
}


Go into your post and wrap the text you want styled in the blockquote tag. Make sure you do not wrap the image code with the blockquote:


<blockquote>Sixteen-year-old Lyric Walker’s life is forever changed when she
witnesses the arrival of 30,000 Alpha, a five-nation race of ocean-dwelling
warriors, on her beach in Coney Island. The world’s initial wonder and awe
over the Alpha quickly turns ugly and paranoid and violent, and Lyric’s
small town transforms into a military zone with humans on one side and
Alpha on the other. When Lyric is recruited to help the crown prince,
a boy named Fathom, assimilate, she begins to fall for him. But
their love is a dangerous one, and there are forces on both sides
working to keep them apart. Only, what if the Alpha are not actually
the enemy? What if they are in fact humanity’s only hope of survival?
Because the real enemy is coming. And it’s more terrifying than
anything the world has ever seen.</blockquote>


Styling Your Blockquote

Change Background Color, Font & Border

Change the background color, font color and border color by replacing the hex code. Replace the 6 digit hex code in yellow with one of your choice.

blockquote {
background: #ffccff;
margin: 1.5em 10px;
padding-top: 30px;
padding-right: 30px;
padding-left: 30px;
padding-bottom: 30px;
border: 1px solid #97118c;
color: #2c0529;
}


22749788

Sixteen-year-old Lyric Walker’s life is forever changed when she witnesses the arrival of 30,000 Alpha, a five-nation race of ocean-dwelling warriors, on her beach in Coney Island. The world’s initial wonder and awe over the Alpha quickly turns ugly and paranoid and violent, and Lyric’s small town transforms into a military zone with humans on one side and Alpha on the other. When Lyric is recruited to help the crown prince, a boy named Fathom, assimilate, she begins to fall for him. But their love is a dangerous one, and there are forces on both sides working to keep them apart. Only, what if the Alpha are not actually the enemy? What if they are in fact humanity’s only hope of survival? Because the real enemy is coming. And it’s more terrifying than anything the world has ever seen.


Add a Background Image & a Font

Add a fancy background image into the code by copying and pasting the code in pink. Once you add a background image you need to change the BACKGROUND tag and break it up into a few parts. Don’t forget to change the padding on the right, so the font does not go into the image:

blockquote {
background-position: right center;
background-image: url(https://farm6.staticflickr.com/5350/16784729184_7a5bca908d_o.png);
background-color: #fff;
background-repeat: no-repeat;
margin: 1.5em 10px;
padding-top: 30px;
padding-right: 90px;
padding-left: 30px;
padding-bottom: 30px;
border: 0px solid #FFF;
color: #50456d;
font-family: Baskerville, "Palatino Linotype", serif;
font-style: italic;
font-size: 18px;
}


22749788

Sixteen-year-old Lyric Walker’s life is forever changed when she witnesses the arrival of 30,000 Alpha, a five-nation race of ocean-dwelling warriors, on her beach in Coney Island. The world’s initial wonder and awe over the Alpha quickly turns ugly and paranoid and violent, and Lyric’s small town transforms into a military zone with humans on one side and Alpha on the other. When Lyric is recruited to help the crown prince, a boy named Fathom, assimilate, she begins to fall for him. But their love is a dangerous one, and there are forces on both sides working to keep them apart. Only, what if the Alpha are not actually the enemy? What if they are in fact humanity’s only hope of survival? Because the real enemy is coming. And it’s more terrifying than anything the world has ever seen.


Good luck! You can do this.