Customizing K2: Part 2
Today we continue our journey to help you find your very own unique design for your K2 and WordPress powered blog. If you haven’t read the first part, please go do that now; I’ll still be here when you come back. For the rest of you go ahead and open up your FTP program, login to your server and get ready to indulge in an intense coding stint. Some of the things discussed in here might get a bit tricky, but no need to fear my contact page is only a click away.
Creating a Link to Another Site in the Main Menu
Similar to how I have a link to my Flickr account in the main menu, you can link offsite through your main menu. The easiest way to get this done, rather than editing the header file, is to use the Page Links To plugin. Extract the php file after you download it and upload it into your wp-content/plugins folder. Login your WP Admin panel, navigate to the Plugins page and activate the plugin. Now let’s say you wanted to make a similar Flickr link. Go to Write > Write Page. For the title type in the name of the link you wish to use and then go down to the Custom Fields area and type links_to under Key and the full URL of the website you wish to link to under Value.
Reorder Pages
With all of the pages and links in your menu, you may want to organize them. You could organize them alphabetically or in order of popularity. Either way, there is a simple solution. For each page in question, edit it and change the Page Order number. The smaller the number the more to the left it will be and vice versa. So if you wanted the Flickr link to be on the absolute right, use a large number such as 5 if you have 4 other elements in your menu. Playing around with the numbers should give you the desired result in a short time.
Adding a Contact Form Page
One of the most important guidelines for any professional website is making it easy for your readers to contact you. What better way than a neat contact page? Grab Ryan’s WP-ContactForm plugin (becareful there are two download links, one for WP1.5 and one for WP2) and activate it. Create a page and title it Contact and whatever you wish to name it. In the Post box type in <!–contact form–> where you would like a contact form to appear. Don’t forget to change the contact form options to best suite your needs. For those that want to setup something more unique you might want to take a look at Dustin Diaz’s AJAX Contact Form.
Making the Header Clickable
If you have created a header graphic with the title in it, you lose some of the functionality when the title was made by the HTML. It used to be clickable and lead visitors back to the homepage if they got lost. You can easily put this functionality back by editing one line in header.php. Navigate to the K2 folder and open header.php in your favorite text editor or ftp program. Find the line that says <div id=”header”> and change it as below, substituting your URL for the one given.
Footer Background Image
Including a footer image is a great way to round off an excellent design. Whether you are going for that complete rounded look or a svelte linear perspective footer images are easily included via a background attribute in your scheme CSS.
background: url(’testscheme/footer.jpg’) bottom center no-repeat !important;
}
Alerts
Want to put some emphasis on that important download link or urgent message in a blog post? All you need to do is enclose it in a paragraph tag with the alert class. An example is below. The CSS entry shows you how to style it in your scheme.
background: #FFF6BF !important; /* background color of alert */
border-top: 0px !important; /* these two override the borders in style.css */
border-bottom: 0px !important;
border-left: 2px solid #FFD324 !important; /* these two lines set up a border on the left and right */
border-right: 2px solid #FFD324 !important;
}
Changing the Styling of the Author’s Comments
The following CSS tweak will add some definition to the way your author comments appear, easily distinguishing them from the other comments on a certain post. This is rather helpful on popular posts when a reader has asked you a question and comes back later and wants to find your reply quickly. Change the attributes as it fits your design.
background: #ECF4FD !important;
_background: none; /* I think this was because Internet Explorer didn’t play well with backgrounds here */
border-left: 2px solid #3388CC !important;
border-right: 2px solid #3388CC !important;
}
Main Menu Tweaks
If you’re anything like me you’d agree that the default main menu is a bit too spaced out. Various designs of yours may call for the menu to be smaller, at the top of the header graphic, on the very right side and colored differently. In the following piece of code you can adjust the font size with the font attribute as well as the color.
font: 1.1em Verdana, Helvetica, Arial, Sans-Serif; /* 11px */
color: white; /* default color, non-hover state */
}
With this next excerpt you can control the position of the menu as well as the spacing between each menu item. To adjust the position you can play around with the padding. You can use padding-left, padding-right, padding-top and padding-bottom to get the desired position. Don’t get strung up with the margin in the code below, it might not be necessary for you. Note: If you want your menu at the top of the header graphic, use margin-bottom and increase the number of px to raise the menu higher until it sits just right.
margin-bottom: 2px; /* you can use margin to control where the padding starts */
padding-left: 145px; /* my menu uses left padding to move it to the center */
width: 70% !important; /* this controls the spacing, my menu uses 70% */
}
The next chunk of code is responsible for what a menu item looks like when it is hovered over and wen it is active/active-hover. Each attribute is best learned by trial and error, but hopefully my comments will aid you. This code is the exact code my current menu uses so compare the attributes to what it looks like.
background: none !important; /* hover background menu item color */
color: #ccc !important; /* text color when hovered */
border-bottom: 5px solid #f8d276; /* just a hover style, not necessary */
}
ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
color: none !important; /* active tab hover text color */
background: none !important; /* active tab background color */
border-bottom: 5px solid #3388cc;
}
Up Next
The next tutorial will get a bit dirtier and I will cover php conditionals that allow you to have different things appear in the sidebar depending on which page is displayed. I think I might cover modifying the archives page as well as how to come up with a sidebarless design. Again, any suggestions are welcome. Take a break, then start reading Part 3.
That’s a very good Tutorial!
I like the Points “Alerts”and “Changing the Styling of the Author’s Comments”.
And have a happy new year!
Another excellent tutorial! Thanks Paul!
Happy New Year Everyone!
thank you very much for this second part.
i tried finding this kind of information before, and i have, but it always takes a long time, it always means spending long periods in some forum.
this is all i ever wanted to know, and some more, all in one place, and you’ve made it easier to follow than anything i’ve seen so far.
thanks,
maique
This is easily your best (series of) article(s) to date. Great stuff.
I’m glad everyone feels that way. :-) I’ll try extra hard on the ones to come.
This is another great How-to article which is going to help many bloggers, me included, give their site its own unique appearance. Good stuff.
Thank you so much.
Great source for the novices (like me) to start their own style, thanks paul!
Thanks for these used 2 on my blog and will be defo keeping an eye out for the rest!
Great work here Paul. With the help you’re providing in the support forums, these articles and your promotion of K2, I see you just as much as part of the K2 team as Michael and Chris.
A couple of suggestions for future articles:
Moving the sidebar to the left
Single page layout
Customising LiveSearch
Keep up the good work!
Fantastic, thanks so much! Can’t wait for the sequel :)
How about how to add a third column or sections beneath other sections etc?
I’m not new to CSS but I get muddled with what goes where, so these tutorials were very helpful! :o)
x
I have a question that has been baffling me for days. Your’s is the first k2 template where the comments h4 header doesn’t overlap the first comment in IE. I’ve compared my metadata, h4, and commentlist tags with your source and it appears to be the same. Did you alter this CSS in any way?
I think I love you.
Thank you so much for the tutorials, I now think I can tackle a small business website using Wordpress, K2, and a little bit of know how.
I can’t wait to see the next tutorial. :)
Paul, thanks so much for taking the time to share this series with us…
I’ve an image I’d like to use as my footer, and had hoped to have the color of the page bleed directly into the footer. Any way of doing so? Seems as though the code refrenced will leave a space between the page and the footer, with the background visible…
I can’t find the option to adjust the height for the footer… is that necessary?
Michael, you can try playing with footer height and margin-top in the CSS for the footer. Take a look at my CSS, I’ve played around with it a lot. My footer image is 106px tall but I only show 80px I think so I can play with the padding/margin as necessary.
Great tutorial, some very useful things in there. I guess I’ll wait for part 3 first before opening my site :-)
Great post. Nice job.
Thanks for the speedy reply, Paul…. that was a perfect fix.
I’d like to see some information on how to change the location of the Related Posts in K2. Currently they appear in the sidebar, even though I see that a lot of people moved them to the bottom of the post, a much sensible place for them to be.
That next tutorial sounds good Paul. I’ve wanted to learn about displaying different items in the sidebar on different pages for awhile and also could you cover changing the sidebar’s background colour.
Thank you so much for taking the time to write these articles. I look forward to part 3 as the sidebar is as much a mystery to me as all of this stuff. I’d like to know simple things like where to add custom images into the sidebar (for now I’ve kind of thrown them all messy like into the ’sidebar.php’ file…they show up but I can’t exactly align them for a clean look.
That’s probably a bit too basic for your series but if you could touch on it I’d appreciate it.
Thanks again!
Thank you for the great tutorial.
I’ve been trying to figure out how to rename the first menu tab “Blog” to something else.
Anyone tried to do that?
To the guy above me, I just worked this out, you need to edit the header file, look toward the bottom of the file and find the word ‘blog’ and replace.
Thanks TC.
Do you know if there’s an easy way to shift the default home page (”Blog” by default ) menu tab to the right. I’m trying to make another wp page the default home page of the site.
Seems like the easiest way to accomplish the task would be to set up a redirect on the server, no? Just send viewers to http://www.yourblog/desiredpage when they logon to http://www.yourblog.
That’s one solution, thanks, but what about the menu tab of the new home page, how can I move it all the way to the left?
What’s the url for your blog? You may want to consider reading up on CSS a bit since it seems you have a lot more questions. It’s all in the CSS my friend. You may want to adjust where the page floats…
Just testing some things for now on worldpins.com.
Yeah, I still need to read a lot. I’m actually learning a lot from browsing the forums and blogs, it’s a lot fun too.
Thanks for your input.
Can’t wait for the next tutorial :-)
Absolutely fantastic!!! Very easy also for me to make changes and it is really incredible!!!
Thx :)
Toufic, check out plugin…
Great Site!
Thanks for the link Michael. The plugin is great. Don’t know how I didn’t find that plugin, been searching for days. :-)
I just installed it and it’s working fine. However, on the main menu, the link button for the home-page specified will not move to the extreme left of the menu. It remains where it is.
But works great.
Try this plugin:
http://semiologic.com/software/static-front/
it puts the home page tab to the left.
Is it WP2 compatible?
Thanks Josh. I looed at that one, and I couldn’t make it work with my FAlbum page.
Also, it doesn’t let you change the position of the first menu button. I think that button is hard coded or something.
Hi Paul! It seem to work fine with WP2, but I like the plugin Michael suggested more (Filosofo Home-Page Control).
Thanks guys!
Semilogic’s plugin works great with WP 2 for me, here are two sites I’m using it on:
http://dvknowledgebase.org/
http://revcoders.org/
Hi Josh,
When I create the page with Semilogic’s plugin with page slug of ‘home’, I end up with two tabs on the menu, the home-page on the left and a copy of it on the right.
Do you know what I’m doing wrong?
Nice websites btw, I like the chat page.
Thanks. They are just getting started, I need to do graphic headers and other stuff…
You know what’s weird? This never happened to me before… but last night on a new site it did!
I fixed it by excluding that page from the tab lineup:
in header.php:
wp_list_pages(’exclude=12&sort_column=menu_order&depth=1&title_li=’);
(#12 is the number of the page I’m calling “home”, found that out from the Manage Pages listing)
But I don’t know why this problem never happened before…
Any of you succesfully get the date to appear only once per posts on a given day? I’m having a really tough time with this in K2. I know it’s in the loop, but can’t get it donee… perhaps this’ll make it’s way into #3, Paul?
I figured it out…
Anybody know how we get an RSS feed for this blog? I am not very tech savvy and would really like to get updated info on this blog. Thanks!
http://feeds.feedburner.com/paulstamatiou
author comments doesn’t seem to work in the latest builds :(
Thanks for the tips. I’m having trouble aligning the footer text with my background image.
(I’d like the text to appear just below the stripe in the image, not overlapping it.)
I tried all the combinations I could think of in the footer CSS (background url bottom/top; text-align bottom/top)
I tried changing the position of the stripe in the image
I tried adding a break in the footer.php file, but that only moved the whole footer down.
So for the moment I’m surrendering and moving the text to the About page.
Any ideas?
I should have waited a little longer before posting - it seems that adding before the breaks in the footer.php file has done the trick.
Just cheering and sighing with relief while reading subheadings in this page. Thanks, I’m sure I’ll be back for questions though.
This is what I’ve come up with so far: http://www.quidtum.it/blog
Hey Paul,
Do you know of a PHP Conditional that says “if logged in” or something to that effect, so that something will only appear if logged in. I’d like certain menu tabs to be visible only to me. I’ve tried setting pages to private, but then the tabs just don’t appear at all. I have a thread going in the k2 forum here: http://getk2.com/forum/showthread.php?t=1433
Any help you could offer would be greatly appreciated.
Thanks
Hi
Very useful tutorial, Paul. However, the tip for reordering the tabs in the main menu does not affect the ‘Blog’ tab, which always appears first. How could I set its position between any two other tabs?
Thanks!!
Paul,
These are very comprehensive tutorials and I always return to them when I do a new K2/Wordpress install.
Can you please remind us how to prevent a page appearing in the top menu of K2?
I think this would be a useful addition to the Part 2 tutorial and a good resource to return to.
Thanks in advance
Hmm, has anyone gotten the clickable header to work with WP 2.0.4 and K2 0.9.1?
When I make the changes, it makes the header disappear.
For an example of what I mean compare http://www.andrewhunterproductions.com to http://www.andrewhunterproductions.com/testing.
This is becoming a must read for any k2er thanks again
about Changing the Styling of the Author’s Comments:
I really don´t know what to do; because my comments sometimes shows inside the greybox and anothers not, like in :
this post
:(
i activaded the ajax comments and desactivaded and activaed again but nothing
I was having difficulties as well due to the way the quotes are rendered into fancy quotes, as mentions in the pt. 1 comments. However, after changing them to simple quotes, the clickable header image bit worked fine. :)
Thanks!
Thank u very much. Your explanations are great. I almost don’t know nothing about CSS…
This is good stuff. I understand and can implement adding a contact form, making the header clickable, alerts, changing the style of the authors comments and footer background image.
The part about main menu tweaks doesn’t seem relevant to your site, since you don’t use it any more.
And the first item I don’t understand at all, creating a link to another site in the main menu. Perhaps this is because it’s about the tabbed menu, that again doesn’t apply to this site.
Since the advent of Widgets I’ve got my main menu as a widget, which makes it very easy to alter it when necessary.
You have a good and easy style of writing and can convey your message very effectively.
So far so good. I’m learning. Thank you. Thank you. Now onwards to section three.
Just found this tutorial via the K2 forum. Excellent! It has enough detail and is well explained. I can’t say the same for many other tutorials out there. I wish there were more tutorial writers like you.
Excellent tutorials! I’m currently using the K2 three column version. Can anyone tell me how to create a static page that only displays one type of category? (e.g. if I create a category called “Films” as a static page, I would like articles on films to appear on this page when I create them. Or is there a way to get the archive category page to appear on the static film page…? ). Hopefully this is not a really stupid question! ;)
Hi Paul,
Forgive my silliness. I’ve problem in understanding your ‘Alert’ and ‘Creating a Link to Another Site in the Main Menu’
‘Alert’
where should i put all that in?
I mean which part, as i couldn’t see the different after typing what you have given in my style.css.
‘Creating a Link to Another Site in the Main Menu’
I’ve install the plugin.
Created a title for write page;
At custom field;
I type link_to in Key and http”//paulstamatiou.com/ in Value then i press Add Custome Field. Publish.
But nothing comes out.
I did all these in my localhost/ wordpress
Please advise.
I was looking at your customization for author comments. I don’t see the .authorcomment class in my CSS file. I am using wordpress-2.5 with k2-RC5-revision-648-2008-03-28
Any help? I would love to be able to do this.