Quick WordPress Tricks: Adding Fancy Borders Easily

One of the missed styles in WordPress is the border. Sometimes you need to enclose a piece of information, table, a list, a column or any other block in a border to pop it up. What about adding fancy borders easily?

This tutorial will include:

• Briefly, How WordPress Works?
• Where to add the additional CSS ?
• Adding additional CSS to elements directly vs classes.
  • The code that we will add for you to copy and paste directly.
• The different border styles available

First Things First, a quick introduction about WordPress

• WordPress is a Content Management System
• It is build using PHP and MySQL Database
• It delivers to the visitor of your web page or your blog post an HTML result of interpreting the PHP and DataBase
• Since the result is HTML, it needs some styling i.e. CSS (Cascaded Style Sheet)
• WordPress offers a predefined blocks to write your post or build your page as Paragraph, list and image blocks
• It offers a set of styles for each block
• It offers Advanced options for almost every block where you can add some CSS Classes

Where to add the additional CSS ?

• When You add any block, you can find some of its settings in the top tool bar and some others in the right side panel
  1. IF you don’t see the Block side settings panel, click the settings icon
  2. Make sure you select “Block” because Document is for general document settings as categories and tags
  3. Click on Advanced (Not available for Post Title)
  4. Write here the class that you added in the Appearance Customization window

5. From the WordPress right side panel select Appearance , Then Select Customize.
   I recommend you right click on Customize and ope it in a new Tap or Window
6. Near the end of the theme customization settings, there is the Additional CSS item, click on it
7. It will open the Customization Additional CSS writing panel. It includes support prediction pop ups

Adding additional CSS to elements directly vs classes

• By Elements here we mean the basic HTML elements or WP blocks as Paragraphs, Lists, Images and so on
• When you add style to them directly in the Customizing Additional CSS as step 7 above, this will modify this element in all instances of this block in all your posts
• Copy the code to the right to the Appearance>Customize>Customizing Additional CSS Then click Publish
  • 5px is the border width
  • dashed is the style of the 4 sides of the border
  • black is the color of the border
• Refresh your post view and you will find all paragraphs in any post surrounded by a dashed black border

p{
	border: 5px dashed black;
}

Adding Classes and calling them with specific block

• This time in Appearance>Customize>Customizing Additional CSS we shall add the code to the right here->
• These are 2 classes with CSS (cascaded style sheet) code as it is having a dot ( . ) before the name
• After Publishing these Additional CSS classes by clicking publish on the top, Go to your post
• At the block you want to add the classes follow steps (1-4) –click here to return to it–
• Then Preview Your post, you will find that this specific paragraph had Yellow border while all other still keep the dashed black one
• You can remove the dashed borders bu deleting these lines from your Customization Additional CSS and Pubish

.border_1{
	border: 5px solid yellow;
}
.padding_25px{
	padding: 25px;
}

The different border styles available

• dotted – Defines a dotted border
• dashed – Defines a dashed border
• solid – Defines a solid border
• double – Defines a double border
• groove – Defines a 3D grooved border. The effect depends on the border-color value
• ridge – Defines a 3D ridged border. The effect depends on the border-color value
• inset – Defines a 3D inset border. The effect depends on the border-color value
• outset – Defines a 3D outset border. The effect depends on the border-color value
• none – Defines no border
• hidden – Defines a hidden border
  Source is https://www.w3schools.com/css/css_border.asp

.border_1{
	border: 5px solid yellow;
}