Borders in Blogger Template

<div dir="ltr" style="text-align: left;" trbidi="on">In Blogger default templates (like <i>Minima</i>), 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....<br /><br />First, let's check the styles for the borders that we can use:<br /><ul type="disc"><li><b>none</b><b>:</b> no border at all</li><li><b>dotted</b><b>:</b> series of dots.</li><li><b>dashed</b><b>:</b> series of short line segments.</li><li><b>solid</b><b>:</b> single line segment.</li><li><b>Double:</b> two solid lines.</li><li><b>Groove:</b> 'carved' into the canvas.</li><li><b>ridge</b><b>:</b> like it is coming out of the canvas.</li><li><b>inset</b><b>:</b> like it is embedded in the canvas.</li><li><b>outset</b><b>:</b> like it is coming out of the canvas. </li></ul><div class="separator" style="clear: both; text-align: center;"><br /></div><a href="http://i37.tinypic.com/xmttew.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="2" src="http://i37.tinypic.com/xmttew.jpg" style="display: block; height: 250px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br /><br /><a name="more"></a><br /><br /><span style="color: #20124d;">HOW TO CHANGE MY BORDER?</span><br />To make any kind of changes, you have to go to:<br />DASHBOARD ► LAYOUT ► EDIT HTML, and find the code that corresponds to the borders:<br /><div class="codeview">border:1px solid $bordercolor;</div>...your code (CSS style) may be a bit different, (this is example for Minima default template), but it will always start with "border:"<br />...use CTRL + F (Apple Key+F) to locate the line easily...<br /><br />We can change:<br />- the width <span style="font-weight: bold;">1px</span> into 2px, 3px, 4px....<br />- border style <span style="font-weight: bold;">solid</span>, into some other style. Like, <span style="font-weight: bold;">dotte</span><span style="font-weight: bold;">d</span>, or <span style="font-weight: bold;">dashed</span>.....<br />- change the color, inserting the part in green, below the existing part (in white):<br /><div class="codeview"><br />border: 1px solid $bordercolor;<br /><span style="color: #33cc00;">border-color: ff7700;</span></div>...with this, we gain control of border color, so Blogger "$bordercolor" is no longer in charge...<br />..to change the color into the one you want, change the hex value (<a href="http://cloford.com/resources/colours/500col.htm" target="_blank">hex color library here</a>)..<br /><br />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!<br />I want to add a frame / box / borders around my sidebar section. And, I want left one to be <span style="color: red;">red</span>, right one <span style="color: #3333ff;">blue</span>, bottom one <span style="color: #33cc00;">green</span> and top one <span style="color: yellow;">yellow</span>. Here's how:<br /><div class="codeview">#sidebar-wrapper {<br />border-left: 3px solid #FF0000;<br />border-right: 3px solid #0000FF;<br />border-bottom: 3px solid #00FF00;<br />border-top: 3px solid #FFFF00;<br />padding-left:7px;<br />width: 220px;<br />float: $endSide;<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://s19.postimg.org/cdg9qlj2r/sidebar_borders.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="http://s19.postimg.org/cdg9qlj2r/sidebar_borders.gif" width="181" /></a></div> ...I added some padding-left so that the text is not to close to the border...<br />...change the width, colors, styles...<br />...and that's it. I know it looks silly, but you'll experiment, and get a beautiful results....<br />And if you are up to some more customization, check this article about placing your custom picture as a divider.<br /><br />Smile </div></div>

Blogger Template Borders in Blogger Borders in Blogger Template CSS 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...

Read more »