SweetCron: Customizing the Boxy Theme

There are great resources for customizing [SweetCron] themes on the [google SweetCron wiki] but they assume you know what you're doing under the hood as far as the programming goes.

Because SweetCron is still pretty new, there aren't a lot of free (or paid, for that matter) customized themes and plugins available for download. Plus, there are a lot of feeds out there!

You'll want these two pages from the wiki on [themes] and [API] references.


There are two main files you need to edit in your theme for directory (system/application/views/themes/yourtheme). I copied the boxy theme as a base and renamed the directory to something else. That way if I messed up I could get the fresh copy again.

Anyway, the files are _activity_feed.php and main.css.

Add support for a new feed
Add the desired RSS feed in SweetCron using the GUI. I'm using my google reader shared items as an example. Now, when I look at my lifestream, items from that feed have their own box but say something like, "I don't know what to do with this but I see it."

After that, I opened up the _activity_feed.php to tell SweetCron to make it show up in my lifestream correctly.

Near the top of the text is a note for "domain specific boxes" and this does what it sounds like it would.

So if we want to create a box for google shared items, we add

<?php elseif ($item->get_feed_domain() == 'google.com'): ?>
<div class="inner_container">
<p><a href="<?php echo $item->get_permalink()?>/<?php echo $item->get_name()?>"><?php echo $item->get_title()?></a></p>
</div>


I guess the first couple lines tell it what it's looking for and where to put it, but don't quote me on that.

I don't know the specifics, but see how the third line starts out with a paragraph tag and a hyperlink tag? That's basically what it is. The <?php echo $item->get_permalink()?>/<?php echo $item->get_name()?> sort of gets the url of the item, so it's really like <a href="urlgeneratedbythatstuff.com">. All the <?php echo $item->get_title()?> is doing here is telling it what title to put in between the hyperlink tags.

There are other things you can do using the list of things in the [API] reference page.

What if you want more than just the title? Blog posts and google shared items might have some text you'd like to have previewed in your boxes. To add preview text, do this:


<?php elseif ($item->get_feed_domain() == 'google.com'): ?>
<div class="inner_container">
<p><a href="<?php echo $item->get_permalink()?>/<?php echo $item->get_name()?>"><?php echo $item->get_title()?></a></p>
<p><?php echo word_limiter(strip_tags($item->get_content()), 30)?></p>
</div>


That new line tells it to go find the content of the item and display it. The numeral 30 is how many words you want to preview and you can change that.

There are lots of other things you can do like find and display images, video, and tags but they all follow a similar-ish procedure.

Some basic visual customization
If you work with CSS a lot, great. You probably don't need to read this. If not, here's what I did to change the link colors and background of my boxes and add that attractive dotted line between post titles and content. Other than that it's all really normal editing to control how the page looks.

New link colors and sizes within the boxes
This needs to go in the section of main.css called "Typography," near the top of the text. If you get to positioning, you've gone to far. Go back up.


p.original_link a:hover, p.activity_image_text a:hover, li.item.google_com div.item_inner a:hover {
text-decoration: underline; color: #236B8E; font-size: 16px;
}

p.original_link a, p.activity_image_text a, li.item.google_com div.item_inner a {
text-decoration: none; color: #236B8E; font-size: 16px;
}


a is the link color and a:hover is the hover color. text-decoration here tells it to only display the underline during hover.

New box backgrounds
Upload your new background image to system/application/views/themes/yourtheme/images.

Find the section in main.css called "Per-Domain Styling." Add this:


ul#activity_list li.item.google_com div.item_inner {

background: url(images/googback.jpg) bottom center no-repeat;
}


where the image it pulls is the one you want.

Adding a dotted line to boxes that also pull content
Somewhere in "Per-Domain Styling" you can add this:


li.item.google_com div.item_inner a {
border: 1px solid #7698b7;
border-style: none none dotted none;
display: block;
padding-bottom: 5px;
margin-bottom: 5px;
}


You can adjust the type of line (I like the dotted one), the color, the size, and some other stuff about the container.