Sep 5, 2007
Add or Remove Borders in CSS Templates
We have received a number of queries from people wanting to remove the image borders or add sidebar borders in the CSS layouts. In this article, we cover briefly what the border styles in CSS templates are and where you can find them. With this guide, you will be able to remove the borders around the images, sidebar or main posts, or change the style and color of the borders to match the Blog design.
The point to note is that some templates such as Scribe, TicTac and Thisaway use background images to create the look of the main post and sidebar sections. The 'borders' you see in these templates are the result of the background images. To change or remove the 'borders' around the main post and sidebar, the images will have to be altered and replaced. The sections in this article on CSS borders around Blog Posts or Sidebar will not apply to these templates.
Border Property
When you are logged into Blogger, go to Template -> Edit HTML and do a search (Ctrl+F) for the word “border”. You will see it appearing in a number of places in the template. In most of the stylesheets, the border settings are defined in one shorthand declaration like this:-
border:1px solid $bordercolor; |
|---|
1. border
This is a shorthand setting for all the four borders. Instead of “border”, we may sometimes see “border-top”, “border-bottom”, “border-left” or “border-right” which sets a style specifically for that element's top, bottom, left or right border respectively.
2. border-width
There are three properties in the declaration. The first setting is the border width. It can be stated as a value in pixels like the example given or in general terms. The possible values are:-
1px (or any other length) thin medium thick |
|---|
3. border-style
The second setting in the shorthand declaration is the border style. Here, the possible styles are:-
none hidden dotted solid dashed double groove ridge inset outset |
|---|
You can see some of these styles in our following examples.
4. border-color
The final setting is the border color. If you see $bordercolor, it is a variable (“Border Color”) that you can change via Template -> Fonts and Colors. If you want a specific color for the border of an element, you can also change $bordercolor to a color code. Possible values are:-
#cc0000 rgb(204,0,0) |
|---|
For a list of color codes, you may refer to our Color Code Chart.
Now that we understand what these styles are, we can proceed to customize our template. Go to Template -> Edit HTML and locate the border settings.
Border around Profile Image
Look for this line and if you do not want the border, change it to “0px”:-
.profile-img { border: 0px solid $bordercolor; } |
|---|
or “none”:-
.profile-img { border: none; } |
|---|
If you want a different style or color, amend the settings to one of the other possible values outlined above. For example, if we change the code to this:-
.profile-img { border: 2px dashed #ff00ff; } |
|---|
This is what you will see:-
Border around Images in Blog Posts
The border styles for the images in Blog Posts are found here:-
.post img { border:1px solid $bordercolor; } |
|---|
Set it to “0px” or “none” to remove the image borders in the Blog Posts or customize the border style to something you like. Without a border, an image looks like this:-
With a border style such as this:-
.post img { border:3px outset #ff00ff; } |
|---|
The image is contained within a box:-
If you post a lot of pictures and graphics on your Blog, you may like to spend some time configuring this and choosing an appropriate border setting.
Border around Image Links
In many of the templates, there is a style defined for image links. These are the clickable images which bring you to another webpage or URL when clicked. If you are interested in creating image links or want to understand what the codes are, you may view our Hyperlinks article.
You can customize the border settings of image links at:-
a img { border:0; } |
|---|
Border around Images in Sidebar
In our Minima template, there is no unique style definition for images in the Sidebar. We can still set a special border style just for the images in the Sidebar, without affecting the border styles in our Blog Posts. Add into the stylesheet this code:-
.sidebar img { border:6px ridge #ff00ff; } |
|---|
In the above example, the images in the Sidebar will have a “ridge” effect that looks like this:-
Border around Header
Many people upload images into the Blog Header and a border around the Header will stick out like a sore thumb. To remove the Header border, look for the border settings under any of these.
#header-wrapper #header #head-wrap #head |
|---|
Border around Blog Posts
To demarcate each post, instead of a line at the bottom, you can have a border around the entire Blog Post.
Scroll to where you see this and change or insert the code (shown in red):-
.post { border:1px dotted #ff00ff; padding:1.5em; } |
|---|
We have included a padding to give some space between the contents and the border. Without this padding, the text will be too close to the border.
Border around Sidebar
Similarly, to add a distinctive border around the Sidebar, change or insert this code (shown in red):-
#sidebar-wrapper { border:1px dotted #ff00ff; padding:1.0em; } |
|---|
In some templates, you may insert the code under any of these:-
#sidebar-wrap
#sidebar
The padding adds a space between the Sidebar content and the border. Preview the template. If you find that the layout is affected because of the padding, reduce the margin between the Blog Posts and the Sidebar.
Border around Footer
If your template has a Footer element, the border style can be found under:-
#footer { border:1px solid $bordercolor; } |
|---|
Border around Entire Blog
If you wish to have a border surrounding the entire Blog, you may add a border style to this part of the template:-
body {
border:1px solid #ff00ff;
}
