Top Tip - Borders

Hello Bloggers!
As promised here is some useful information for those who need that little bit of extra help with HTML and Blog design. If you wish to post images with or without a border then this Top Tip is for you!

*************************

Sometimes once uploaded the image can have a white border around it or a grey shadow and this might not please everyone and therefore this code is the one you need to apply to your Blog. 

Step 1: Go to Blogger dashboard 
Step 2: Click on "Design"

Step 3: Click on "Edit HTML"

Step 4: Tick the "Expand widget templates" box
Step 5: Press CTRL and F at the same time (a little box shall appear)
Step 6: Type ".post-body .tr-caption" into the box (it will then highlight the text within the large HTML box
Step 7: The highlighted text will be apart of this paragraph - delete the 3 bold lines
Step 8: Repeat this twice as there should be another section within the large HTML box containing this paragraph again

.post-body .tr-caption-container img {

padding: 0;

background: transparent;

border: none;

-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);

-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);

box-shadow: 0 0 0 rgba(0, 0, 0, .1);}

}
*************************

Or perhaps you would like to add a border to your image so it stands out, therefore you need to use a few HTML codes in order to achieve this effect. I will now explain the terms so you shall understand what they are when I refer to them: 

Border - there are a lot of border styles and we can change its colour.

Padding/ Background - the background between the image and the border and we can make it a picture or just a plain colour. 

*************************

Simple border: The HTML for an image with a solid border, 1px in width, colour pink - Add your image as usual and in the "Edit HTML" tab add all the coloured code after the image location and before the />. To change the colour simply replace the code, however always remember to use # at the start. To enlarge the width increase the number and visa-versa.

<img src="http://PLACE LINK HERE" 

style="border:1px solid #CC0099;"/>

*************************

Border with padding: Apply the same technique as above however insert this HTML code into the "Edit HTML" tab. The padding for this code will be blank. Again, the same rules in order to change apply from above.

<img src="http://PLACE LINK HERE" 

style="border:1px solid  #CC0099; padding:6px;"/>

*************************

Border & coloured padding: Using the instructions from before apply this code to the "Edit HTML" tab. To change colours, width etc please see above. Please note the coloured padding is described as the 'background colour', do not fear!

<img src="http://PLACE LINK HERE" 

style="border:1px solid #CC0099 padding:6px;

background-colour:#000000;"/>

For a wide range of HTML colours please click here

*************************

So what do you think of this tutorial style post on borders? 

Let me know if it helped anyone at all!

Also suggestions on next Top Tip would be much appreciated!