Barecity: a minimalist and customizable WordPress theme
I’ve been tinkering with the Barecity theme that I’ve chosen for this blog. I was attracted to the simplicity of it, the minimalist elegance, the readability and the copious white space. I moved the sidebar up to the top, changed to a serif font for the posts while leaving the navigation as sans-serif, added a permalink at the bottom of each post, and made various other small adjustments. I was inspired by some other blogs that use the Barecity theme, including one called Pete Bakes. I was also somewhat inspired by the blog.txt theme. Some of the modifications I made to Barecity brought it closer to looking like blog.txt.
For a while, I was mystified that the search box title became serif when I changed the stylesheet for the main text, even though the rest of the side bar items remained sans-serif. I eventually tracked down the problem to the functions.php file. I mention it here in case anyone else is having similar problems.
Here is the section of code that was changed, after my changes.
// custom widgets
function widget_yes_search($args) {
extract($args);
?>
<?php echo $before_widget; ?>
<?php echo $before_title ?>
<?php _e('Search'); ?>
<?php echo $after_title; ?>
<form id="searchform" method="get" action="<?php
echo $_SERVER['PHP_SELF']; ?>">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<?php /*<input type="submit"
value="<?php _e('Search'); ?>" />*/?>
</div>
</form>
<?php echo $after_widget; ?>
<?php
} |
If you’d like to know more technical details about any of the modifications I’ve made to the Barecity theme, feel free to ask me.
Very interesting! Couple of questions, if you don’t mind:
1. How do you momve up the sidebar to the top of the page like you have now?
2. I’ve been trying to make the Widget titles bold. I figured out how to change the color, but for some reason, the widget titles stay normal, even if style.css says they should be “bolder”. Strangely, the Search widget seems to display the title as specified (it’s bolder), but not all the other widget titles.
thanks for your help and time
Hi Leachdog. I have some answers for you.
1. Bringing the sidebar up to the top of the page
To bring the sidebar up to the top of the page, you need to modify the header.php file and the footer.php file. You need to move this line of code:
from after the first div tag in the footer.php file to after the div tag with the id of “rap” in the header.php file.
The original footer.php file begins like:
After the change it should look like:
The original header.php file looks like this, starting at line 20:
After the change it should look like this, starting at line 20:
I’ve tweaked my page a little more than that, so that the sidebar doesn’t go quite all the way to the top. What I did to achieve that was to adjust the margin in the CSS.
This is what the sidebar portion of the style.css file looked like before:
This is what the sidebar portion of the style.css file looks like now. (I also changed the colour of the border and adjusted the padding.)
2. Making the widget titles in the sidebar bold.
I figured out how to make the widget titles bold, but first let’s look at what seems like it should work, but doesn’t work.
Before I made the fix that I describe in the main post, the Search title responded to a different part of the CSS than the other titles. It was becoming serif with the main text instead of sans-serif like the other items. This confused me until I figured it out. I imagine a similar thing is happening when you attempt to make the font bold.
Indeed, I reproduced the effect you mention by adding a bold font weight to the sidebar ul portion of the stylesheet.
I’m not sure if that’s what you did, but that’s how I got similar results. The search title became bold, the others didn’t.
What you need to do instead is change the tags that the functions.php file inserts before and after the widget titles to create a division and a class just for the titles.
First modify lines 6 and 7 of the functions.php file so that they look like:
Then, make a section for the class in the stylesheet. This is where you will make the widget titles bold, or change their color, or whatever else you want to do with them.
That will make all of the widget titles except for the search title bold. Then, if you make the fix I describe in the main post, the Search one will match too.
An alternate way to fix this, instead of changing the functions.php file, is to set the sidebar ul li portion of the stylesheet to bold and the sidebar ul ul li portion to normal.
Those sections would then look like:
and
This alternate fix changes most of the widgets successfully. However, if like me you are using the tag cloud widget, or another widget that stays in the sidebar ul li portion of the stylesheet, then that widget will stay bold in its entirety.
That’s why I recommend adding a special class for widget titles to the functions.php file and stylesheet instead.
I hope this helps you.
Hi Ellen,
I was wondering if you could help me with two question, that I have concerning the theme.
1. Seeing, that you changed your favicon makes me blush as everytime I try to replace the default favicon with a self generated one, the old one reproduces itself. Even upon deleting the favicon.ico in my ftp folder, the old favicon still seems to work in the browser. Any ideas on that problem?
2.How did you delete the inverted comma below the slogan/header?
Thanks for your time and help!
Jen
Hi Jen,
1. Changing the Favicon
This step was simple when I did it. I deleted the one that came with the Barecity theme and uploaded my own, using the same filename favicon.ico, to the Barecity theme folder.
I wonder if you have actually successfully changed it, but your browser has a copy of the old one cached. Have you deleted your browser’s temporary and long term caches? Have you looked at the site from a different browser or computer?
Depending on your browser, you can sometimes hold the SHIFT key and click on the Reload button with the mouse, and it will reload the page completely without relying on the cache. It’s a quick way to check, but if it doesn’t work, not definitive. It’s better to clear the browser cache manually, since the shift-reload won’t necessarily update all of the elements in the page if they are coming from different sites.
2. Deleting the inverted comma below the slogan/header
I assume you mean the one that looks like this: »
I got rid of it by deleting
from the header.php file in this section.
I wish you success, and I hope this helps.
Hi Ellen,
Everything here has been a huge help–thanks!
I do have two questions for you:
1) I’m trying to expand the width of the sidebar (because my page titles are long) yet every time I do the main content seems to relocate to the bottom of the page. I know I’m missing another step here and I was wondering if you knew what that was.
2) I’d like to change the font size of the ‘Search’ bar but can’t find what exactly to edit.
Thanks so much for your help.
Hi Louis,
1) The sidebar exists in a relationship with other CSS layers. If you do a search for “width” within the style.css file, you will find the other places where width is set. A few of them are relevant to this situation.
There is one called rap that sets the total width of the page content and sidebar together. Mine is currently set for 700 pixels.
Then there are the content and the headwrap layers. Mine are currently set for 500 pixels.
Finally there is the sidebar, which I currently have set for 144 pixels.
The content and sidebar layers, including margins and paddings, have to fit within the width of the rap layer. If you increase the size of the sidebar, you either have to make the rap width bigger, or the content width smaller. Otherwise, the browser will try to overlap the layers, and fail, and I think this is why your content is ending up at the bottom.
The headwrap layer is for the header above the content, so if you change the width of the content layer, you most likely want to change the headwrap layer as well in order to make everything line up.
2) If you want to make the text of the Search bar look like the other widgets, the best way to do that is to make the changes to the functions.php and style.css files that I mentioned above in the original post and in the comment about making the widget titles in the sidebar bold.
If you want to tweak the Search bar to look different from the other widgets, then you have to make a new CSS class in the style.css file, and assign it to that CSS class in the functions.php file.
The key lines in the functions.php file are
And,
If you don’t want it to be in the class widget_title, which I created to adjust the widget titles in the sidebar, then make up a new class name, add that class name to the CSS file and assign it the attributes you want.
I wish you success at tweaking the look of your blog.