Help for a nitwit

[haberdasher]

Hi everyone,

Nitwit speaking here. I don't know much about the technicalities of web design.

I'd like to add two 'sidebars' (for lack of a better word) to the twenty ten theme from Wordpress I'm using on my own domain. What I mean is that I'd like to use the space on the right and left sides of the page -- the areas that are now gray -- for snippets of articles on which you can click in order to read the whole article.

I suppose it should be possible, but I don't know how to write in html-code (or any code for that matter). Also, I'm afraid to wreck my site.

The site is voorjeharses.nl.

If I could upload a picture to this forum, I could make things clearer, if needed.

Any help is much appreciated!

 

[ronaldroe]

You'd have to code that into the template files. That said, you should be able to just change the items in the existing sidebar in the widget options.

 

[haberdasher]

Thank you for your reply, Ronald. I appreciate it.

I tried using widgets in sidebars, but the sidebars can't be placed on the far left and far right sides of the screen. I would like to make use of the whole screen.

What I mean is this:

 

[haberdasher]

In which the red blocks are used for featured articles on which the visitor can click.

 

[ronaldroe]

I understood what you were wanting. You'll have to hard code it into the template files. Beware, though that if someone has a smaller screen, doesn't have their window maximized or is on a mobile, it'll push the main content off the screen to the right.

 

[haberdasher]

Would it be possible, you think, to not have that problem on a regular PC screen? That's the main thing, I think. Because people who use an Ipad or like device can zoom in and out.

And do you think it's difficult, this hard-coding?

Thanks so much!

 

[chrishirst]

What is a "regular PC screen"?

They come from the 1024x768px of netbooks to 2100 px plus of high end laptops.

And don't forget it is not necessarily the "screen width" so much as the width of the client browsers because not everyone has their browser at full screen.

 

[haberdasher]

Hi Chrishirst.

You're right, there's no regular size. What I was aiming at was the fact that my actual site has no problem on PC screens, no matter if it's 1024x768p or anything else. So I would like to have that. Do you guys think that would be a problem if I find a way to add the two bars on the side of the screen?

Thanks again!

 

[JakClark]

Hi Chrishirst.

You're right, there's no regular size. What I was aiming at was the fact that my actual site has no problem on PC screens, no matter if it's 1024x768p or anything else. So I would like to have that. Do you guys think that would be a problem if I find a way to add the two bars on the side of the screen?

Thanks again!

But what these guys are saying is that if you add a column either side, it will essentially cut part of the main content off on smaller screens. You'd have to put both columns in the main column, and position them absolute left (minus a few) and right (plus a few).

 

[haberdasher]

Thanks for the clarification, Jak. So if I understand correctly, the image of the design I've uploaded above is indeed achievable, but not without cutting off content.

As you can see, I really am a nitwit

If this would indeed be a problem, would it be possible to use two different versions depending on the visitor? I'm asking because I've noticed that when I visit my website on a PC, there's lots of gray empty space on both sides of the content (see http://voorjeharses.nl). Whereas when I visit the site on my iPad, that gray empty space is gone. So I thought that maybe I could fill the gray empty space for those that use a desktop browser, and try something else for people that are on mobile devices.

Not sure if this makes sense, though...

 

[ronaldroe]

This looks like a job for: RESPONSIVE WEB DESIIIIIIIIIIIGN. Sorry, got carried away. Anyway, you need media queries. They're a bit on the more advanced side, but they aren't difficult. Basically, it changes the layout based on the size of the browser viewport. 2010 has some of them built in, which is why your iPad doesn't have the white space on the sides. This is the best guide I know for them: http://webdesignerwall.com/tutorials/css3-media-queries

 

[JakClark]

This looks like a job for: RESPONSIVE WEB DESIIIIIIIIIIIGN. Sorry, got carried away. Anyway, you need media queries. They're a bit on the more advanced side, but they aren't difficult. Basically, it changes the layout based on the size of the browser viewport. 2010 has some of them built in, which is why your iPad doesn't have the white space on the sides. This is the best guide I know for them: http://webdesignerwall.com/tutorials/css3-media-queries

Gaah, beat me to it!!11

Anyhow, ronaldroe be the real deal. The only alternative to media queries would be some lengthy js.