2009-05-01

Image

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 template 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:-

Add or Remove Borders in CSS Templates

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:-

Add or Remove Borders in CSS Templates

With a border style such as this:-

.post img {
border:3px outset #ff00ff;
}


The image is contained within a box:-

Add or Remove Borders in CSS Templates

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
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:-

Add or Remove Borders in CSS Templates

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.

Add or Remove Borders in CSS Templates

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.

Add or Remove Borders in CSS Templates

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;
}




التعليقات:

  1. Where do I look for the code that controls the border around the sidebar widget/gadget content. Each one has it's own border and I want to get rid of that.

    ReplyDelete
  2. Tq soo much! best answer so far! i've searched the google n cant find any answer for removing border around my blog! this site's a savior!

    ReplyDelete

Total Pageviews