<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>From the Blog of Paul S Patterson &#187; Style</title>
	<atom:link href="http://www.paulspatterson.com/tag/style/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.paulspatterson.com</link>
	<description>Throwing a wrench into the cogs of life.</description>
	<lastBuildDate>Thu, 23 May 2013 16:31:37 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.1</generator>
		<item>
		<title>Kijiji Tip: Style Your Advertisement</title>
		<link>http://www.paulspatterson.com/kijiji-tip-style-your-advertisement/</link>
		<comments>http://www.paulspatterson.com/kijiji-tip-style-your-advertisement/#comments</comments>
		<pubDate>Mon, 13 Dec 2010 16:33:23 +0000</pubDate>
		<dc:creator>Paul</dc:creator>
				<category><![CDATA[Kijiji]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Style]]></category>

		<guid isPermaLink="false">http://www.paulspatterson.com/?p=170</guid>
		<description><![CDATA[Ever wonder how to add some style to an otherwise bland looking advertisement on Kijjij? Me too!Most of the advertisements I see on Kijiji are typically one to two paragraphs of plain looking text. Plain text ads that are short and sweet may seem appropriate for getting a simple message out there, but of you ...]]></description>
				<content:encoded><![CDATA[<p>Ever wonder how to add some style to an otherwise bland looking advertisement on Kijjij? Me too!<span id="more-170"></span>Most of the advertisements I see on Kijiji are typically one to two paragraphs of plain looking text. Plain text ads that are short and sweet may seem appropriate for getting a simple message out there, but of you rely on sites like Kijiji to bring in an income, then your advertisements need to have more of an impact.<span class="frame alignright"><img src="http://www.paulspatterson.com/wp-content/uploads/2010/12/KijijiLogoSmall.gif" title="" alt="" /></span></p>
<p>Yes, placing an advertisement on Kijiji is free, but that shouldn&#8217;t restrict you from trying to craft something that will stand out more than the next person&#8217;s ad. With a little creativity you can apply some styling to your advertisement to give you that valuable credibility and trust factor.</p>
<p>Here&#8217;s an example of a much cleaner looking advertisement using some simple formatting and styling techniques&#8230;</p>
<div id="attachment_201" class="wp-caption aligncenter" style="width: 572px"><a href="http://www.paulspatterson.com/wp-content/uploads/2010/12/TipKijijiStyleAd2.png"><img class="size-full wp-image-201" title="TipKijijiStyleAd2" src="http://www.paulspatterson.com/wp-content/uploads/2010/12/TipKijijiStyleAd2.png" alt="One of my &quot;styled&quot; Kijiji advertisements" width="562" height="461" /></a><p class="wp-caption-text">One of my &quot;styled&quot; Kijiji advertisements</p></div>
<p>Here are some simple tips and tricks that allow you to add some style to your Kijiji advertisement.</p>
<h2>HTML and CSS Overview</h2>
<p>Kijiji is a free online advertisement posting website. The terms and conditions of using Kijiji require users to follow some very strict guidelines when using the site and posting ads. As a free service, it is expected that users abide by those terms.</p>
<p>One of those constraints is the restriction of not allowing HTML (Hyper Text Mark-up Language) tags to be used. HTML is what is used by web browsers to render content to your screen. It is the crafting of HTML that provides the look and feel of what you see when you visit a web site. The Kijiji web application enforces these constraints by restricting the text that you enter as advertisement content posted using the online editor; which includes stripping out anything that looks like HTML code.</p>
<p>For example, HTML code that looks like this,</p>
<div class="fancy-box gradient-box"><p><span style="font-family: Consolas, Monaco, 'Courier New', Courier, monospace; line-height: 18px; font-size: 12px; white-space: pre;">The price is &lt;Font color=blue&gt;&lt;strong&gt;$9.95&lt;/strong&gt;</span></p></div>
<pre style="text-align: left;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px; white-space: normal; font-size: 13px;">would look like this in your browser,</span></pre>
<div class="fancy-box gradient-box"><p>The price is <span style="color: #0000ff;"><strong>$9.95</strong></span></p></div>
<p>If you tried to enter and post this into a Kijiji advertisement, the Kijiji application would strip out the HTML, and save the advertisement as plain text, without the bold and blue coloured price.</p>
<p>Fortunately, Kijiji does not strip out <em>all </em>HTML formatting tags. Kijiji allows for some fundamental tags that allow us to craft some basic formatting such as paragraphing. As such, we can leverage the allowed tags to perform some additional work to customize our content.</p>
<p>Enter CSS (Cascading Style Sheet), the technology used to style HTML content. I won&#8217;t get into CSS here because it is a HUGE topic &#8211; just do a search on &#8220;What is CSS?&#8221; in Google and you&#8217;ll see for yourself. But what I will show you is some fundamental CSS usage that can get you started on stylizing your content.</p>
<h2>Stylizing Content</h2>
<p>Let&#8217;s start by looking at the example I used earlier. I want to craft my advertisement to include a line that says, &#8220;The price is <span style="color: #0000ff;"><strong>$9.95</strong></span>&#8220;. This would include the bold and coloured font for the price.</p>
<p>The tag that I am going to start with is the HTML Paragraph tag, &#8220;&lt;p&gt;&#8221;. This will render my content into a new paragraph on the browser. Here is what the HTML code for this will look like&#8230;</p>
<div class="fancy-box gradient-box"><p><span style="font-family: Consolas, Monaco, 'Courier New', Courier, monospace; line-height: 18px; font-size: 12px; white-space: pre;">&lt;p&gt;The price is $9.95&lt;/p&gt;</span></p></div>
<p>Note that when using HTML, if you start a tag, you need to end it with the corresponding end tag with a slash. In the above example it is &#8220;&lt;/p&gt;&#8221;.</p>
<p>Let&#8217;s say I now want to add some style to all of this text. To do this, I add some CSS markup to my paragraph tag. Like this&#8230;</p>
<div class="note-box">The code examples that follow are too wide to fit on the post, so I indicate a documented line break with a <span style="color: #ff0000;"><strong>&amp;_</strong></span> indicator. If you copy and past the code, remove the indicator.</div>
<div class="fancy-box gradient-box"><p></p>
<pre style="padding-left: 30px;">&lt;p style="margin: 0; padding: 0; font-size: 14pt; font-weight: normal; <span style="color: #ff99cc;">&amp;_</span>
color: #444444; line-height: 22px; text-align: justify;"&gt; <span style="color: #ff99cc;">&amp;_</span>
The price is $9.95&lt;/p&gt;</pre>
<p></p></div>
<p>See the &#8220;style&#8221; attribute I added to the paragraph tag? This is what this would look like now in a browser&#8230;</p>
<div class="fancy-box gradient-box"><p><span style="line-height: 22px; font-size: 19px; color: #444444;">The price is $9.95</span></p></div>
<p>You can see in the above how the font size and color are now stylized because of the css styling I applied. Kijiji will let you get away with some CSS styling, but not all. I haven&#8217;t had time to check into the limits of styling that can be done, but I am trying to push the limits each time I place an ad.</p>
<p>Now I want to add some separate styling to the price. To do this, I use a couple of other allowed HTML tags and combine them with some more CSS.</p>
<p>Here is what is done to bold the price using the HTML &#8220;Strong&#8221; tag&#8230;</p>
<div class="fancy-box gradient-box"><p></p>
<pre style="padding-left: 30px;">&lt;p style="margin: 0; padding: 0; font-size: 14pt; font-weight: normal; <span style="color: #ff99cc;">&amp;_</span>
color: #444444; line-height: 22px; text-align: justify;"&gt;The price is <span style="color: #ff99cc;">&amp;_</span>
&lt;<span style="color: #339966;"><strong>strong</strong></span>&gt;$9.95&lt;<span style="color: #339966;"><strong>/strong</strong></span>&gt;&lt;/p&gt;</pre>
<p></p></div>
<p>So, now in the browser it should look like this&#8230;</p>
<div class="fancy-box gradient-box"><p></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; font-size: 14pt; font-weight: normal; color: #444444; line-height: 22px; text-align: justify; padding-left: 30px; margin: 0px;">The price is <strong>$9.95</strong></p>
<p></p></div>
<p>Next I want to add some colour to  the price, so I make use the &#8220;Span&#8221; HTML tag.</p>
<div class="fancy-box gradient-box"><p></p>
<pre style="padding-left: 30px;">&lt;p style="margin: 0; padding: 0; font-size: 14pt; font-weight: normal; <span style="color: #ff99cc;">&amp;_</span>
color: #444444; line-height: 22px; text-align: justify;"&gt;The price is <span style="color: #ff99cc;">&amp;_</span>
&lt;span style="margin: 0; margin-top: 5px; padding: 0; font-size: 19pt; <span style="color: #ff99cc;">&amp;_</span>
font-weight: normal; color: #434343; line-height: 22px; text-align:<span style="color: #ff99cc;"> &amp;_</span>
justify;"&gt;$9.95&lt;/span&gt;&lt;/p&gt;</pre>
<p></p></div>
<p>Here is what the above coding would look like in the browser.</p>
<div class="fancy-box gradient-box"><p><span style="line-height: 22px; font-size: 19px; color: #444444;">The price is <span style="margin: 0; margin-top: 5px; padding: 0; font-size: 19pt; font-weight: bold; color: blue; line-height: 22px; text-align: justify;">$9.95</span></span></p></div>
<p>Note how I replaced the &#8220;Strong&#8221; tag with a &#8220;font-weight&#8221; attribute in the CSS styling within the Span tag.</p>
<h2>Now Go For It!</h2>
<p>So, with this little bit of HTML and CSS knowledge, you should be able to craft up a pretty slick looking Kijiji advertisement.</p>
<p>Let me know how it turns out for you. I would love to see some of your examples.</p>
<p>Cheers,</p>
<p>Paul</p>
]]></content:encoded>
			<wfw:commentRss>http://www.paulspatterson.com/kijiji-tip-style-your-advertisement/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
