Setting up the Antisocial Woo Theme on this blog

January 26 2 Comments Category: Actual, Code, Web Design, Wordpress

I like WooThemes. I recently made a purchase over there and have been trying out the 3 pack of themes I got as a result. They are really great looking themes and look very nice in the demo. Unfortunately, when actually putting content in them and getting the themes up and working, there tend to be these small, odd and very annoying problems.

Of the three issues I’ve dealt with, the real problems are because the themes’ CSS tends to be ‘leaky’ for lack of a better word. I want certain elements to look normal, or at least decent. Elements like tables or the RSS widget on this site. But when I actually start manipulating the widgets and content the CSS from other parts of the site overlaps with the part I’m playing with and it just looks awful.

The two problems I encountered with this theme (so far) are:

  • The CSS eliminated any styling for unordered lists in the widgets making the RSS widget unreadable.
  • The calendar widget has a huge table footer space and, for some reason, when not the top widget adds large amounts of spacing above and below the useful widget content.

The RSS widget was a mere styling issue but figuring out what the incorrect styling was from caused me problems, I had gone through every variation of li and ul before I figured out that the spacing problems were actually being caused by line-height styling applied to the links… which was just odd.

The Calendar widget has a much bigger issue, one which I didn’t really solve. For some reason, the code is generating a huge block of empty spaces underneath the table. I was able to fix the nasty margin code, but I looked through the PHP for the plugin and I can’t figure out what the hell is causing it. Instead I settled for a nasty hack and applied an absolute height to the surrounding box.

If anyone else encounters the same issues using this theme and wants to use my CSS fix, here it is:


.widget_rss ul li
{
height:auto!important;
background:none!important;
padding-bottom: 12px;

}

.widget_rss ul li a:link, .widget_rss ul li a:visited
{
line-height:120% !important;
}

.rss-date
{

margin-bottom: 4px!important;
display:block!important;
right: 0!important;
width: 100%!important;
text-align: right!important;
border-bottom: 1px #000 solid;

}

#calendar-3
{

margin-top: 6px!important;
margin-bottom: 0px!important;
height: 280px!important;

}

I also really didn’t like that the theme apparently required me to use the Antisocial text on the side. I wanted to change it, but with only a PNG file for the logo, I needed to figure out what font to use, so it would look similar.

I rotated the logo image and put it against a black background. Then I ran it through WhatTheFont. The top 6 most likely fonts they used (since I don’t want to buy the damn PSD files to find out) seem to be.

If you happen to recognize the font, or want to try altering the image yourself and trying WhatMyFont or another website, please tell me what results you end up getting. I’m going to play around with what fonts I can get my hands on and see how it looks.

2 Responses

Write a comment
  1. AramZS – thank you for finding the code to fix it, but I’m a relative novice and would like more direction. I posted the code in the CSS under widgets section, but I have no idea how to activate a corresponding widget for it. There is one RSS widget that comes with the theme, but it is for bringing content into the site. Ideas?