How to Customize Weebly Block Quote Element?

Block quote element is used to highlight important content on your page like summary, conclusion and quotes from others. Weebly offers many themes and you will be in luck if you like a theme with default block quote element. However, it is always the case that you like the theme much but not the block quote element. This is due to the fact, most block quote styles are very simple in Weebly just showing bolded text. In this article, we will explore the possibilities of customizing Weebly block quote element to make your content more attractive.

Related: How to add block quotes in WordPress?

Customize Weebly Block Quotes

There are multiple ways to change the default block quote element style on your site:

• Copy the style from other Weebly theme
• Customize the existing block quote element
• Using custom CSS
• Insert single block quote using embed code element

Let us discuss each option in detail.

1. Copy CSS from Other Theme

It may be the case you like the block quote element style of other Weebly theme and wanted to apply the same style to yours. Follow the below instructions to copy the style from any theme to your site’s theme:

• Login to your Weebly account and edit the site your current site.
• Add a block quote element with some dummy text.
• Go to “Theme > Change Theme” and “Preview” the theme.
• Check the block quote element style whether you like it.
• “Choose” the theme with the block quote element of your choice.
• With the new theme, go to “main.less” file available under “Theme > Edit HTML / CSS“.
• Search for the word “blockquote” and copy the style to your clipboard. You may need to look under other .less files if block quote style is not available in main.less.
• Now again go back to “Theme > Choose Theme” and “Choose” your original theme.
• Go to “main.less” file and replace the “blockquote” style with the copied one.

Once you save the changes all existing block quote element’s style on your site will be changed as per the new style. You can also instantly checkout the new style by dragging and dropping a block quote element on your content area.

Note: Some themes have the style element as simply “blockquote” and some may have “#wrapper blockquote“.

2. Modifying Existing Block Quote CSS

Some times you simply want to do minor changes to your block quote style like changing the background color or adding borders. In this case, as explained above go to the main stylesheet of your site to find the relevant block quote style code. You can modify the color, font and other properties as you need.

Before changing, we recommend you to check the source code using Google Chrome browser. This will help you to identify which file contains the code and modify the code in that file easily.

3. Replace Default CSS with Custom CSS

If you don’t like any of the existing theme’s block quote element style then you can write your own CSS and replace the existing style as explained above. Here is a simple example of the CSS code, you can customize the parameters as per your need:

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #ffffff;
border-left:5px solid #ff7f00;
background:#4b8baf;
}

Just replace the default “blockquote” style under “main.less” file with this code and you will see the block quote element is changed as below:

4. Insert Block Quote with Embed Code Element

The above methods change the style of the default block quote element and applicable throughout the site. Some time you may be interested in adding different block quote only on particular page. In this case using inline CSS will help to create your block quote like below:

You can customize the color and borders to create different styles of block quotes as you need. Below is the CSS and HTML code for the custom block quote. You have to copy and paste this code inside an “Embed Code” element.

.webnots_quote {
    background: #c97e69 none repeat scroll 0 0;
    border-color: #808080;
    border-style: inset;
    border-width: 0px 0px 0px 20px;
    color: #ffffff;
    font-size: 20px;
    padding: 5px;
    font-family: monospace;
}
<blockquote class="webnots_quote">
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</blockquote>

Make sure to change the dummy text and add your own content. View the demo on how to change the default block quote CSS with your own custom CSS:

Check out our article on how to add Bootstrap style block quote elements on your site.