Borders are essential to increase blog's outlook beauty. To increase the beauty of any blog, we may enable or disable blog's border or even may change it's color, style, width, height etc. This page presents a helpful basic idea about customization borders. You don't need to know anything except reading this page.
No technical knowledge is required. Just follow the instructions.
Only 2 steps solution.
Remember, don't forget to back-up your blog before doing that. To learn how to back up,
click here to read.]
What is border?Borders look like rectangle boxes. In Blogger's default template, you can see several types of border around header, between posts and sidebar.
What to do to customize or edit border?Step 01: At first do the following things:
- Go to "Dashboard" and click on "Layout"
- Select "Edit HTML"
- Click on the check box of "Expand Widget Templates"
Step 02: Find the code that corresponds to the borders:
border:1px solid $bordercolor;
(it means border-key: width style color; )
Here Minima's code is displayed. Your code may be some different but it must be start with "border:". So, use "CTRL + F" and find by using "border:"
Let, change the following things as your wish:
- border-key: may be border, border-left, border-right,...etc.
- width : use 1px to 2px, 3px, 4px, 5px, 6px,....etc.
- style: may be solid, dotted, dashed, double.... etc.
- color: may be any hex value or red, green, blue..... etc.
Example: let we have the following outlook:
Now we want to change & want to do the following looks:
So, we have to modify the code in the following way:
border:5px dotted blue;
More explanation : Techniques of border customization:
Moreove, you can more customize your blog's border. There are so many cool style you can use. Such as, you may change each border with each color. For example, we customize the "sidebar-wrapper" by the following code:
#sidebar-wrapper {
border-left: 10px solid red;
border-right: 10px solid blue;
border-top: 10px solid orange;
border-bottom: 10px solid green;
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
We just added the blue-background code. Those 4 lines alos add to the hearder border too. Now, the outlook of the blog will look the follwoings:
Advanced Discussion : Techniques of border customization:
At first remember the following format:
border-key : width style color
Now, all the parts are discussed more details:
border-key:A border is made of a rectangle. If you use only "border", it means the whole 4 lines of a rectangle. If you use "border-left", then it indicates only the left line of the rectangle. So, we can define the 4 lines of a rectangle as "border-left", "border-right", "border-top" and "border-bottom". The following table shows the meaning of border:
| border-key: | meaning
|
border
| means the whole rectangle border
|
border-left
| means all the border's left part only
|
| border-right | means all the border's right part only |
| border-top | means all the border's top part only |
| border-bottom | means all the border's bottom part only |
width:
It indicates the width of the border. It may be form 0 to 1, 2, 3 etc. If you use 0 value, the border will not be displayed. Otherwise, the more you increase the value the thickness of the border will be increase. For example:
if you put width value = 1, then it looks like: ------------------------
if you put width value = 3, then it looks like:
--------------style:
It indicates what will be the style of the border. Borders style may be "none", "solid", "dotted", "dashed", "ridge" etc. Look the followings for different types of borders outlook:
border value
| meaning
|
none
| no border
|
solid
| single line segment
|
dotted
| series of dots
|
dashed
| series of dashed
|
double
| two solid lines
|
groove
| "carved" into the canvas
|
inset
| looks like embedded in the canvas
|
outset
| looks like coming out form the canvas |
rigid
| reverse looking of groove
|
color:
