Html code for the quote. Vertical line on the left
Greetings. In this tutorial I want to teach you how to change the design of quotes in wordpress. To begin with, let's figure out what citations are in the text.
Quote concept in wordpress
To highlight some important piece of text in an article, WordPress has such a cool thing as quotes (not those that were analyzed about). On the toolbar, this button looks like this.
Everyone knows how to use it - the left mouse button circles the text that we want to highlight, and press this button. Actually now you see this text in the design of quotes.
All templates are different, and, accordingly, the design of quotes is also different. In some cases, it is not beautiful at all, and which you want to change. Then I will learn how to fix it.
We start work.
I warn you that we will work with a language like CSS. The main thing is to understand the whole principle of what is happening and then it will not be difficult.
We find the file and the desired style.
You need to find the style.css file in the active theme. To do this, we go to the appearance, and then the editor, we find style.css. The next step is to find the style for blockquote. We look at the sequence of all actions in the picture.
The path to the style.css file itself
Search request. The search is opened by pressing CNTRL + F, and then paste the query.
Found lines of code, they are needed.
We change the layout.
You need to understand what exactly you want to see. I advise you not to invent any pictures and the like. The maximum that can be done
Change background.
Font size and design.
A frame (solid, intermittent, dots), can be on one side or on both.
No pictures and the like, otherwise it will be, you don’t need unnecessary problems. I offer you a standard set.
The style for block quotes with an opening bracket.
Background color.
Stroke, I did only on the left, if you wish, you can do it from all sides, or from two.
Block shadow.
Indents so that the entire block does not stick to the text of the article.
Font size and its ownership.
Font style, I made italic.
Font color.
Text shadow.
The closing brace style.
The CSS language is very simple and intuitive, you can read the lines and understand everything yourself. You can add, on the contrary, remove, but I repeat, do not insert pictures, because it is an adaptation. If you have knowledge, then apply, or ask in the comments.
The second way is with a plugin for formatting quotes on a WordPress blog
Of all the abundance, I liked one, this WP-NOTE is simple and not heavy. It is installed from the admin panel by searching for plugins.
Now let's learn how to use it.
It has 5 design options for different situations. First, I'll tell you how to write it. When writing an article, the text that will be highlighted must be enclosed in special tags, I will show it with an example [ note ], see the screenshot.
Clearly, I show all the tags and their transcripts.
Use for health. I don't use this plugin, blockquote answers everything for me, and it's a nice and lightweight plugin.
Two elements are used to create quotes in HTML: block element <Ыockquote>
and inline element . Tag <Ыockquote>
used to display long quotes that take up an entire paragraph and display it indented from the left and right edges. This tag allows you to place text compactly in the center of the page. It may contain other text formatting elements.
Element used for short quotes that are part of the current paragraph. Generally, browsers wrap the content of an element in quotation marks. Typically, a quotation does not include line breaks, and the quotation is considered a text-level element.
Both elements can have an attribute CITE, whose value is the URL of the quoted fragment.
Example: long and short quotes
Try it yourself "
can be easily determined using a vertical plumb line.
As A. A. Milne said, some people talk to animals.
Zenith is the highest point in the sky for an observer. in the vertical direction, which, as is known, can be easily determined using a vertical plumb line.
As A. A. Milne said, some people talk to animals.
Tag
An abbreviation is an abbreviation of words adopted in writing or a word made up of several parts of other words (university, research institute, executive committee, etc.). When using any acronym or abbreviation in the text, use the tag . Using the "title" attribute, you can set a tooltip with the decoding of the abbreviation. At the same time, search robots index exactly the full version of the transcript, defined in the "title" attribute. To distinguish abbreviations from regular text, they are underlined with a dotted line.
Example: Abbreviation
Try it yourself "
NASA is doing some incredible space experiments.
Ex. Stephen Hawking is a theoretical physicist and cosmologist.
NАSА!} hosts some incredible space experiments.
Ex. Stephen Hawking is a theoretical physicist and cosmologist.
Tag
Tag used to indicate contact information, addresses and telephone numbers. It may contain a postal address, as well as an email address or phone number. Most browsers display the element's content italic font.
Example: Address
Try it yourself "
HTML Tutorial Belyi Maksim Maksimovich Northwestern Institute of Technology Teplogorsk State University of Technology and Design [email protected]
tags and
Tag used when referring to some primary source, such as a book, website, or academic work, to indicate the referenced source. Often used in bibliography, when attributing copyright or mentioning the name of the owner of a resource. Browsers display element content italic font.
Tag used to indicate the definition of some new term. The explanation of a new term (a scientific concept or a narrow-profile name) in the text is called a “definition”. Element can be used if a new term occurs in the text for the first time and its definition is immediately given. The browser displays such text in italics.
Example: Sources and definitions
Try it yourself "
Watching Stephen Hopkins' Red Dragon.
The momentum of the body is a vector quantity, the direction of its vector is the same with speed direction
More than ten thousand tickets were sold in the first month alone to watch a movie Red Dragon Stephen Hopkins.
body momentum is a vector quantity, the direction of its vector is the same with speed direction
Tag
Tag controls the direction of the displayed text. It has a required dir attribute that takes the values ltr (left to right) and rtl (right to left).
Example: Text Direction
Try it yourself "
If your browser supports bidirectional algorithm (bdo), next line will be written from right to left (rtl)
This text is written from right to left.
Tasks
Final task
In this lesson, you got acquainted with some more logical formatting elements that determine not the appearance of the text, but its type, and depending on which browser applies one or another type of external formatting. All of the elements discussed above are containers and require a closing tag. Some of these elements may not change the appearance of the text at all, so the focus here was on how they define the meaning of text rather than how they format it.
It's time to review what you've learned and complete four simple tasks:
Short Quote
Decide for yourself »
Using the HTML boolean, add quotation marks around the word: "Theory".
Short Quote
Theory predicts new phenomena and new laws.
Short Quote
Theory predicts new phenomena and new laws.
long quote
Decide for yourself »
Put the following text inside an element that will make it a left indented quote. Specify the URL of the resource where this quote comes from: "http://www.world.org".
long quote
A characteristic of the speed and direction of movement is a physical quantity - speed.
Element definition has been changed
and . The article explains what this means for developers.
Definition Changes
Element
represents content that is a quote from another source, possibly, including a mention of this source, which should be placed inside elements
