Tag Archives: xhtml

google reader css

Like many people I use Google Reader, and like many people I share stories that I find particularly interesting with my friends on reader. However when redesigning my blog I wanted a way to incorporate reader into it. I looked at various wordpress plug-ins that could get the job done, but none seemed to fit my needs precisely right.

I finally found what I was looking for at Google Reader itself, via their add a clip feature (you can find this link by clicking on in the left side navigation area). When you use google reader they give you everything you could ask for, title, color scheme, number of shared items to post and whether or not to post item sources. You can find google reader stylized for my site, in my sidebar (as of this writing).

All of this is wonderful except for one minor thing, google provides no assistance at all when it comes to the option of no color scheme. That means no xhtml source to examine or css source. You could get around that with firefox’s view selection source feature, however if you don’t have firefox this provides no help at all.

It is with that in mind that I am writing this post, below is sample xhtml source code, that I will explain after the code is posted.


<div id="readerpublishermodule0" class="reader-publisher-module">
<h3>robert’s shared items</h3>
<ul>
<li>
<a class="i" title="Happy Birthday, iMac" href="#">Happy Birthday, iMac</a>
<div class="s">
from <a href="#">The Unofficial Apple Weblog (TUAW)</a>
</div>
</li>
<li>
<a class="i" title="Happy Birthday, iMac" href="#">Happy Birthday, iMac</a>
<div class="s">
from <a href="#">The Unofficial Apple Weblog (TUAW)</a>
</div>
</li>
<li>
<a class="i" title="Happy Birthday, iMac" href="#">Happy Birthday, iMac</a>
<div class="s">
from <a href="#">The Unofficial Apple Weblog (TUAW)</a>
</div>
</li>
<li>
<a class="i" title="Happy Birthday, iMac" href="#">Happy Birthday, iMac</a>
<div class="s">
from <a href="#">The Unofficial Apple Weblog (TUAW)</a>
</div>
</li>
<li>
<a class="i" title="Happy Birthday, iMac" href="#">Happy Birthday, iMac</a>
<div class="s">
from <a href="#">The Unofficial Apple Weblog (TUAW)</a>
</div>
</li>
</ul>
<div class="f">
<a href="#">Read more…</a>
</div>
</div>

The primary container for the shared items is a selector named “reader-publisher-module”, it contains everything provided by google reader. The header provided by google is contained in a h3 element inside of the main container. Each headline link and source link is contained inside of a list element inside of the main container as well. The headline link is held inside this list item in a selector with the name “i”. The source is held inside this list element in a container named “s”. The read more link is contained inside of a selector named “f” inside of the main container.

Listed below is the css used in my current theme to make google reader appear appropriately, hopefully it can help you if you need it.


/* google reader from section */
.reader-publisher-module .s {
text-indent: 5px;
}


/* from link */
.reader-publisher-module .s a {
color: #660505;
text-decoration: none;
}


/* headline link */
.reader-publisher-module .i {
font-size: 10pt;
font-weight: bold;
line-height: 10pt;
text-decoration: none;
display: block;
}


/* google reader read more section */
.reader-publisher-module .f {
display: none;
}


.reader-publisher-module .f a {
}

This information was hard for me to find, so hopefully listing it here will help someone, if you need any further assistance post a comment, and I will see what I do do.

fixing iLindsay’s tumblr

This post is going to be actually something I have never done before, and I don’t know if I will ever do again. It’s a post meant for one, as it’s code to fix their tumblr. If you don’t know what a tumblr is get one, it’s a wonderful service. This is basically just css, however I did slice out some code from the original page (page breaks for example) and replaced it with css where applicable.

I will try to provide some description so that if you want to read on it will be of some use to you, however I will be addressing Lindsay directly in this post, so don’t be mad at me if I call you Lindsay, I assure you it’s nothing personal.

Before continuing Lindsay I would highly recomend you somehow back up your code, as who knows I could make an error or you could make an error and I don’t want you to ruin what already is working just in case.

