Borders in Blogger Template | ZenTek ZenTek: Borders in Blogger Template
Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *

Email: *

Message: *


LiveZilla Live Help

Borders in Blogger Template

In Blogger default templates (like Minima), you can see that all kinds of borders are present. Borders around header, borders between posts and sidebar gadgets....In the control menu, Fonts and colors, we are allowed just to change the color of the border. But there's so much more to it....

First, let's check the styles for the borders that we can use:
  • none: no border at all
  • dotted: series of dots.
  • dashed: series of short line segments.
  • solid: single line segment.
  • Double: two solid lines.
  • Groove: 'carved' into the canvas.
  • ridge: like it is coming out of the canvas.
  • inset: like it is embedded in the canvas.
  • outset: like it is coming out of the canvas. 

To make any kind of changes, you have to go to:
DASHBOARD ► LAYOUT ► EDIT HTML, and find the code that corresponds to the borders:
border:1px solid $bordercolor;
...your code (CSS style) may be a bit different, (this is example for Minima default template), but it will always start with "border:"
...use CTRL + F (Apple Key+F) to locate the line easily...

We can change:
- the width 1px into 2px, 3px, 4px....
- border style solid, into some other style. Like, dotted, or dashed.....
- change the color, inserting the part in green, below the existing part (in white):

border: 1px solid $bordercolor;
border-color: ff7700;
...with this, we gain control of border color, so Blogger "$bordercolor" is no longer in charge... change the color into the one you want, change the hex value (hex color library here)..

There's also one cool style that I don't see so often in Blogger Designs, and that is using borders for a specific part of the "box". You can change right, left, upper and bottom border. And they can all be in different styles!
I want to add a frame / box / borders around my sidebar section. And, I want left one to be red, right one blue, bottom one green and top one yellow. Here's how:
#sidebar-wrapper {
border-left: 3px solid #FF0000;
border-right: 3px solid #0000FF;
border-bottom: 3px solid #00FF00;
border-top: 3px solid #FFFF00;
width: 220px;
float: $endSide;
 ...I added some padding-left so that the text is not to close to the border...
...change the width, colors, styles...
...and that's it. I know it looks silly, but you'll experiment, and get a beautiful results....
And if you are up to some more customization, check this article about placing your custom picture as a divider.

Like the Post? Share with your Friends:-

Team SB
Admin: Akash

Contact Us


Email *

Message *


About Me

Hello Guys

I am an IT(Information Technology) Student design this blog for your Preference I always enjoyed technical things as a kid

now here i am sharing my knowledge about Tips and Tricks In Internet PC Windows Free Recharges and Other Cool Stuffs Too

So enjoy it


Widget by : ZenTek
Widget by : ZenTek
Copyright © . ZenTek. All Rights Reserved.
Designed by :-Way2themes