How to Make a Shaped Border on Your Posts


So many tutorials start out with "have you ever wanted to....?" But since you probably didn't even know this was possible, and had likely never seen it before, you probably never wanted to do it, nor do you now. And you probably still won't want to after you have finished reading the post.
MY RESPONSE:
So what?
Regardless of the public interests, I am going to make this tutorial.
So, if you want your posts to look somewhat like the one in the picture above, read on.
(NOTE: This post border does not look quite as nice on REALLY long posts, but it doesn't look bad either.)






HOW TO MAKE A SHAPED BORDER ON YOUR POSTS

Step 1: Make a border on your post
This can be done by going to your Dashboard>>Template>>Customize>>Post, then choose a border color, if you do not have a theme that has a border, you will need to add one manually, which I will show you how to do later. For now, lets just say you have one, otherwise you probably wouldn't care what shape it had. The shaping works just as well with a post background color as without. It looks best with a bold, contrasting border. 

Step 2: Change the code-make the curves
Now you are going to go to your Dashboard>>Template>>Edit HTML,
Click somewhere in the HTML and hit Ctrl+F. A search box should open in the upper right corner OF THE HTML section, NOT the browser window. THIS IS CORRECT
WRONG
Search for the following piece of code 
/* Posts
Now scroll down just a bit and you should find a piece of code that looks like this:
.post-outer {
  background-color: $(post.background.color);
  border: solid 1px $(post.border.color);

  -moz-border-radius: $(post.border.radius);
  -webkit-border-radius: $(post.border.radius);
  border-radius: $(post.border.radius);
  -goog-ms-border-radius: $(post.border.radius);

  padding: 15px 20px;
  margin: 0 $(post.margin.sides) 20px;
}
Replace it with the following code:
.post-outer {
  background-color: $(post.background.color);
  border: solid 1px $(post.border.color);

  -moz-border-radius:  15px 100px 15px 100px;
  -webkit-border-radius:  15px 100px 15px 100px;
  border-radius:  15px 100px 15px 100px;
  -goog-ms-border-radius:  15px 100px 15px 100px;

  padding: 15px 50px 30px;
  margin: 0 $(post.margin.sides) 20px;
}
You might want to go ahead and hit preview just to make sure you like how it looks, but that should do the trick.

Step 3: Make the border thicker (optional)
You can also make your border thicker by changing the amount of px in its thickness. In the code I have given, it is at its default of 1px, but you can change this to anything you want. In the picture at the beginning of the post, the border is at 4px.

.post-outer {
  background-color: $(post.background.color);
  border: solid 1px $(post.border.color);

  -moz-border-radius:  15px 100px 15px 100px;
  -webkit-border-radius:  15px 100px 15px 100px;
  border-radius:  15px 100px 15px 100px;
  -goog-ms-border-radius:  15px 100px 15px 100px;

  padding: 15px 50px 30px;
  margin: 0 $(post.margin.sides) 20px;
}

HOW TO MAKE A SHAPED BORDER ON YOUR POSTS
If your template doesn't provide a border for you.
Step 1: Add the base code to your template
To do this, you need to go to your Dashboard>>Template>>Edit HTML, and open the search box.
Search for the following code as before. 
/* Posts

Underneath it there is probably a line that looks something like this:

----------------------------------------------- */

Directly beneath that line, paste the following code:

.post-outer {
  background-color: white;
  border: solid 4px black;

  -moz-border-radius: 15px 100px 15px 100px;
  -webkit-border-radius: 15px 100px 15px 100px;
  border-radius: 15px 100px 15px 100px;
  -goog-ms-border-radius: 15px 100px 15px 100px;

 padding: 15px 50px 30px;
  margin: 0 0 20px;
}


HOW TO CUSTOMIZE YOUR BORDER
You could go ahead and keep the thick black border, or you could tailor it to your blog's mood and color scheme. First of all, I recommend going to some site like color hex where you can play around with colors easily, and get hex codes, rgb...etc., for any color you want. Now, lets take a peek at that code.
.post-outer {
  background-color: white;
  border: solid 4px black;

  -moz-border-radius: 15px 100px 15px 100px;
  -webkit-border-radius: 15px 100px 15px 100px;
  border-radius: 15px 100px 15px 100px;
  -goog-ms-border-radius: 15px 100px 15px 100px;

 padding: 15px 50px 30px;
  margin: 0 0 20px;
}

You already saw how to make the border thicker and thinner with the px number, but there are three other major changes that you will probably want to make. The first of these is the Background Color, shown in pink you can change this to any color simply by changing the word white to a hex code, or even just the name of the color, if its a more common one. So lets change that to Red or #ff0000.
.post-outer {
  background-color: #ff0000;
  border: solid 4px black;

  -moz-border-radius: 15px 100px 15px 100px;
  -webkit-border-radius: 15px 100px 15px 100px;
  border-radius: 15px 100px 15px 100px;
  -goog-ms-border-radius: 15px 100px 15px 100px;

 padding: 15px 50px 30px;
  margin: 0 0 20px;
}

Please excuse my nonsense text. So we now have a red background. The second thing that you probably want to change is the color of your border. For the example, we will change it to blue or #0000ff. The border color is outlined in blue below, just to make it easier.

.post-outer {
  background-color: #ff0000;
  border: solid 4px #0000ff;

  -moz-border-radius: 15px 100px 15px 100px;
  -webkit-border-radius: 15px 100px 15px 100px;
  border-radius: 15px 100px 15px 100px;
  -goog-ms-border-radius: 15px 100px 15px 100px;

 padding: 15px 50px 30px;
  margin: 0 0 20px;
}



And last, but definitely not least, you can change the border style. Currently it is solid, and for the example, we will change it to dotted. To do this, you just change the word solid (outlined in green) to dotted, and sit back watch the results.


.post-outer {
  background-color: #ff0000;
  border: dotted 4px #0000ff;

  -moz-border-radius: 15px 100px 15px 100px;
  -webkit-border-radius: 15px 100px 15px 100px;
  border-radius: 15px 100px 15px 100px;
  -goog-ms-border-radius: 15px 100px 15px 100px;

 padding: 15px 50px 30px;
  margin: 0 0 20px;
}



For a list of Border Styles look HERE 
Hope you found this useful, feel free to comment with any questions. 
 photo theauthor_zps8356b86b.png

FACEBOOK   GOOGLEPLUS   PINTEREST   TWITTER

1 comment:

  1. I found this VERY useful and have now installed a curved blue-gray double border on my posts. Thanks.
    So, my most brilliant and creative friend, do you know how I can make my sidebar opaque or give it a background of some sort?

    ReplyDelete

I should be most pleased if you would leave a comment. I do so love reading them and hearing what you think.
(all of it, I want to know everything you think about....wait no, that's creepy)