Changes to the Barecity Theme

So, I wanted to make some small changes to my theme, the Barecity Theme by Shahee Ilyas. I didn’t like how the content floated to the left and wanted it to be centered. So, this post is for anyone interested in customizing this theme or anyone who would like to learn about using JavaScript to change the height of an element to match that of its container.

My first change was easy to implement. To float the content to the center of the page, we just need to set auto on the left and right margins of the main wrapper (#rap) like so:

#rap { 
   background-color: #FFFFFF; 
   margin: auto; 
   padding: 6px; 

This will allow the browser to place the content in the center of the page and ‘auto’ format the margins (left and right, and top and bottom too!). Since we give no other arguments, the margins can expand and contract as the browser window is re-sized and the content will remain centered.

Now, this may suit most folks just fine. However, I found that as the sidebar didn’t expand all the way down the page and didn’t have a background color, my photos and content appeared offset to the left as the user scrolled down the page and the sidebar scrolled out of view. So, first things first – change the background color of the sidebar to a nice soft grey and while we are at it, get rid of the dotted border and give it some even padding all the way around its inside edges :)

#sidebar { 
   background: #fafafa; 
   /* border-left: 1px dotted #ccc; */ 
   padding: 10px; 
   float: right; 
   width: 144px; 

Nice, looks good. Now, what do we do about the fact that it doesn’t extend all the way to the bottom of the #rap element?

Bummer. It makes it our content look like it’s offset to the left when a user scrolls down the page. It would be nice if the #sidebar element matched the height of the #rap element… Wouldn’t it? This way, there would be a visual element there and the content would appear centered.

I never know why, but whenever I need to get a child element to match the height of its container in CSS, I find it next to impossible. In order for it to work, one must set a height on the parent element and then height: 100%; on the child element. This is not always practical as you probably just want to have that parent element expand and flow to the height as set by its contents. Enter jQuery’s innerHeight method!

It seems that other people have had this problem and while I find it kind of sad that we have to rely on JavaScript to perform this seemingly basic task, I’m happy it’s there all the same. innerHeight is perfectly suited to the task. It calculates the height of an element and returns that number (among other things). So, assuming you use jQuery on your site, you can insert the code anywhere after the elements that you want to examine and change in the DOM. Of course, you will be inserting this inside of <script> tags :)

$(window).load(function() { 
   // now kids, always listen to your parent element! 

We use $(window).load() as we want to make sure that images and other page elements such as frames and objects are not still loading and thus causing our parent container (in the case of the Barecity Theme, #rap) to expand in height. We would then get a wonky output from innerHeight making its calculation based on a number less than the containing elements final height (in pixels).

So, I inserted this into my footer.php:

$(window).load(function() { 

Sharp eyes will notice that -303 at the end. This is subtracting 303 pixels from the found height of #rap. Why am I doing this? There’s a lot of space at the top of #rap and this needs to be subtracted from the height of the #sidebar as the sidebar actually begins about 303 pixels further down the page. Otherwise, the bottom of the sidebar would be an extra 303 pixels too long. Make sense? Good!

I hope that somebody out there finds this useful. :)

One Comment

// Commenting is now closed on this article.

» 2748 days deep