Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by tytyty
tytyty
4,974 Points

How difficult is it to edit Responsive templates? For example the size of the site's centered layout.

I will be taking the WebDev course here but in the meantime I need to use a template for speed. I like this template from TemplateMonster. http://livedemo00.template-help.com/wordpress_53013/ Unfortunately all of these templates from Themeforest, TemplateMonster etc use such huge images. All these new responsive sites look cool if you need a site for photography etc but the content is just too huge for more business oriented usage. I want to buy this template and make the site more narrow so I can shrink all of the images down and make the site easier on the eyes. How difficult would it be for me to do this? What are the key areas I will need to edit to make the site more narrow on desktop? I want to keep the 3 columns and the proportions but just make the site more narrow. Right now from white edge to white edge it's 1300px wide on my MacBook 15". I want it to appear like it's more like 900px wide. And while I'm at it shorten the main carousel image since it will be narrower. Keep it all proportionate.

4 Answers

Bob Sutherton
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

One helpful trick is to use the inspector tool in your browser, if you aren't already. That's just for finding the CSS selectors you need (it will even point you to the file and the line number). As for what files to edit, it's basically always in the same vicinity. Anything with a .css is of course CSS. But you find the CSS files in the 'theme' directory.

wordpress>wp-content>themes>my_theme>

You could edit it from within the WordPress dashboard. Or you could open up your site in an FTP program like FileZilla, download the file, and open it in a text editor.

You are going to be looking for widths and max-widths for the most part. It is a simple change, basically, if you know what you are looking for and where.

tytyty
tytyty
4,974 Points

Thanks. Is it a percentage thing since the width seems to be the same on desktop/iPad. Seeing as it is always in the same areas on WP themes where is it and what's the table called in your personal WP for example? I'm trying to make it easier for myself to search for the place I need to be in. Or going by the link I provided is it possible to locate it? p.s. you think all of this would be like kids' play once I take the CSS course here?

Bob Sutherton
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

It's a CSS question. So, I would direct you to the CSS courses on this site. CSS is known as the 'presentation' layer of a website. So, it doesn't matter if it's WordPress or whatever. The CSS will control the widths and sizes of things and all the other visual aspects.

Have fun!

tytyty
tytyty
4,974 Points
tytyty
tytyty
4,974 Points

ok but what I mean is since it's CSS whereabouts would I do this? What keywords should I look for to make sure I'm in the right area? e.g. if I edit the CSS inside the WP dashboard. and Is it mostly a matter of changing a few values?

Bob Sutherton
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

I think the CSS courses would definitely shed light on it but it will take some time to get through all that. It does differ from theme to theme as the tags, classes, and id's can vary. With a quick glance at the inspector tool in Chrome I was able to find these classes:

  • .cherry-fixed-layout .main-holder
  • .container
  • .span12

Adjusting the widths on those seems like a good place to start. But it will be a CSS job to get it exactly right so I hope you are comfortable with CSS.

tytyty
tytyty
4,974 Points

Thanks for that. I need to cheat as much as possible right now lol Well, I'll have to get comfortable with CSS pretty quickly! :) Cheers. It seems that WP themes combined with good CSS skills could get you a lot of things done very quickly. Well worth the investment I think.

Bob Sutherton
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

Exactly, I think that's definitely true. CSS is what you need to make simple cosmetic changes to ready-made WordPress themes. That definitely goes a long way because the heavy-lifting has already been done by the theme author.