Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Thursday, July 22, 2010

Test removing border from image

The photo displayed below uses codes sent to me by a blogger and as you can see, there is a border:




Compare with the photo below and you can see that the border has been removed:




The border was removed by adding this inline CSS style="border:none;" immediately after the img tag. For further details, see How to remove border in images uploaded by Blogger.com

Saturday, June 05, 2010

Test post title color font type and size

This post is to test if inline CSS can be activated in post title to control the font type, color and size.

Below is what I typed into the post title box:
<span style="color:red; font-family:Reenie Beanie; font-size:140%">Test post title color font type and size</span>

and as you can see from the post title of this post is different from the other posts in this blog. The styling of this post title is controlled by the inline CSS

Note that while font-color and font-size doesn't require extra word, to display the Reenie Beanie font, some code to enable @font-face must be added to the CSS part of the template which has been tested at Test @font-face and inline CSS

Thursday, February 26, 2009

Testing bulleted list in Blogger sidebar

A blogger asked: "how do I add bullets or dots to my link list in the sidebar? I have tried many ways but I can't seem to do it."

I initially tried using an unordered list in a HTML/Javascript gadget:

<ul style="list-style-type:disc;">
<li><a href="http://www.bloggertipsandtricks.com">Blogger Tips and Tricks</a></li>
<li><a href="http://bloggerfordummies.blogspot.com">Blogger for Dummies</a></li>
<li><a href="http://blogger-book.com">Online Blogger Book</a></li>
<li><a href="http://blogger-faq.blogspot.com/">Blogger FAQ</a></li>
</ul>


That didn't work, so it must be the CSS (Cascading Style Sheets). So I went to LAYOUT > EDIT HTML and edited this

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

to

.sidebar ul {
list-style-type:disc;
margin:0 0 0;
padding:0 0 0;
}

I tried this at Star Home Improvements. The codes for the unordered list <ul> was placed in the first right sidebar. As you can see, the "bullets" didn't display.

Sunday, January 04, 2009

test stike and line through

test<span style="text-decoration:line-through;">line through</span>

line through

Note: below may still work but is deprecated (not encouraged), the above using inline CSS is preferred:

test <s> and </s>

strike