New Blogger Themes : How To Resize and Adjust Blockquote Text, Change Font Style and Design in Emporio Theme

Blockquote is a quotation in a particular post or article (where it is used) that stands out from the main text as a article paragraph, or block of text. Blockquote is used by bloggers or writers to give out a particular sentence which they wants readers to read or copy (especially code). In Blogger or WordPress or any other blogging platforms, writers whose niche is related to “How To” do use this code.

In Blogger, the old themes are set to default to display Blockquote in a good style and default text and font. In the new blogger themes, Blockquote is not well edited which is not suitable for mobile viewers. This in the sense that, it displays x-large text, italic font, and centred in the middle. This was an issue I faced for good 1 week after installing emporio blogger new theme because it Blockquote is annoying which makes mobile post page too long

Finally, I found the correction to the issue of blockquote in blogger new themes which I am here to share with my fellow bloggers who have not tweaked their blockquote. You can edit your Blockquote using it css widget via your html template/theme.

How To Get Started

Log in into your blogger dashboard

In the left menu, click “Theme” >> “Edit HTML”

Let the html code area load completely, then tap anywhere inside the code and click CTRL+F to open search box. (For Mac PC, use Cmd+F)

If I tell you to search blockquote you might find it not one or twice neither thrice. Therefore search this one and only code.

color: $(blockquote.color);

Among above code you will see below code.

blockquote {
   color: $(blockquote.color);
   font: $(blockquote.font);
   font-size: x-large;
   font-style: italic;
   font-weight: 300;
   text-align: centre;

Change x-large to small Change italic to normal Change centre to left

Finally the css code will be :slight_smile:

blockquote {
   color: $(blockquote.color);
   font: $(blockquote.font);
   font-size: small;
   font-style: normal;
   font-weight: 300;
   text-align: left;

Successfully, you have adjusted your Blockquote size and position. Now you have to design your blockquote.

Still in the html code area, search :

]]></b:skin>

Above it, copy and paste the following css code

blockquote {background: #f5f5f5;font: 13px/20px;color: #444;border-left: 4px solid #fa5b0f;padding: 15px;font-family: Geneva, Tahoma, Verdana, sans-serif;} /code]

Save your theme and preview your blog post where you have used blockquote.

Is this not cute???

I hope this helps…

Cheers!

Recommended :

==> How To Hide Blur Images On Post Pages of Emporio Blogger Theme

==> How To Adjust Width of Sidebar and Post Stream on Emporio Blogger Theme

5 Likes

Thank you very much @Ogbongetechs it worked for me, I changed my own font size to large because the small was too small and my font style still remained as italic. OgbongePlanet rocks.

1 Like

This really help me, actually my blockquote code was x-large and when I changed it to small everything become OK, thanks

I can’t thank you enough. I hated what this pretty contempo design’s choice for blockquote did to my quotes. It has made me perplexed at wanting a whole different theme due to how it ruined the quotes. Now I don’t have to. Thank you so much!