Your Design Questions Answered

A few days ago, I called out to readers who wanted to know how to do a specific thing in web design, and I told them that I'd answer to the best of my ability. I received two questions, and so here are my answers and explanations.

My first question is from Kelsey Fireheart:

I think I'd like to set my blog up with side links like yours and maybe like your featured pages except I'd like each pix to be each section of my site. Then maybe like Mythspent's third column on the other side that I can fill up with news.

Kelsey is talking about my Pirate101 blog at http://swordroll-pirate101.blogspot.com/.

First of all, my blog can extend beyond the white area, because the white is part of the background. If you do this, you just have to be sure to design your background and page elements to be centered. By that, I mean that when you go to do HTML, you'll want to do spacing like this (  is HTML that adds a blank space):

<center>&nbsp;&nbsp;&nbsp;&nbsp;Content Here</center>

...and not this:

&nbsp;&nbsp;&nbsp;&nbsp;Content Here

If you don't use centering, your background might look nice to you, but on a screen with different dimensions, it'd be off. It sounds complicated, but it's really very simple.

As for the links themselves, they simply linked pictures. Once you've got your background down, you can go to Template Designer, and extend your left column beyond the edge of the white however far you'd like to. Now you'll want to add an HTML widget. If you don't know HTML, here's a crash course:

Insert Image: <img src="image url here">
Enter/New Line: <br>
Center: <center>content</center>
Link content: <a href="url to link to">content to be linked</a>

Now we can combine a few of these to put together an outline for the side links:

<center><a href="url to link to"><img src="image url here"></a><br>
<a href="url to link to"><img src="image url here"></a><br>
<a href="url to link to"><img src="image url here"></a><br>
<a href="url to link to"><img src="image url here"></a><br></center>

That's get your four links. Essentially, you're uploading the images to get a URL for them, and inserting that. Then you'll make the page, copy the link, and add that to the URL to link to. After you've got the images in, it'll be easier to play with the sidebar width.

You can use this same method to link two pictures to the two different areas of your site. Something like this:

<center><a href="url to link to"><img src="image url here"></a>
<a href="url to link to"><img src="image url here"></a><br></center>

To put the widget above your blog posts, you'll want to go to Template, and then click on Edit HTML. Hit Ctrl+F to search and look for "showaddelement". Anything that says "no" needs to be changed to "yes" so that you can add more widgets above it. Now you'll be able to add an HTML widget above your posts!

You can always choose the three column design and do a sidebar like the one at Mythspent Youth. That very right sidebar is just a profile and popular post widget, but you could again choose HTML to do news updates.

Let me know if you've got any more questions. I've also got a few from Goon.

1: How did you get your pages bar like that? Where did you get the border image and how did you get it like that?

I explains how to do the sidebar above. As for the boxes themselves, I simply went to  http://www.home.p101/  and looked for that box with nothing covering the edges. There's an example at the bottom of this page:  http://www.home.p101/free_game/kid_safe/game 

I then went in to GIMP, and cut out the box. I could use a simple line to get the sides, and carefully click with the lasso tool around the skulls and edges. I used a box to highlight the text inside, and, careful not to touch the shadow inside, colored that whole area the same color as the background. I now had a regular, empty box.

Now, I could middle parts out and move the bottom up to meet the top, or do the same with the sides, until I got it to the desired sized. I then added the text.

2: I really love your header, and was wondering.... how would you do something like that on GiMP?

If you're talking about the Pirate101 header, then you'd want to do several things. For mine, I cut out every individual Pirate Ship. Yes, all the little sails, ropes, and everything on three ships. Then, for the clouds, I took a cloud picture off of Google, and used a brush with a soft edge (the edge fades out) to erase around the boundary of the cloud, and partially erase some of the cloud itself. There are about three clouds there, but they're all the same one, flipped, trimmed, or otherwise modified slightly.

For the title part, I used the box trick to make a box the correct size. I then created a new image with a treasure map, and my words on top of it. I put that into the box, and did some erasing around the edges. Then, I created an all new images that was exactly the size that the header needed to be. I made a note of where the white would end on each side. Then you simply copy and paste everything. However, when you paste, click "Paste As" and then "New Layer". That toolbar to the right shows your layers. You use the arrows to move one up or down, and you can delete them or move them after you've got them placed.

3: How did you put the "flags", if you will, with the text in it? And how about those "Featured Post and Featured Page" boxes? 

To place the flags and boxes where they are, take a look at the end of my response to Kelsey. To do the actual flag, I took a flag off of the Pirate101 website, used the same purple as the flag to cover up the words, and then put my own words on there in the Shermlock font.

The feature boxes are the same way. You can make the image separately, and update it when you want to feature a new post or page. It is linked in the same way that I explained to Kelsey to do the sidebar.

4: This is my last question, but how did you do the "Read more" in the shermlock font for the jump-breaks??

To do this, you'll have to dive into some HTML! Go to Template and click on Edit HTML. Click on the box that says "Expand Widget Templates". Hit Ctrl+F and copy and paste this into the search box: 

 <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

...and replace that with this:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><img src='Image URL here'/></a>
</div>
</b:if></a>
      </div>
    </b:if>

This is basically another image. You'll have to create it, then crop it as close as possible, and upload the image to get a URL for it, and put it in that blank spot.

To both of you:

1. Remember to click "Preview" any time you are editing your HTML. If you mess something up and click save, it might be impossible to find what you changed.

2. I use TinyPic to upload my images for a URL. Use the last link after uploading.

3. For most of the things like this, you can't scale images, you'll have to create them the correct size to start with in GIMP, so be sure you have an idea!

4. Good luck, and let me know if you have any more questions!

And that concludes tonight. I'm taking a short break from Avalon. Thanks for reading, and see you in the Spiral!