Styling the 23 badge
Allrighty, based on the previous post and the lack of documentation on how to go about cooking your own css for the 23 badge, here are a few guidelines.
Firstly, there are two ways of approaching the styling; the non-styled version of the badge will produce aa very slim potion of html whereas the styled version (either horizontal or vertical) is <table>’d. Depending on your styling needs choose the one for you…
Let’s start with some examples of the html output — first, the non-styled version:
<div id="photos23">
<a id="prev23" style="display: none;" href="javascript:jump(-numberOfPhotos);">«</a>
<span id="display23content-1">
<a href="http://www.23hq.com/user/photo/2075" target="23hq">
<img src="http://www.23hq.com/user/photo/2075/quad100" border="0">
</a>
</span>
<span id="display23content-2">
<a href="http://www.23hq.com/usern/photo/2073" target="23hq">
<img src="http://www.23hq.com/user/photo/2073/quad100" border="0">
</a>
</span>
(...)
<a id="next23" href="javascript:jump(numberOfPhotos);">»</a>
<a href="http://dev.23people.net/steffen">See all my photos</a>
</div>
And then, the styled version:
<table id="photos23" style="(...)">
<tbody>
<tr>
<td rowspan="2" align="left" width="15">
<a id="prev23"
style="font-size: 18pt; text-decoration: none; display: none;"
href="javascript:jump(-numberOfPhotos);">
«
</a>
</td>
<td align="center">
<span id="display23content-1">
<a href="http://www.23hq.com/user/photo/2075" target="23hq">
<img src="http://www.23hq.com/user/photo/2075/quad100" border="0">
</a>
</span>
</td>
<td rowspan="2" align="right" width="15">
<a id="next23"
style="font-size: 18pt; text-decoration: none;"
href="javascript:jump(numberOfPhotos);">
»
</a>
</td>
</tr>
<tr>
<td align="center">
<span id="display23content-2">
<a href="http://www.23hq.com/user/photo/2073" target="23hq">
<img src="http://www.23hq.com/user/photo/2073/quad100" border="0">
</a>
</span>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<a href="http://www.23hq.com/user">See all my photos</a>
</td>
</tr>
</tbody>
</table>
For now, let’s content ourselves with handling the non-styled version, which is could be done by using these selectors in a stylesheet:
/* Entire box of the 23 badge */
#photos23 {}
/* All links, both image and other */
#photos23 a {}
/* Previous and Next links */
#photos a#prev23, #photos a#next23 {}
/* Bounding box around all images */
#photos23 span
/* All photos */
#photos23 span a img
So for example, if you’d want to…
a) Scale the photos to 280px in width
b) Make the prev/next links very large and non-underlined
c) Make the ‘See all my photos’ link very small and orange.
d) Place a fat green border around the photos when moving the move over. and..
e) Place the navigation links somewhat nicely around the first image.
.. do like this:
<style type="text/css">
#photos23 {
width:330px;
}
#photos23 a {
color:orange;
font-size: 10px;
display:block;
}
#photos23 a#prev23, #photos23 a#next23 {
color:blue;
font-size:22px;
text-decoration:none;
}
#photos23 a#prev23 {
float:left;
margin-left:-45px;
margin-top:40px;;
}
#photos23 a#next23 {
float:right;
margin-left:30px;
margin-top:40px;;
}
#photos23 span a img {
width:280px;
border:3px solid white;
}
#photos23 span a:hover img {
border:3px solid green;
}
</style>
Well, let’s try it out:
#photos23 {
width:330px;
}
#photos23 a {
color:orange;
font-size: 10px;
display:block;
}
#photos23 a#prev23, #photos23 a#next23 {
color:blue;
font-size:22px;
text-decoration:none;
}
#photos23 a#prev23 {
float:left;
margin-left:-45px;
margin-top:40px;;
}
#photos23 a#next23 {
float:right;
margin-left:30px;
margin-top:40px;;
}
#photos23 span a img {
width:280px;
border:3px solid white;
}
#photos23 span a:hover img {
border:3px solid green;
}
display23['linkToAccount'] = 1;
display23['size'] = ’standard’;
display23['layout'] = ‘nonstyled’;
display23['photoinfoTaken'] = 0;
display23['photoinfoTags'] = 0;
display23['photoinfoAlbums'] = 0;
display23['photoinfoWords'] = 0;
writePhotos(3);
We’d love to hear from people with a bit more imagination who have given this a go — either if you have tweaked the styled script a bit (as jens has) or given it the entire css 23 garden touch-up.
Other people include: