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.
<div id="header" onclick="location.href='https://paulstamatiou.com/';" style="cursor: pointer;">
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.
#footer {
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.
<p class="alert">Important Message!</p>.alert {
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.
.comments .commentlist li.authorcomment { /* Makes author comments look different */
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.
ul.menu li a { /* Font default of 1em */
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.
ul.menu {
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.
ul.menu li a:hover{
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.