The following article was originally written at Cory’s Weblog. For more articles like this either read Cory’s articles here at DevLounge or visit his personal site.
If you haven’t figured it out already, any element of k2 can be modified. As long as you know some basic PHP and CSS, and know where to look, you can modify anything to make it your very own. In this tutorial, I am going to discuss the modification of FlickrRSS and some different ideas to make your FlickrRSS plugin stand out.
If you search your style.css file for Flickr, you will come up with some code that looks like this:
[css]
/*-
FlickrRSS
*/
.sb-flickr div img {
border: 0px;
padding: 5px;
}
.sb-flickr div a img {
border: 1px solid #ccc;
padding: 3px;
margin: 5px 3px 0;
}
.sb-flickr div a:hover img {
border: 1px solid #999;
}
[/css]
This is the block of code that covers the entire flickrRSS plugin. For the first modification idea, we are going to try and get 10 images displayed without taking up anymore space than the size of 2 default images.
To do this, we are going to add the following code under .sb-flickr div img:
[css]
height: 32px;
width: 32px;
[/css]
That will make each image shrink down to 32×32 px. Then, when you go to your FlickrRSS options and set it to display 10 images, you will get 2 rows of 5 images at 32×32 px. Pretty sweet huh?
Now, for the second mod, you have probably seen those spiffy one column designs with the FlickrRSS at the bottom in a nice row spanning accross the entire footer. Have you ever wondered how you could make yours look like that? Well, read on.
Open your index.php file in the root of your k2 dir and place the following code between the PHP statement that calls up theloop.php and the /div tag.
[php]
[/php]
Now, since we have placed it where we want it to go, we need to style it. Add the following code to your CSS file.
[css]
.sb-flickr{ /* this was specific for my blog width – play with it */
margin-left: -14px;
width: 623px;
background: #d1f0ff;
text-align: center;
padding: 5px 0 5px 6px;
border-bottom: 1px solid #94dbfc;
border-top: 1px solid #94dbfc;
}
[/css]
There you go. Another fine example of how any element of k2 can be customized with a little PHP and CSS magic.
~Cory