Anyways Lindsay the code snippet you will see below is css that should be able to be added at the end of your existing css without causing any issues for your existing page. The “twitter_div” id selector simply takes the enclosing div and adds that graphic to it as a background image, it also seperates it from the marquee above, as well as spacing it out the inner ul from the background image so your tweet does not cover up the background image in any way.

The “twitter_update_list” is listed with “header” before it to overwrite the inherited css from the previous “header ul” declaration. Chiefly this declaration affects the tweet’s appearance, however it also removes padding and margins from the previous declaration as well.

The “twitter_update_list a” id is simply used to take the time stamp link and place it on it’s own line below the tweet itself.


/* div that contains entire tweet */
#twitter_div {background-image: url(http://img71.imageshack.us/img71/4161/birdnu1.png); background-repeat: no-repeat; margin-top: 10px; padding-left: 35px;}


/* contains just tweet */
#header #twitter_update_list {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; letter-spacing: 0px; line-height: 110%; font-weight: normal; color: #000000; text-transform: none; margin: 0px; padding: 0px;}


/* timestamp link */
#twitter_update_list a {display: block;}

Lastly here is the code as I edited it, going from the closing marquee tag to the ending div for the header container. The only major change I made was removing the line breaks from the presenation as it was replaced with a margin declaration in the css.


</marquee>
<!-- Your Twitter code starts here -->
<div id="twitter_div">
<ul id="twitter_update_list"></ul></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/9131132.json?callback=twitterCallback2&count=1"></script>
<!-- Your Twitter code ends here -->
</div>


<ul>
<li><a href="/mobile">Mobile</a></li>
<li><a href="/archive">Archive</a></li>
<li><a href="http://ilindsay.tumblr.com/rss">RSS</a></li>
<li><a href="/random">Random</a></li>
</ul>
</div>

I really hope this all went fine for you, if not you know where to find me.

Good Luck Lindsay.

standards compliant video player

In the last few years I have gone from bein an extreme amateur when it comes to html and css, building a site built on table based layouts to someone who fancies himself an xhtml and css standards geek who is sometimes recruited by friends to write code or fix code they have problems with. When I say standards geek, I mean extreme geek, in fact my new site I am coding as XHTML strict which can be extremely hard to conform to but I will make it so.

With that said, nothing annoys me more on the net than going to youtube, revver, vimeo, jumpcut, etc, etc, and not getting standards based code. Now I understand why they give me this code, its for legacy purposes but that is no good to me, in the world of firefox, opera, and safari we can finally abandon poorly done broken code for fully compliant standards based clean markup, heck it is even possible in internet explorer 7. The only drawback being that due to the quirks of the past this fully compliant code will in fact break in legacy browsers.

With all that said converting old broken legacy code into clean markup is extraordinarily simple, heck I was able to handle it after maybe 15 minutes and if theres two things I don’t know as well as I would like in XHTML its this and forms. That however is purely do to lack of experience, and nothing to do with knowledge or skill and the same can be said for anyone into standards who might be a little intimidated/inexperienced with certain markup.

First let’s take a look at the code below which is provided by the fine folks over at comedy central.

<embed FlashVars=’videoId=148027′ src=’http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml’ quality=’high’ bgcolor=’#cccccc’ width=’332′ height=’316′ name=’comedy_central_player’ align=’middle’ allowScriptAccess=’always’ allownetworking=’external’ type=’application/x-shockwave-flash’ pluginspage=’http://www.macromedia.com/go/getflashplayer’></embed>

All of the code above is broken, well it will work, but its broken as far as standards. The embed tag has been deprecated and if you want to strive for standards it must be abandoned, thats not to say the code can not be utilized, reworked, and turned into standards compliant code all while still appearing and working the same as the original. So working left to right through the above code we can methodically build the new code, the first step is using the object tag, where the embed tag is a relic of the past the object tag is a tag of today and tomorrow (it even replaces the img tag in xhtml 2).

First of all wrap your code inside of an opening and closing object tag, the way I start my code to maintain its integrity is to always begin with the opening and closing tags. The next piece of our code is the FlashVars element, which is used to identify the particular video that comedy central is serving up, it can not be placed as an element of the object tag but it can be used inside of the object tag in the form of a param tag. An empty param tag has 3 elements, the tag title, in this case param, the name element, and the value element. So at this point your code that does nothing would look like this.

<object>
<param name=”” value=””/>
</object>

Now back to the FlashVars element, and this can be used for any element that needs to go into a param tag, everything to the left of the equal sign goes into the name tag and everything inside of the quotes goes into the value tag.

The next element is the src tag and it has a distinction of needing to be both a param and an element of the object tag, it doesn’t have to be but I have noticed the tag is more portable (at least in my experiences) when this is redundant (it seems to help ie7). The src tag and the address inside of it remains the same in every way when used inside of the object tag with only one change, it is now data and not src. Now for the param portion, the name portion of the tag is movie and the value is simply the address used inside of the embed tag. So now your code should look like this:

<object data=”http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml” >
<param name=”movie” value=”http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml”/>
</pbject>

The remaining tags can all be thrown inside of param tags except for type and name which can be simply thrown into the object tag with data, I usually leave out the pluginspage element just because, and I usually change the bgcolor width and height elements out for a css rule which means I then have to add in a css hook which in this case I would name something like comedycentralplayer, or whatever you would like. For the purposes of this post however I will add both the selector name and inline css style and as such the finished compliant code will look like the following.

<object type=”application/x-shockwave-flash” class=”comedycentralplayer” style=”background-color: #cccccc; width: 332px; height: 316px;” data=”http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml” name=”comedy_central_player”>
<param name=”movie” value=”http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml”/>
<param name=”FlashVars” value=”videoId=148027″/>
<param name=”quality” value=”high”/>
<param name=”allowScriptAccess” value=”always”/>
<param name=”allownetworking” value=”external”/>
</object>

Like I said before though this code will break in old browsers so I would think you should add something known to any good xhtml coder, and that is alt text. But if you look at the code above you will say there is no space for alt tags, and you would be right of course in that there is no explicitly stated alt element, but there is a place for it. If you had just empty object tags everything that was placed inside of them that was not wrapped in a param tag would be non printing text when the object worked, but when it did not it would work the same as alt text or noscript text, alerting the user that what is supposed to be there, is not there after all. So with that in mind your code would look something like this, except you might want to make it appear all on one line, otherwise the code could behave strangely in some environments:

<object type=”application/x-shockwave-flash” class=”comedycentralplayer” style=”background-color: #cccccc; width: 332px; height: 316px;” data=”http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml” name=”comedy_central_player”>
<param name=”movie” value=”http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml”/>
<param name=”FlashVars” value=”videoId=148027″/>
<param name=”quality” value=”high”/>
<param name=”allowScriptAccess” value=”always”/>
<param name=”allownetworking” value=”external”/>
If you’re seeing this something obviously broke, it could be your browser or you may lack the appropriate plug in, I can’t say but if you were running <a href=”http://www.getfirefox.com”>firefox</a>, with an up to date <a href=”www.adobe.com/products/flashplayer/”>flash player</a> I know you wouldn’t have this problem, if you are seeing this still though I bet it’s a problem with the video’s host and not myself, thanks.
</object>

Your finished code would in turn allow for a fully standards compliant version of the original broken code playable in any standards compliant browser as you can see below (provided comedy central doesn’t move their player).

If you’re seeing this something obviously broke, it could be your browser or you may lack the appropriate plug in, I can’t say but if you were running , with an up to date flash player I know you wouldn’t have this problem, if you are seeing this still though I bet it’s a problem with the video’s host and not myself, thanks.