Categories
WordPress WordPress Quick Tricks

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?

Yoga 2 Life coach Certification

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

Before the detailed steps, if you like, You can watch a step by step video below. For any clarification or comment fill the form to the side and we shall come back to you as soon as possible

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
top tools bar
top tools bar for a list block
block settings side panel
  1. 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
  2. Near the end of the theme customization settings, there is the Additional CSS item, click on it
  3. It will open the Customization Additional CSS writing panel. It includes support prediction pop ups
wp - customize - link
Step 5
wp - Customization window
Step 6
wp Additional css panel
Step 7

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;
}
Paragraphs dashed border

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
wp-add clases
.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

To use any of them just replace the style: Solid in the code to the side with the appropriate style from the list above, you can adjust color and width as your preference

.border_1{
	border: 5px solid yellow;
}
Subscribe to our Photoshop Tutorial Blog to receive latest Tricks and Tutorials as they are released and to Join Discussions


Subscribe to our YouTube Channel
Click Here-> OneOfTheSimpleWays

If you have any Clarification about the steps in this tutorial or any other Photoshop clarifications leave us a note below

Free Coaching Class

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.