Random, Rotating Header Images
What was the first thing you noticed when you came to this site?
The sleek typography set to a 20px baseline grid? HA.
Naturally, you noticed the huge header image! Photographs are the most visually striking graphical elements of any design, and when you place them in a spacious environment that is free of clutter, they pack an unparalleled visual punch.
In addition to their general appeal, however, photographs also afford people the chance to be uniquely expressive. With the Neoclassical theme, you’ll be able to include as many images as you like in the random image rotator, all with brain-dead-simple customization.
Don’t hide your photography skills any longer! Show off your finest “crop” with the Neoclassical Theme for WordPress.
For the record, the default header images are 865px wide by 180px tall, and for seamless integration, you’ll want to use the same size images for your rotating headers.
189 comments
Awesome stuff Chris. I’ll have it set up this evening. Another killer project. Much thanks Chris.
HI: I downloaded your wordpress theme which is now a .zip file on my desktop. I’m still learning my way around CSS although I do know the basics.
My question is: Where do I extract my files TO when I unzip the download? I can’t seem to find an appropriate destination, and my WordPress blog is only accessible when my browser is open. So I am unsure how to get the downloaded theme from my desktop to actual integration with my blog.
Thanks in advance for any advice,
Caile~
It really looks great, Chris. Good to see you back at it. Now I will have to decide if I want to switch from CopyBlogger to this one.
Looks like the middle column is a little shy of supporting the typical 468px Ad format … I have glanced at the code and suppose I could do a workaround on it, but I know you specifically allowed for 468px in CopyBlogger so thought I would instead ask why you decided to move away from it. Is it your sense that a small ad on the sidebar is more effective? (I have almost come to that conclusion myself, but have not finished testing.)
Very relaxing theme. Thanks!
Very cool!
I actually tried something similar in a modification of the Copyblogger theme, but I didn’t use it. I didn’t spend the appropriate amount of time making sure the two sidebars worked together properly.
This is a great idea and I love photographs. I’m sure there’s a lot of good photography resources that people could use, but I’d like to offer my photographs to people that would like to use them. They’re not high enough quality on my photoblog. However, if someone wanted one or a few in particular I could get the high res ones out for them, even crop them accordingly. A link back to me would not be necessary, but appreciated.
@kristarella, I really like what you have done with CopyBlogger on your site. Great customization work!
@Chris,
I am really toward switching to Neoclassical from CopyBlogger (though I like both), but need to know the max width of pictures in the content column. Looks like I’ll need to resize several of my pics as some are 450px width, some maybe a bit larger. In looking at the code, looks like 445px pictures would work, or do I need to subtract off the 9px padding, making it 436 (or 427 if I need to subtract twice)?
Thanks again for churning out another beautiful theme. Also thank you for arranging the php coding so neatly … will help me in making the few customizations I would want to do. Very easy to follow. (The CSS layout is beautiful, too, and pretty straightforward to understand even for a CSS-lightweight like me).
Regards,
Bruce
Very nice theme! I’m always a fan of your work.
Bruce — The usable content area of the theme is 425px wide, which is exactly wide enough to support the default size of a YouTube video embed.
I decided to make that the standard for the width instead of 468px, primarily because the 468×60 ad block is a historically poor performer. Ads that cascade vertically (rather than horizontally like the 468) tend to perform better, and because of the way this layout is constructed, I fully expect that to hold true for my users.
Also, regarding images, you need to know two things:
Caile — In order to upload the theme properly, you’ll need FTP access to your server.
Locate the root directory in which WordPress is installed, and then navigate like so:
Upload the entire neoclassical folder into the themes directory, and once you’ve done that, you will be able to select the Neoclassical Theme from the Presentation tab inside your WordPress dashboard.
Chris - thank you very much. Exactly the information I needed!
Okay..I’m on it. Leaving typepad for the bliss of Wordpress.
But here’s the thing…how do you put a graphic (.gif, .jpeg) on the left or right nav bar? I’m hacking my way through. LOVE your blog thank you!
Saundra — You can add content to either sidebar in one of two ways:
Option 1 is probably the most common practice for adding content of this nature to any Web site, and it’s the one I think you would probably benefit the most from learning.
@Chris, thank you for this lovely, beautifully coded theme.
@kristarella, terrific CopyBlogger customization.
Cheers.
Thanks for the wonderful theme. I’ve been a Cutline user, but NeoClassical outshines your previous creation.
I guessed 420px for the maximum image width when I resized my previously posted photos - not too far off. Thanks also for the update on image sizes. I also prefer the image classses in NeoClassical where “no frame” is the default.
I notice you’ve eliminated the Archives and Sitemap pages. My logs show that the Archives page was hardly ever accessed, and I use the Google Sitemap plugin for WordPress, so no loss there as far as I’m concerned. The default structure seems to favor individual posts and pages for SEO, and that’s really what I want search engines to index. I don’t want search engines pointing to an archives page (or a category page or a tag page). Is there anything else I can do to focus search results on full articles?
The only other glitch I’ve run into is that the pull-quote image is a tad too large for a one-line quote. Not a big deal and I can work around it. The theme looks great. Thanks again.
Mitch — I think you may have exposed a “bug” regarding the background images in pullquotes. The image is not supposed to display in that context, so I’ll have to go back through the stylesheet and ensure that all browsers suppress that image in pullquotes.
Regarding the Archives and Sitemap pages… Template files for each are included with the theme download; however, I did not include links to either page because I don’t them to be that useful, frankly. In fact, I have removed HTML sitemaps from most of my sites, and I would recommend that most folks do the same.
You mentioned the desire to have search engines place a priority on individual posts and pages, and I must say that you are certainly on the right SEO track with that kind of thinking. Problem is, managing the interlinking of your site is a very intensive process that requires manual link editing combined with extensive knowledge of your site.
This is a topic that I’ve been putting a lot of thought into lately, and I expect to post on it sometime in the near future.
Does this theme have wp tagging support?
Rhett — No, and I’m going to be talking about the reasons why later this week on Pearsonified.
In the meantime, suffice it to say that passing off link love to Technorati is a terrible long term strategy for your site. Also, consider that I own a medium sized celebrity Web site, and I’ve never received more than 500 hits in a day from Technorati search tags. On most days, I get fewer than 20 hits.
For my money, I’ll trade in those 20 hits, conserve my link love, and watch my growth occur in the search engines over time because I’ve done a better job retaining the value of each link on my site.
I was wondering if you were going to say something to that affect. I look forward to your thoughts.
Chris
I again applaud you on a beautiful design. I am not going to be able to implement it in the near term, though. In looking over my previous image postings, many of them exceed the max width setting of this theme, and would not of sufficient quality if I reduced them (which would also be a tedious process, even if effective). I may work on a wider center column version later, though.
In addition to its beauty, the coding is fantastic. I have been looking it over and am learning bits and pieces from it. I think once I do migrate to it, I will nofollow the pagination links, somewhat at odds with the way Mitch is doing and possibly at odds with your thoughts (which is why I am writing: to get your thoughts). I do retain an archives page in the CopyBlogger design and think that categories are an excellent way for search engines to index one’s site. So, I have lately been thinking that nofollowing the pagination links would keep the SEs from following a duplicate path to my articles, in fact a path that I prefer they not follow. (I don’t have any readers who just set and click through one page after another … they do click on the categories that interest them, though.) I know of a popular site that is experimenting with this (I wish I knew how to conduct such an experiment myself).
Thoughts?
Thanks for your compliments Bruce and Susan.
Chris - I look forward to your thoughts on tags. I didn’t really consider them to have that much to do with Technorati anymore, but to be another level of organisation for your site.
Chris,
This theme rocks. Do you require that the footer remains exactly as you have it with a link to openeducation.net . I’d rather link directly to your site (pearsonified.com). The openeducation site expresses some opinions that I don’t fully believe and although I certainly agree with their right to state it, I don’t want the “Support OpenEducation.net” to imply that I endorse them.
If you could please give any additional acceptable footers I would appreciate it. If this is a sponsored theme and you require the link to remain the same, I appreciate that also, but I will have to use a different theme.
You do amazing work.
Thanks,
Mark
Bruce — Optimal linking structures are a hot topic right now, and I am personally just beginning to wrap my head around “best practices” in this arena.
When I first put this theme together, I used nofollows fairly liberally in an attempt to make any manually-added home page links as “juiced” as possible. However, after reading this excellent article and thinking about my personal experience with my own sites, I realize that I may have gone a tiny bit too far with the use of nofollows.
If I were to change things up now, I would probably remove nofollows on the home page link in the header for all pages except the home page itself. Other than that, I would keep things mostly as they are now. Unfortunately, this is about as much as I can do for you (or anyone else) as a theme designer, simply because I can’t control your linking for you on an ongoing basis.
Honestly, the only linking convention that I can say negatively affected any of my sites is the use of category links on the home page. I think people simply don’t realize the importance of the home page in terms of an overall linking strategy, and because of WordPress (and blogging in general) conventions, people end up slapping category links, tags, del.icio.us links, and all sorts of other stuff all over their home pages.
Archive links, category links, tags, blogrolls, and all that other hoo-rah belong on sub pages and not on the home page itself. Why blow link juice on secondary site pages? Why not use the home page to only direct people to the best stuff you have to offer?
Chris
Thanks for thinking through this with me. It is something I am only starting to struggle with, and I suspect my site has been held back a while from all of the time I had categories listed on the Home page. I am still undecided regarding the pagination issue, but I am not at the crisis point with it. I will try to research it more and I sure appreciate you providing the above link. While I really shouldn’t being spending the money in my retirement, I do spend the almost $50/month to be a premium of SEOmoz and wish I had been doing it longer … there is SO much to learn, and I am so behind the curve on it.
I really respect your thinking, and your incredible designs. Thank you for sharing your thinking with us.
kristarella — Ok, so I took a closer look at WordPress tags, and I have two primary thoughts on these babies.
Alright, so with my little rant out of the way, I’m happy to detail what I think is the only acceptable use of tags (and categories, for that matter).
Categories should be used to organize types of content—not by subject, mind you, but in terms of the actual “type” of content (posts, asides, feature articles, news blurbs, etc.).
Tags should be used in the same manner that people have misused categories for the last few years, but perhaps a little more sparingly (what good are 347 tags on your site?). Also, I don’t think the tags should necessarily ever be displayed, but as a Webmaster, grouping content in this manner gives you more options for how you can display things to users.
The bottom line is that micromanaging your content via tags (or categories, or whatever) is something that probably has very little long term benefit. Then, to make matters worse, you’ll have to worry about dealing with all those tags if you ever decide to change content management systems or make sweeping changes to your site.
Less is more. Scrap the tags.
Chris,
I was using the wrong login. Problem solved. Thanks
Chris, i’ve download neoclassical, n try to tweak it by my own style. I’d like to know, how should i set my feed? I use feedburner, but seems like it wasn’t connect to my wordpress (note: i place my feed in the sidebar). Thanks before, n if i put a footer text “design by chris pearson”, is it ok?!
Regards,
Hnings
Hnings — In order to properly redirect your WordPress feeds through Feedburner, you will need to make simple modifications to the following theme files:
In header.php, look for the following <link> tag, which appears between the <head> tags:
You’ll want to change the href attribute of that <link> tag to the URL of your Feedburner feed.
In sidebar.php, you will need to make a similar change, except this time, you will be changing the href attribute of the anchor tag surrounding the RSS icon img tag.
Oh, and your footer is fine
Dear Chris,
This is truly an excellent theme, optimized for both visual and SEO clarity. Congratulations on the design!
Unfortunately, I’ve run into a problem. Up until installing Neoclassical, I’ve been using WP-Cache with Copyblogger to speed up my page loading times. However, since installing this new, awesome theme, I’ve had to disable the WP-Cache plugin to get the header to rotate on refresh.
So, here’s my question.
How do you cache your pages while still allowing the header to rotate? If it’s any matter, I’m using Dreamhost.
Sincerely,
Kevin Chiu
Kevin — I’m pretty sure there is a way to force certain parts of a PHP script to run every time a page is called, but I have absolutely no idea how to do that within the context of WordPress and the WP-Cache plugin.
I actually run WP-Cache on Pearsonified, and as a result, I’m completely familiar with the problem you describe. To combat this issue, I simply turn off WP-Cache most of the time, and I’ll only flick the switch if I know I’m going to be receiving a ton of traffic (Digg, del.icio.us, etc.).
In a perfect world, you could just leave the cache on all the time, but in all honesty, there’s no compelling reason for people like you or me to run it on our sites most of the time.
And really, because your site is already so light in terms of bandwidth-hogging elements like images and whatnot, speed should be the least of your concerns… In fact, if your site got any faster, it’d simply load telepathically without the need of a browser.
Oh, and Dreamhost is an absolute dog—that might be why you think your site is slow. If you have anything below a dedicated box with them, their service is just crap. I have worked with many a Dreamhost server, and I can’t stress enough how much I think their low end products stink.
If you’re ever in the market for a new Web host, check out AN Hosting—they’re running a shared server special right now for only $4.95 a month. Oh, and the real clincher here is that you can run unlimited domains off that account, which is unheard of at that price.
Sorry for being an idiot, and thanks in advance for help.
If I am using the management function w/in Wordpress and add a new page, do I have to edit the PHP files in order to have the page appear in the Navigation area.
Great Design Chris!
I’ve made the feed work though i have to work hard coz i knew nothing about html. Thanks alot!
So I took a look at the Pages that I created and I figured out the following:
1. When creating pages from WP-admin, the pages are created with a page_id= # for example page_id=3
but the navigation.php is setup with relative names like “about”
should I adjust the links in the navigation file or is there a better way to manage the pages created?
Thanks Again.
Shane
Excellent theme, as usual. Great job. I’ve already used it (without any modification except for the header images). Thank you.
Very relaxing theme. Thanks!
how do I switch the images out with my own?
Thank you.
Chris - Thanks for your thoughts about tags and categories. I think I have a lot to read and think about in terms of SEO and usability. I have been trying to make things as usable as possible. Perhaps an archive page is the place for categories, not the sidebar. Then I also need to decide on permalinks, at the moment they are year/month/title. The other appealing alternative is categories/title, but then if you change the category style you’re a bit stuffed. Joy, another holiday project! I just need to stop distracting myself before I get to the holidays!
Shane - You need to figure out whether you want to keep the default links for you site or change them to use words instead of numbers. See the WordPress docs for info about that. Then you can either change the links of your site (permalinks) or the links in the navigation.
Chris - thinking a bit more about categories after what you wrote.
Do you think you’re going to be changing the way you categorise posts? Do you think that this kind of thinking will affect many others? Perhaps this is the way things are going with premium and feature-style themes? Do you think organising things in such a way would be confusing for readers or will it be easy because they can just use the search box?
Let me know if you want to move this discussion, since it doesn’t have anything to do with rotating headers!
ok I figured out how to change images……
now how do I delete the border from around the header image?
I really the look of the theme but I have the same reservations with this as I did with Cutline: I just don’t want to use (and don’t have) images that shape. There are so many great images to use that don’t fit the long and low requirements of the blog header. Don’t get me wrong, I can crop an image without any difficulties. But I don’t always want to. I often think putting the blog title on, say, the left, and an image on the, say, the right, would be a better use of the space.
Liking this theme a lot and using it on a new blog. These comments have been extremely helpful too.
Shane — Implementing a permalink structure that is semantically sound is definitely something that you will want to do right away. With the advent of WordPress 2.3+, you no longer have to worry about the myriad issues that can arise as a result of changing your permalink structure, so now there is no reason why you wouldn’t make this move right away.
For help on changing your permalinks, you can check out this video that I made, or you can try to decipher the WordPress codex page that Kristarella linked up for you.
If you switch to the permalink structure outlined in the video, all your theme links will work without requiring any additional modification.
kristarella — I definitely think that the archives page is the place where categories and monthly archive links need to go. It is flat out senseless to waste your home page link juice on generalized archive pages, mostly because those pages will never be as helpful to users as individual post pages.
As far as permalinks go, just use the custom structure, and specify the following: /%postname%/. I would leave out all the other data, including the year, month, etc.
Unfortunately, I think most WordPress users are going to be significantly affected by this paradigm shift with regard to handling categories. At the same time, though, I doubt very seriously that most folks will modify the way they do things.
Eventually, those who put a serious amount of thought into the way their content is organized will begin to realize that this is a robust form of futureproofing Web sites. Overuse of archive pages, categories, and tags creates a page bloat (on any site), and this makes it harder for search engines to determine which links and pages are truly important.
Ultimately, the best way to manage sidebar content throughout your site is to implement a semi-automated system that involves the use of categories. For instance, you can mark certain posts as “popular,” and then you can output the contents of that category to the sidebar.
It’s a little more work than simply outputting general categories and archives to the sidebar, but you are essentially cutting out the middle man and conserving link juice at the same time by linking directly to the highest quality pages of your site.
The bottom line is that you want to get rid of as many fluff pages as possible, and knocking out those general categories and archives is a great place to start.
randell — If you’d like to remove the border around your rotating header images, you’ll need to locate your custom.css file and add the following code to it:
.custom #rotating_image img { margin: 0 auto; border: none; }Chris,
I’ve been ’shopping’ for a theme for a while, and neoclassical is top notch, thanks for creating it.
I’ve recently moved from Blogger to wordpress and I’m looking to expand my blog to include additional sections. I had a couple of questions about theme customization and was hoping you can point me out to the right direction.
1) How can I switch to a horizontal navigation below the banner?
2) Is there an easy way to move the feed icon to the side bar and customize to feedburner?
3) What wordpress plugins should I definitely install on this new theme?
4) I assume that the image customization is explained in the other post, so I’ll save that question
By the way, I got you your blog through Brian Gardner’s blog - he gives you a lot of credit and you deserve every ounce of it.
Thanks for the theme.
Eze
Simon T — Because people’s site titles (and descriptions) tend to be so different, I can’t place the rotating image to the side of the title. A setup like that would create too many uncertainties with regard to vertical spacing and horizontal “cramping.”
One hallmark of my themes (and an area that I absolutely emphasize) is their ability to be applied in ubiquity. Every layout decision that you see is essentially the result of me asking the question, “Will this work in context X?”
There are tons of situations where the layout you’ve suggested would be extremely messy and unpredictable, and as a result, I went with a different structure.
Designing for ubiquity is my passion, and unfortunately, that means I’m going to have a hard time appealing to everyone. Despite that, I’m confident that no other themes are better equipped to accommodate a wider array of users.
Even though that’s the case with Neoclassical, you can certainly put images in the header that have a different aspect ratio. The only issue is that if you get much bigger, the images will be absolutely huge and will probably take a while to load.
Eze — Hopefully you’ll find these answers at least somewhat helpful as you put your site together on WordPress:
Thank you for the quick reply Chriss. I’ll take a look at the links that you provided and luckily, I know *some* html and CSS so I’ll try to give it a shot - hopefully I don’t break anything.
Since I posted my questions, an couple additional question came to mind. I’d appreciate your thoughts on these, if your schedule allows.
1) My blog has been around for two years. Is there an archive page on neoclassical? The categories include archived posts, but I was wondering if there’s a date breakdown somewhere.
2) How can I determine the description that will be shown for search engines under the title link?
3) Is there an easy way to integrate an short ‘about’ section in the homepage with a picture of the author? basically, I’d like to have some kind of greeting in the home page (similar to the way blogger has it)
4) If I wanted to include a logo on the header, should I upload the image to my hosting service and link to it on the header file? Sorry if it’s an obvious question.
Thanks in advance Chris. Your blog and this theme are truly a resource.
Eze
Chris - thank you for the info.
I can’t for the life of me track down where to edit the post title font. Where is it found?
Thank you!
Chris, dude, awesome job on the theme. I”m just getting into WordPress and love this theme.
I do have 1 question for you.
If I wanted to incorporate an AdSense add in the footer, what is the best way to accomplish that?
Chris, perhaps this comment is out of topic. What i found with your 5 themes (cutline, cutline 2, pressrow, copyblogger, neoclassical), seems like that each of that theme is a part of pearsonified. Sorry, if i made a mistake, i am not expert in design, programming etc. The best salutation is still for Pearsonified theme. Readable enough n far from ads
Great!
Anw, if i tweak the neoclassical into 2 column, is it ok? I thought 3 column is far from readable? The font is too small. But, if i could, i guess..
Regards,
Hnings
Hey Chris - I love the theme you used for “http://www.pearsonified.com/”
Is this theme available for use or download?
Chris, I’m new to WordPress and have spent a LOT of time in recent days checking out many, many themes. I wish I’d come across yours first. I think they’re the best! And your comments on use (abuse) of categories and tags have been most helpful.
I’ve run into one snag adopting NeoClassical. I want to customize the right sidebar a little, leaving the search form in the same position. But when I drag in Search from “Available Widgets” (together with others below it that I want), I end up with an ugly (presumably WP default) form.
How can I get your elegant NeoClassical style search form to appear? (I have learned enough html, php, and css to tweak here and there.)
sumnerg - I think that’s a good idea.
In sidebar.php take:
<li class="widget"><h2>Search This Site</h2>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>
and put it above the php dynamic sidebar call.
randell — If you want to change the font used in the post headlines, you’ll need to add a definition to the custom stylesheet:
.custom h1, .custom h2 { font-family: whatever fonts you want; }Also, the Pearsonified design is not available as a theme; although I may choose to make it into one if I ever decide to change the layout.
sumnerg — Apparently you don’t like the way I styled the widget search form
Unfortunately, the auto-generated code for the WordPress sidebar search widget does not follow the markup convention set forth in every other sidebar widget. One particularly negative side effect of this is that it leaves me with very few styling options for achieving a consistent look and behavior across the full range of modern browsers.
Sadly, the only real positive thing I can say here is that the WordPress search function is basically useless, and I generally recommend that people replace it with a Google Custom Search Engine (or something that is actually engineered for, you know, search). So in closing, your mom was wrong—you really can sweep some things under the rug.
Mark — You would need to add your AdSense code to the footer.php file.
Hnings — You are more than welcome to tweak the Neoclassical Theme to your liking; in fact, I particularly enjoy it when people put their own personal touches on themes.
Dear Chris,
This is a beautiful theme, but I am having the following problems:
My own header photos look lovely in Firefox, but don’t render at all in Safari; I only get the “Refresh for more” message. How can I fix this, please?
Also, how can I get my logo into the header, please?
Thank you very much.
AWESOME theme!
I just wanted it all my life!
I implement on my blog, thanks a lot!
I hope you imprement it a lot much, keeping this simplicity!
Waiting new versions…
Another thing, can u tell me where can I find wonderfull headers like this in your blog?
Thanks again!
Many thanks to kristarella for the simple solution to my problem, which was causing distress (and thoughts of resuming my search for a theme). To my eye that touch of WPDefault that crept in ruined Neoclassical, and anyway I’m not a fan of buttons cluttering up the design when the trusty old key works better. I like the search form fixed top right sidebar so the solution does the trick.
Chris, you might want to consider having that as the default (just as you have, I’ve discovered, for Navigation in the left sidebar) in any update to the theme. It’s obvious for those fluent in php but not, I assume, for a lot of users.
I’ve been disappointed that WordPress Search doesn’t look through static pages. I assume a Google Custom Search Engine would do that.
Is integrating a Google Custom Search Engine with Neoclassical style form (adjacent, I assume, to a Google icon) permissible and possible? If so, is it only a project for the pros or has the transition toward products that everyone can use (nice “About” page, BTW… and I second randell’s comments on the Pearsonified theme) already put this kind of project within reach of the rest of us?
sumnerg — The WordPress search widget is presented in the Neoclassical style by default, but it is not identical to the non-widget search box that is coded into sidebar.php by default.
One issue that may be causing confusion here is the slim possibility that I didn’t add that code to the stylesheet before you downloaded your version of the theme. You can check by opening your style.css file and searching for the phrase “search widget.” If you get a positive match, then your WordPress search widget will be styled by default.
Although my forthcoming premium themes will include support for Google Custom Search, this one likely will not. The primary reason for this is because there is a lot of facilitative work (instructional post, comment support, cross browser support) that I will have to do in order to make the GCSE function properly for everyone. Therefore, this is something that is best suited to a premium theme package.
Thank you Chris. That worked for the font size however I can’t get CSS to change the color of the post headlines. It is however changing the color of the sidebar headings. Here is the code I inserted into CSS:
.custom h1, .custom h2 {
font-family:
#FFF; color: #cc6600; font: 100% Georgia, “Times New Roman”, Times, serif;
}
The website is: scribbleship.com
Hey Chris,
Can you give me nice websites with this lovely headers?
Thanks a lot,
Thiago
randell, I was stumped by the same thing. I’m not fluent in CSS but after wrestling with the Neoclassical style.css I think I understand what’s going on:
1. h1 selects the “tagline” up top.
2. h2 selects both the post headings and the sidebar headings.
3. a , a:visited, and a:hover select all links. List items in the sidebar and post headings happen to be links, thus they are selected.
4. Any rule in custom.css with .custom in front of it “trumps” the rules in style.css.
5. Your rule applies a new style to both h1 and to h2, hence to the “tagline” up top, the sidebar headings, and the post headings.
This may be a little like the blind leading the blind (at least my eyesight in these matters is not so sharp), but the following eventually worked for me in custom.css:
.custom a, .custom a:visited { color: whateverIwant;} /*set color of all links */
.custom a: hover {color:redOrWhatever; text-decoration:underline;} /*to restore underlined hovers */
.custom h2 a, custom h2 a:visited { color: whateverIwant;} /* set the post headings color - doesn’t affect sidebar headings because they are not links */
.custom h2 a:hover {color: whateverIwant;} /* set the post headings hover if don’t want red there*/
This may not the “correct” way to do this, but it’s working for me. Good luck.
Frodo — Check out istockphoto.com for some killer stock photos that you can crop for use in your headers. Also, why did you remove the attribution link from the footer? At the very least, please replace it with a link to Pearsonified.
Chris, this theme is exceptionally useful. Thanks a lot. When will you begin releasing premium themes? I’m very interested.
I’m just starting to use Neoclassical for my new business, and I can strongly second your recommendation of istockphoto.com. 4 of the 5 photos I have in rotation are iStock pictures which I cropped and scaled to the Neoclassical header size. Note that if you do use iStock, you’ll usually have to buy medium sized versions or the width will be a bit too narrow.
I don’t know whether it’s inappropriate to link to my site here, but you may want to see how well the headers work: http://asiameridian.com/
Chris,
Thanks for the answer. I already put the link for here, but the footer… I can put the link in another place, for the education thing, not in the footer
And by the way, look at this link please, it’s about the CSS Validation, it gives 2 errors and I saw in the code it’s about Safari Hacks:
98 Unknown pseudo-element or pseudo-class :last-child
102 Unknown pseudo-element or pseudo-class :last-child
It’s possible fix it? Thanks a lot for the help!
Woot, I found a little bug on my last comment, look at the link I posted in Firefox Browser ^^
Regards,
Thiago
Another thing….
Sorry for the little flood but how can I put a bigger comment box?
Thanks again!
Thank you everyone for the help these last few days. Quick question: How do I change the small “by user name” in the post section underneath the post title? I would like to know how to change the color or delete it altogether. Right now it copies whatever post text color I input.
randell - If you have fixed you’re problem then you can ignore this… Which colour in the css are you trying to change? It doesn’t make sense to give font-family a colour (#FFF). I think sumnerg was right in point out the links (a), if you only changed the h1 and h2, but not h1 a and h2 a, then the header links wouldn’t have changed.
randell -
I think you can change the styling of the “by …” line with:
.custom .post_author { color: whateverYouWant; }
You can take it out entirely with:
.custom .post_author { display:none; }
But then you lose the spacing between it and the post text and have to add padding before the first paragraph only, which turned out to be beyond my grasp of CSS.
My quick and dirty solution instead has been to open the index.php and archive.php files, find the line in each referring to the author, and “comment out” (using the relevant code as follows:
<!–by –>
“by….” line gone and spacing preserved.
Hmmm. I guess you can’t type the code in directly to the message box. I’m trying it between /* and */ (which would obviously have to be removed.
/* <!–by –> */
Well, guess there doesn’t need to be a newbie alert here!
Here’s the code more or less, though dashes drop out for some reason when I hit submit. You may have to look up the php commenting code to be sure - it starts with less than sign followed by exclamation point followed by two dashes and ends with two dashes and a greater than sign. But if you make it double dashes where you see one here it should work.
<p class=”post_author”><!–<em>by </em><?php the_author(); ?>–></p>
thanks guys. its fixed now.
i have loaded the neoclassical theme as my blog theme and it only rotates through a half dozen or so of the photos i have loaded in the headers folder, any ideas on how i screwed up?
thanks
oops fixed my own problem… i updated the number of images to rotate in the header code…
thanks for a great theme!!
A great theme. A very small matter - the padding around the picture in a post (the “vertical” and “horizontal” space) works fine in IE7, but does not work in Firefox (totally surprising) nor in Safari for Windows.
Anyone have anything I can do on my end to help?
Thanks in advance.
Frodo — The two Safari hacks were necessary because of Safari’s unique (and strange) default rendering of <code> and <pre> elements. I believe I could probably work around this issue with a full CSS reset, but I haven’t experimented with it yet.
Scot — The hspace and vspace attributes that you’ve added to your image declarations are considered deprecated HTML, and I suppose that what you see is the result of both Firefox and Safari no longer supporting them.
Although I’m going to publish a post this week about how to handle images with Neoclassical, you can start implementing changes now by reading up on how to handle images with Copyblogger. This is another theme that I created, and the image classes are essentially identical to those found in Neoclassical.
By looking at your code, I think it’s clear that you’re accustomed to adding attributes to image tags in order to style them. Like the aforementioned hspace and vspace, styling images in this manner is considered a deprecated art. Instead, you are encouraged to use CSS classes to style your images, and that’s precisely what you’ll learn by following the link above.
Finally, if you still have concerns about how your images will be styled in feed readers, you can check out my tutorial on how to format images for feed readers.
DSS — Hopefully, this post on customizing header images will guide you down the right path!
Hi, was hoping I could download your theme as I like the idea of the rotating images and have some pix that can probably work, *but* your current zip file is corrupted(?) I have desperately tried various ways, but no go. Using Firefox 2.00.9 then 2.0.10 and various methods of download… Hope you can try to reupload your code.
Currently winzip howls, it does not like any of the header files as well as one of the php files.
Patrick — Creating universally accessible download files has always been a challenge with themes. With today’s release of version 1.1, I’ve created a completely new .zip file that should work for everybody.
Give the new one a shot and let me know if it works for ya!
Hi Chris,
thanks a lot for this fantastic theme!
I’m a complete newbie with regards to the customization of stylesheets. Is there any chance to easily enlarge the width of the middle column? I’d like to include a lot of images and photos to my posts. And therefore I assume, that the current dimension could be a litte too small for a proper experience.
For instance the Copyblogger 3 column layout is a litte bit wider in the middle part.
Do you think, it will breakt the proportions when enlarging the whole layout? What maximum size would you suggest?
Thanks a lot for your help.
Xaver
Xaver — Unfortunately, modifying the main column width will affect a slew of dimensions that are already defined in the stylesheet. I’m afraid that it’s not something I can explain in a reasonable space here, and typically, modifications of that nature are best left to the user (especially on a free theme).
That said, if you’re somewhat familiar with CSS, then you ought to be able to make fair use of custom.css without sacrificing the core code in style.css.
Oh, and with the size 13 font in the main column, I probably wouldn’t go with anything over 480 pixels wide because that would hinder readability. The current width is 425px, which is just large enough to accommodate a YouTube video embed.
Xaver - 425px images would probably be enough, if you decide they are and are concerned about previous images going into the sidebar you could try this css.
Chris,
Thanks for the schooling on CSS classes for photos in comment 100 - I’ve modified my pics and they render correctly.
The old HTTP attributes are put in there by my client program and uploaded to the site — rather than my complete inability to code anything! — so I’m going to take a look at how that is done and check out other clients.
Thanks so much for the help and the great comments and follow-through. I REALLY appreciate it.
Sorry — comment #79…now off to read how to get that right comment built into the comment in the first place!
Hi Chris, sorry my response is somewhat late, am now using your theme
Currently it is very much ‘as is’, when I have the time I will try and do something with a left hand side graphic element.
One thought, if I go through the calendar to retrieve an archive (i know most people don’t like this), the resulting page has all the text mangled just below the header bar, with some text actually inside the header area. This seems to be a Firefox problem, when using IE6 the page shows up OK. Has anybody else had this problem?
Thanks for the cool theme - now just got to find time to learn from it!
Patrick — I browsed your site, but I was unable to reproduce the behavior you described. Is everything fixed now?
Chris, left a few querries early today. found the answer to how to quickly take hi-res images to 865-180. Freeware Paint.net is great for this. steps
1: crop photo
2: resize absolute width 850 (proportional)
3: use the rectangle select tool, constrained to 850 x 180
4: select, copy, new, paste, save as header-x.jpg
Chris, very elegant work both on your cutline and now the neoclassical. I would like to only display five or six of the most recent posts on the main page and don’t know the best way to truncate the loop that generates the page. Is there a simple way to manage how many posts show?
BTW, I had over 105 images rotating on my header on Cutline. I’ve re-sized about 35 to run on the larger Neoclassical header and have had a lot of fun with that. I blog about houses, landscapes, and entertainment issues and would like to be able to rotate header images by category or tag. I noticed that you’ve advised about how to make static headers for certain pages. Continuing that thought for future updates, it would be fun to have a header image rotation by category. Just saying…
Once again, thanks for the elegant work.
Dave — The easiest way to control the recent posts in the sidebar is simply to use widgets in the left sidebar. For instance, in your case, all you would need to do is add the Recent Posts widget. Once you’ve done that, you can control how many posts will show (the default is 5).
You could also modify the code in
left_bar.php, but I see no compelling reason to do that since the WordPress widget affords you (arguably) more control in a more “sterile” environment.Chris,
Sorry that I wasn’t clearer. I would like to restrict the center column post count rather than the sidebar.
Hi Chris,
Just downloaded your NeoClassical Theme and installed it. I have applied a few themes just to see how the work and all seem to have been running ok. But once I installed the your theme pages and categories are not showing up. When I click on about I get an error, and on the side bar I’m getting “Fatal error: Call to undefined function: wp_list_categories()…”
Any ideas? I really like to use this but so far out of the box it’s breaking my original/default wordpress template. Thanks.
C
Christopher - are you using widgets? What was one of the themes that worked?
Hi Kristarella,
I have turned off all plugins, and it works perfectly with “WordPress Default 1.5 by Michael Heilemann The default WordPress theme based on the famous Kubrick.” I have switched it back to that as you can see. I would really like to get this to work. If you click the “about” link, you are taken to a proper about page.
C
Hi I tried it again just now creating a new wordpress site, replaced the default theme with http://christiemaclachlan.netfirms.com/neotest/ and same issues still ideas? How can one tell what version of wordpress my host netfirms.com is using?
Same issues still… I even upgraded to the newest version off wordpress for this test version. http://christiemaclachlan.netfirms.com/newwordpress/
Christopher — The first thing you’ll need to do is confirm the version of WordPress that you’re running. The behavior you’re experiencing occurs in WordPress versions 2.0.x and older (because the
wp_list_categories()function was not added until version 2.1), and that’s why I feel like this has to be the problem.Fortunately, checking your version of WordPress is easy. Simply log into your WordPress administration panel and scroll down to the bottom of the page. The last line should contain information on the version of WordPress that is currently running on your server—if it’s anything less than 2.1, then you’ve found the problem.
The remedy, then, is simply to upgrade to the newest version of WordPress.
lol this is nutty, Chris I thought finding the version should be so easy. But when I log in and scroll down I see nothing but … the logo & “WordPress Documentation — Support Forums — ” Is there any other way I can do this? or is that just showing it’s an old version?
Christopher — That means it’s an older version of WordPress
Sorry Christopher,
I live in Australia, so I was asleep while you were trying new installations. While Netfirms’ one click installation probably seems appealing I think Chris is right that it’s an older version (although pathetically Netfirms doesn’t seem to say). You should a) appeal to Netfirms to update their system or b) manually install it (which is quite easy, it’s a very quick process).
ah ha! I finally have the newest version of WP installed and after 30mins on the phone getting the database connection to work properly with my host I was able to get it working. So thank you…
Now next question if you don’t mind - Navigation - I’m at work so reading through the postings isn’t always possible. But I did see something about permalink with regards to nav, but how do you go about actualy adding another nav link? I have created a few test pages and all are not being displayed. Thanks again Chris & Kristarella.
C
Christopher - open nav_menu.php and add links as list items.
Kristarella -
well did a test on that file and uploaded it. No prob there, seems to display
<a href=”" rel=”nofollow”>Home
<a href=”/about/” rel=”nofollow”>About
<a href=”/racing/”>Racing
Now I watched that tutorial video on how to change the permalinks. I changed them to only show the title - /%postname%/ but after creating a test page called racing I was unable to find the page by clicking the link. The page contains a line of text and a test image. What am I missing here?
C
btw every link shows the same information…
“Hello world! by admin Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! January 3, 2008 1 Comment” http://christiemaclachlan.netfirms.com/wordpress/
I don’t think the permalinks are working. They’re all going to the homepage.
Did you have to manually change .htaccess? How did you do it.
No I did not edit the .htaccess file at all. When I watched that video about changing the permalinks I noticed at the bottom WP generated some code for a .htaccess file. But in my case it did not do that. It seemed to be working fine (or so I thought) There is an .htaccess file though in the root of my wordpress directory.
Currently my .htaccess file reads this….
# BEGIN WordPress
RewriteEngine On
RewriteBase /wordpress/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wordpress/index.php [L]
# END WordPress
What do you recommend?
Ah gee, htaccess isn’t my forte, but I’ve had trouble when I’ve had to manually change the file. You didn’t do that, so all I can recommend is perhaps switching the permalinks back to default and then back to custom and see if anything changes. Sorry
ok I will try that… but is it normal for WP not to create an updated version of .htaccess? like if you try it right now on yours would it create one like in the video?
C
Sometimes it works first go and easily, but a lot of people have problems in getting the pretty permalinks to work properly. It’s hard to know if it’s user error, Wordpress error or server error. Might be good to check that your server has mod rewrite on - hopefully that info will be in their FAQ or something.
Well maybe Chris might have some ideas? I have deleted the .htaccess a few times and tried everything with that. I’m running on my server Apache/1.3.34 (Unix) mod_fastcgi/2.4.2 mod_perl/1.26 and lates WP. Seems like many people are having the same issues. Even in the default wp theme it has the same issues. I’m really reaching out here lol. help!
I just want the file name for the link not some p=?.
Sorry Christopher, I think you’ll need to plead with Wordpress support forums on this one. It’s obviously not an issue with this theme, but a more general one and I don’t think you’ll get any further suggestions here.
It’s certainly not my area of expertise.
Christopher — Based on your comments in #108, I can see precisely why your permalinks were not working.
For starters, your WordPress is installed in a location that is not the root directory of the server. This is perfectly fine, but in this case, it is also the cause of your URL problems. One line of your
.htaccessfile reads:That line tells your server that all URLs should be rewritten relative to the following path:
http://www.yourdomain.com/wordpress/Obviously, this is not going to work for you because the URL where your WordPress is installed is:
http://christiemaclachlan.netfirms.com/blsc.on.ca/I’m not really sure how your server is configured or what kind of package you are working with, but I would suggest moving to at least a regular shared server if you’re really serious about running a Web site.
The strange URL structure that accompanies your current hosting situation is clunky and cumbersome, and I have a feeling that this
.htaccessissue is only the tip of the iceberg (with regard to your current arrangement).I’ve hacked the rotating_images.php script a bit… this hack enables you to simply load up the headers directory and not have to continually modify the script to increment the header count. My daily photoblog site is up to 94 headers (and counting).
http://www.yardley365.com
My next feat will be to build a photoshop action to automate the steps I take to make the headers. Crop, Layer Style, Stroke, Select color, Change Stroke to Inside, etc. Anyone have experience photoshop actions?
Thanks for a great theme!
woops - forgot to paste the new rotating_images.php… here it is:
—8<—
<img src=”/headers/header_.png” alt=”Random header image… Refresh for more!” />
—>8—
Ugh - now I’ve made a mess of it… looks like the comments system won’t let me paste php code… Anyway - the hack simply assigns a variable called $count with the value obtain by using the count and glob functions in php… here’s another try:
$count = &count(glob(’wp-content/themes/neoclassical/headers/header_’ . “*”)) ;
$random_image = rand(1,$count); // the second number should equal the total number of images that you want to rotate
Sorry for the multi-posts and thanks again - hope this works.
I am going to ask a stupid question because I’m tired of trying to figure it out and I can’t find info on it or if it’s even possible. How do I take existing photos to use as a header image without distorting the picture? Let’s say for example I have a photo of my dog that is 2908 x 1828 and I need to make it 970 x 140. If I crop and resize in Photoshop it just streches out the picture. Do I need to take pictures in a certain format?
tupto - If you are cropping the image to the correct dimensions it should not distort the image. It’s unlikely that you will be able to fit whole images or scenes into the header, unless they are wideview-type landscapes.
Unless you’ve changed the CSS for your header the image needs to be 865×180px.
Whatever the dimension I usually start by scaling the image to the largest dimension (in this case 865, or your 970) and maintain the aspect ratio so that it’s not distorted. Then I create a selection 180, or your 140px high and find the best section of the image to go in that selection and crop it.
thanks a mil! I am using the cutline theme and that’s the reason for the different header image size.
Hi,
Can anyone tell me how to format links so they are not underlined - for a more natural appearance?
Also, for some bizarre reason a banner that I added to my left sidebar is in a different position on my about page.
Any thoughts anyone?
Cat - add
a {text-decoration:none;}to the custom.css file, after all the writing that is already there. This will stop any underlining of the links, including upon hover - if that’s what you want.Banner looks fine on both pages to me.
Cat - add
.custom a {text-decoration:none;}to the custom.css file, after all the writing that is already there. This will stop any underlining of the links, including upon hover - if that’s what you want.Banner looks fine on both pages to me.
Update: I figured out how to remove the underline from links.
But! I’m still having issues with that banner from the left sidebar. I just published a new post and just to see how it looked when I pulled it up by the category, that left sidebar banner shows up below the post.
What’s up with that?
Any possibility of including an additional page template in your next release? I’d like to have a page template for pages where I don’t want the sidebar(s) to appear. I’ve tried to accomplish this but can’t get the css quite right. I simply copied page_comments.php to wide_page_comments.php and commented the call to sidebar. Then I added some additional styles to css - this is where I can’t quite get it.
Adding navigation tabs to the neoclassical theme…
I’ve added upside down tabs to the rotating masthead graphics… here’s what it looks like:
http://www.yardley365.com
Here’s the code:
Add this to the bottom of style.css:
style.php:
#tabcontainer
{
width: 500px;
padding: 30px;
border: 1px solid #ccc;
background: #fff;
}
#tabnav
{
height: 20px;
margin: 0;
padding-left: 10px;
background: url(images/tab_bottom.gif) repeat-x top;
}
#tabnav li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#tabnav a:link, #tabnav a:visited
{
float: left;
background: #fff;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 2px 10px 2px 10px;
margin-right: 4px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
}
#tabnav a:link.active, #tabnav a:visited.active
{
border-top: 1px solid #eee;
background: #eee;
color: #000;
}
#tabnav a:hover
{
background: #fff;
}
Then add this to the rotating_images.php file:
$homeclass='active';
if (the_title('','',0)=='About') {
$aboutclass='active';
$homeclass='';
} else {
$aboutclass='';
}
if (the_title('','',0)=='Map') {
$mapclass='active';
$homeclass='';
} else {
$mapclass='';
}
if (the_title('','',0)=='Contest') {
$contestclass='active';
$homeclass='';
} else {
$contestclass='';
}
?>
<a class='' href="/">Home
<a class=” href=”/about”>About
<a class=” href=”/map”>Map
<a class=” href=”/contest”>Contest
It’s hard-coded and probably not the best way to accomplish it - given that I think I can get the pages array from the wordpress database… but let’s call this first pass - maybe I’ll go back and do it the right way.
Thanks again!