Neutica is a lightweight, two (five?) column, widgetized, Wordpress theme designed completely with CSS, sans image graphics. The design is based on the sometimes overly popular yet classic font: Helvetica Neue. Neutica is ideal for mini-magazine publishing or standard blog publishing. This was built with Sandbox — a valid XHTML / CSS selector rich Wordpress environment. Neutica was developed for WordPress 2.5+, but it should also work in 2.3.+. It has been tested mostly in Safari and Firefox but it should also maintain its look in IE 6 and IE 7 outside of a few font discrepancies.
Demo
Check out a live demo of Neutica here.
Screenshots
Check out a few screenshots.
Download
PLEASE READ THIS before you download Neutica: This theme does not cost you a dime. All I ask is that you please keep a link back to allancole.com/wordpress as it requires in the license below. Also, if you have questions about Wordpress please visit the WordPress Documentation or Support Forums. If you find bugs, I will try my best to help you with them. Just leave a comment below or email me. Unfortunately, I won’t be able to help you customize this theme but I am open to suggestions for features that you may want to see in future updates.
Download Neutica Theme 1.0.9
Updated to version 1.0.9 which fixes the colors.php CSS issue.
I will be updating this theme from time to time so subscribe to the feed to stay up to date.
Features
- The Neutica theme admin has options to alter the default colors of this theme.
- This theme was built entirely with CSS which mean there are no heavy theme images to slow down your site.
- For users who have the full version of the font: Helvetica Neue installed and activated on their machines, the headers and sub headers will display in HEAVY, BLACK and LIGHT weights, giving the theme an even cleaner look.
- I have tweaked the original Sandbox theme to suit the needs of this design, however much of the power of sandbox is left in tact. Follow this link to find out more.
Installation
To install, open the Neutica Theme folder and upload the contents of the plugins folder to your wordpress/wp-content/plugins directory. Upload the neutica folder to your wordpress/wp-content/themes folder. Then open your Wordpress Admin, activate the plugins under the Plugins tab, and select the Neutica theme under the Design tab (or Presentation tab in versions prior to Wordpress 2.5).
Modifications
There is only a few minor and optional changes that you can make to this theme.
- Featured Posts – This theme requires a category called Feature to operate correctly. The theme will then pull the latest post in that category and load it into the Feature section of the homepage.
- Post Images – Almost all of the images in this theme are loaded automaticaly. There are no Custom Field Keys/Values to worry about. Neutica will automatically grab the latest uploaded image attachment and use its thumbnail for the archive and home pages. Same goes for the Feature posts except it grabs the full resolution image for the background. Just make sure that you go to SETTINGS > MISCELLANEOUS and set the thumbnail size to 185px x 185px. That’s it.
- Tabbed Sidebar – The content in the Tabbed sidebar can be changed to whatever you like. In later versions, i will try to widgetize the tabs themselves, but for now it has to be done manually by editting the sidebar.php. The Tabbed content has its own widget section called “Tabbed Sidebar”. To get rid of the Tabbed Sidebar, just add a widget to it and it will replace the tabs.
Plugins
Neutica uses 1 simple plugin, which is included in the download. It is highly recommended, but not necessarily required.
- WP-Typogrify (included) — Helps to make web type conform to printed type standards.
Future Versions
The one update I plan on doing will implement a better way to manage the Tabbed Area so that you don’t have to dig into the code. As usual I am always open to suggestions or help with improvements. Let me know your thoughts in the comments section.
License
Neutica is Copyright © 2008 by Allan Cole. It is released under the GNU General Public License, version 3, as published by the Free Software Foundation. Basically you can do whatever you like with this theme. I only ask that you please give credit where credit is due by providing a link back to my site: http://www.allancole.com/wordpress.
This theme is offered ‘as is’ so I don’t support theme customization but I will gladly help you with any bugs that you may find. Just leave a comment about it below.
ENJOY.
427 Comments
WORD!
Really dig what you did here.
Trying it on my music project blog.
Also peepsed your Algorhythm page!
Sick. Keep at keeping at…
Hi
I noticed on your test page you have an image as a banner and wondered how you’d achieved this as we’d like one too.
Thanks very much
THANKS MAXIME!
Your site isn’t too shabby either!
I skimed through some of your mixes: PRETTY DOPE!
Hi Claire,
Thanks for checking out Mixtape. The banner image is actually pulled from a featured post.
Here’s how you do it:
Featured Posts – This theme requires a category called ‘Feature’ to operate correctly. The theme will then pull the latest post in that category and load it into the Feature section of the homepage.
Ripping my hair out on this. Trying to include the 1 Pixel Audio Player on Neutica on my site. On both Posts and Pages it somehow ends up in the middle of the page for no reason.
Is there some weird padding going on? Tried everything.
Any ideas?
Using it here:
http://poussez.co.uk/disco
Sorted.
Nevermind.
:)
I really like this! What I’d be intrigued to try to do is integrate the ‘random header’ feature of the Cutline theme. I would like to be able to manually define the main header image in Neutica rather than it always take the most recent image upload. It would be even better to be able to define a handful of header images that would be selected randomly.
see: thebikeshow.net
Do you think it would be relatively easy to adapt in this way?
Hey Jack,
The simplest way will involve editing some of the php in home.php. Check out this post for a quick and easy way to pull random header images into the home page.
Thanks, Alan, that looks do-able.
The only other thing that’s holding me back is that when I tested Neutica, the thumbnails that appear on the front page are mostly squashing or stretching the images, rather than cropping them to the 185×185 size. I’ve been into SETTINGS > MISCELLANEOUS and set the thumbnail size to 185px x 185px and ticked the ‘crop thumbnails’ option.
Could it be because I’m transfering existing posts into Neutica than starting something from scratch? I imagine that Wordpress doesn’t rederive all the thumbnail files. Can there be any workaround that doesn’t involve going through every image and rederiving it to the required size?
tkank you
thank you
thank you
for this wonderful theme!
I’m just dispoointed about the fact that this theme doesn’t work on PC ( at least, not well)and in my country (France) almost everybody is on PC.. fortunately I use MAC!
Have a good day!
(sorry for my English…)
Thanks Anaïs!
In my opnion ALL sites look better on Macs. They have a much more powerful font rendering engine. Glad you liked Neutica regardless!
Hey Jack,
You are right. If you are redesigning an older site with Neutica, then your older thumbnails will be forced anto the 185×185px size. The coding for this definitely geared for brand new Wordpress installations. I don’t think there are any Wordpress specific fixes for this but your best bet might be to grab the medium size images from your server and run some type of automated resize script. If I figure out a better way I will surely clue you in.
Hi Alan. Thanks for this amazing theme!
I would like some help though! I’m a total novice. I’ve just about managed to get the colours adjusted to my liking – pretty much through trial and error – but a few points are really killing me!
A.) Can I replace the blog title with a banner image!? Not the part of the featured post, but to replace the big lettering of the blog title? If so… where do I edit this in?
B.) Where do you upload images to for them to be pulled into featured posts?
Thanks again, hopefully you can save me!
Jim,
Thanks for checking out Neutica!
A.) You will need to familiarize yourself with some basic XHTML and CSS coding to edit the header like you described. A basic google search should point you in the right direction.
B.) Use the Image Upload button to upload full size images to your posts. Then select the FEATURE category and publish the post. The latest uploaded image is automatically uploaded as the background image for featured posts on the homepage.
Hope that helps.
Hi Allan
I am having trouble the editing the colors using your handy theme options.
Am I doing anything wrong? Are their set only certain Hex tags that work?
-Doug
Hi, Just a small thank you for this great team seemed right at this moment!
Cheers
Maths
Hi Doug,
A few people have reported color editing problems. Any Hex code should work but I think it has something to do with the version of PHP that your server is running. I have been running into dead ends on fixes for this but it is something that I am continually looking into. In the meantime you can open up colors.css and make your color changes manually. Hope that helps.
Hi Allan,
I was reading the comment Claire left about the image banner and read your instructions on how to achieve this but I still can’t get it working. Can you explain a little more please?
Many thanks
sorry Allan, I just read the reply to gave to Jim. I will try it just now :)
Allan — Thanks for the theme. One of the frustrations I have with WordPress and WordPress themes is that often pages look like just another wordpress blog. I think this and Mixtape are pretty exciting, visually.
Since some people are asking about how to make random image banners, here’s the idea I used and maybe we can collectively comment on how to make it better or more efficient. (I’m a total novice and have never looked at css before today)
First off, I followed the directions found here:
http://ma.tt/scripts/randomimage/
In /wp-content/themes/neutica/img/ I created a file called /headers and saved the .php file from ma.tt as “randomheader.php.” With this php file in your directory, it will randomly pull the images from the directory whenever you call on the file. We can use this location like we would use an image file.
Now we make a change to layout.css, which can be found in /wp-content/themes/neutica/css/. Using what I found at
http://www.solostream.com/2007/10/09/how-to-add-a-header-image-to-the-simplicity-wordpress-theme/
I found this original snippet of code:
/* Header
------------------------ */
#header{margin:0px; padding:0px; position:relative;display:block;}
#header h1 a .hide{visibility:hidden}
#header h1 a{display:block; width:600px; margin:10px 50px 0 0; padding:0; float:left}
#blog-description{float:left; height:30px; width:285px; display:block; margin:30px 15px 0px 0px; padding:0px 0px 0px 0px}
and then I added
background: url(/wp-content/themes/neutica/img/headers/randomheader.php) top left no-repeat; height: 175px;
like so:
/* Header
------------------------ */
#header{margin:0px; padding:0px; position:relative;display:block;}
#header h1 a .hide{visibility:hidden}
#header h1 a{display:block; width:600px; margin:10px 50px 0 0; padding:0; background: url(/wp-content/themes/neutica/img/headers/randomheader.php) top left no-repeat; height: 175px; float:left}
#blog-description{float:left; height:30px; width:285px; display:block; margin:30px 15px 0px 0px; padding:0px 0px 0px 0px}
Remember to put the height in there too — I chose 175px for my project. The width in that header h1 line is originally 600, but can be stretched as far as 650.
You should now have the random image header that you want. I only have three images for this test (i’m still playing with layout and design on this blog)
You can keep the blog title on the image or remove it, I’ll bet. I haven’t yet. I also bet you can change the font color too.
Unfortunately for me, this creates a large block of white space on the top left corner. I would like to stretch this banner image from corner to corner, but it moves the sidebar to the bottom of the page. If anyone has ideas, I’d be glad to know.
To everyone who has been asking about adding a header image, here is how I would go about doing it. There are tons of different ways to pull this off but I think this is should be rather simple. You’ll need to add something like this to your style.css:
@ import "css/type.css" ;/* Insert CSS here */
#header {width:950px;height:200px;background: #FFF url('url/of/background-image.jpg') top left no-repeat;border-bottom: red solid 5px;}
#header h1 {font-size:12px;visibility:hidden;border:none;}
#header h1 a {visibility:visible;border:none;width:950px;height:200px;}
#header h1 a .hide {visibility:hidden;}
#header #blog-description {visibility:hidden;}
/* Wordpress 2.5+ Image Styles
------------------------------------------ */
(Your image should be the exact size of the header by the way — in this case 950px x 200px.)
Optionally, you could also hide the title of your site by adding a span tag around the Title in your header.php.
Example:
< h1 >< a >< span class="hide" >Your Title< /span >< /a >< /h1 >Couple this with Ma.tt and Matt’s suggestions above and you should have a nice random image heading for your blog/site.
I haven’t actually had the time test this header code out but it should do the trick. If it breaks something, just let me know in the comments.
Again, Thanks everyone for checking out Neutica!
Dear Allan,
I must admit that I’ve tried you method of adding the line of code into style.css but it did break the whole page.
*/
@import "css/reset.css";
@import "css/layout.css";
@import "css/colors.css";
@import "css/type.css" ; /* Insert CSS here */ #header {width:600px;height:200px;background: #FFF url('/wp-content/uploads/jpheader3title.png') top left no-repeat;border-bottom: red solid 5px;} #header h1 {font-size:12px;visibility:hidden;border:none;} #header h1 a {visibility:visible;border:none;width:600px;height:200px;} #header h1 a .hide {visibility:hidden;} #header #blog-description {visibility:hidden;}
/* Wordpress 2.5+ Image Styles
------------------------------------------ */
Any ideas? Did I do anything wrong?
Thank you for you help!
Kindly,
Paul.
It seems I just had to copy and work on this in layout.css instead of style.css to sort it out.
Now, there’s one thing I cannot sort out. With the new piece of code, when I try to reinstate the blog description, it appears in the header box, not on the top left as it is standard on a non-modified Neutica.
I’ve tried various options to put it back there, but I guess my notions of CSS must be limited, for I cannot seem to find the answer.
Thank you and once more kudos for a magnificent theme.
Just wanted to give a big thanks for this theme! It’s great and a real breath of fresh air.
Quick question. Me and my partner have been looking for the exact location to change the colour of the background. We changed the hex code in the colors.php for the yellow into the code for white – and nothing seems to have changed. We must be missing something! It had also changed by itself in themefunctions.php as well. Any suggestions would be great!
Thanks again
Hey Dan,
This post kind of explains the issue.
If you are familiar with CSS at all, your best bet is to edit the colors.css file manually. The colors.php file; which normally overrides the colors.css file, doesn’t appear to work with your server’s version of PHP.
Hope that helps!
Thanks for checking out Neutica! Glad you like it.
Thanks for the quick response Allan! I wasn’t sure if that particular reply would be the reason for us.
One last question. Being new to wordpress, we were wondering if there was a specific way to control the size of the post on the main page. It keeps cutting off the post at about 35 – 40 words or so. Is there a way to edit this on a post-by-post basis?
Thanks again for all the help!
Hey Dan,
No problem.
The theme is set up to show only 40 words on the home page archive, and search pages. While you can adjust the number of words shown, there is no way to do this on a per post basis.
To adjust the number of words, you will need to adjust the number in this line of code on all of the archive, search, and category theme files:
< ?php the_content_rss('', TRUE, '', 40); ?>24 Trackbacks
[...] vieler Spielerei setze ich nun das Neutica Theme von Allan Cole ein. Warum, wieso, [...]
[...] the theme, i chose neutica, designed by allan cole and based on sandbox. it’s flexible, easily configurable, and [...]
[...] that’s my reasoning for starting over with Wordpress. The current theme that I am using is called Neutica by Allan Cole. It’s a typographic theme focusing on white space or in this case yellow space and [...]
[...] Release Page [...]
[...] next theme I tried (currently in use as of this posting) was Allan Cole’s Neutica, also a simple, typograph-driven design. After some tweaking to suit my needs, I was fairly happy [...]
[...] Anleitung, Download und Website des Themes | Demo-Website [...]
[...] here is a new design for Automotif, a Sandbox Wordpress theme, slightly altered, called NEUTICA by Allan Cole. [...]
[...] So I decided to go for a very simple and sober new theme in order to ensure a good user experience on eNik based on a heavily tweaked neutica theme. [...]
[...] Neutica is a simple and clean Wordpress theme based around Sandbox. It celebrates the much-used and oft-oversued Helvetica Neue type aesthetic. Check it out. [...]
[...] Neutica [...]
[...] Neutica [...]
[...] Neutica [...]
[...] Neutica – is a lightweight, two (five?) column, widgetized, Wordpress theme designed completely with [...]
[...] Neutica [...]
[...] Neutica [...]
[...] Neutica [...]
[...] View Demo 7. Neutica [...]
[...] Neutica [...]
[...] All content is © let me see | WordPress 2.8.4 | Sandbox | Neutica [...]
[...] ????????? ????? theme ???? neutica? ??????????????? ?? Background ??????? Theme [...]
[...] Cole. Han är ett geni vad gäller att skapa teman för Wordpress. Tidigare skapelser innefattar Neutica, AutoFocus och Mixtape men nu har Allan alltså släppt sitt första betaltema. Det heter Neutica+ [...]
[...] CMS is Wordpress en het basis-thema is Neutica. [...]
[...] WordPress Theme – Neutica [...]
[...] was to take care of the ol’ blog. I started with replacing the Mandigo theme with the simpler Nautica which I came across a [...]