How can I edit this Wordpress theme?

September 19, 2012 7:08 AM

How can I edit this wordpress theme?

Hi everyone,

I want to use this Wordpress theme as the basis for a website, although I'd like to change a few things, specifically...

1) I'd like the main feed to be significantly wider (at least 640px)

2) Option to remove the left hand column

3) Change the height / dimensions of the preview thumbnail images on the main page to be

4) The ability to customise or use my own "sharing" buttons for Facebook, Twitter, etc.

Any help would be much appreciated. And yes, I have already got the Custom CSS option on Wordpress.

Thanks

posted by FuckingAwesome to Computers & Internet (4 answers total)

Do you know how to write CSS and HTML? Do you know how to add Wordpress widgets/plugins?

All the stuff you've asked is possible, but you'll need to brush up on some basic skills, if you don't have them already. Firebug is a great way to start noodling around.

I think you should understand that Oxygen is a responsive theme. This means it will adjust itself to look best on a phone/tablet/pc/whatever. Those tweaks might mess up the way it looks on a smaller screen. If you're just interested in sortof hacking this together to look good on a PC, then by all means, hack a way. Also, smart development would have you make a child theme, so that whenever this theme updates, you don't overwrite your work. But, again, depends on how much work you want to do.
posted by fontophilic at 7:29 AM on September 19, 2012 [1 favorite]

It sounds like you're using wordpress.com and not wordpress.org, so you might be limited in some of your changes - even if you do have the the custom CSS option.

Use Firebug (linked above), or Chrome's Web Inspector. Basically you right click on a section, select INSPECT ELEMENT, and then you'll see all the CSS that's applied to that specific section, or you'll see what the section's class or id is. Then you can target that within your css. for example you might remove the recent-posts widget with:


.widget_recent_entries { display: none; }


Something like changing the image thumbnails is a bit more difficult, because you can increase the size (which is percentage based, it looks like), but that might cause them to jump down to a second line because your percentages, added together, will be greater than 100%. There might be a setting on the backend to change that.
posted by backwards guitar at 7:54 AM on September 19, 2012

The first two are easy. Add the following code:


#secondary
{
display: none;
}

.page-template-showcase-php #content-wrap
{
float: none;
width: 100%;
}

#content
{
margin-left: 0;
}


This makes the left hand bar invisible. That block has an ID of secondary, so I target the id with the # and then the name of the ID. Then I make the 'display' property of #secondary equal to 'none'. This takes it out of any layout equations.

Now the left hand bar is gone, but there's a bit gap. If you look at the div with an id of "content-wrap", you'll notice that it has a width of 77% and is floated right. Making the width of this 100% and removing it's float means that it sits at full width.

Lastly, on pages that aren't the front, the layout's a bit different. The left hand bar will leave a significant gap. This is because there's a big margin making room for it in the #content section. Adjusting the left hand margin of said section will remove that issue.

Now, unfortunately you're not going to be able to edit the size of the thumbnail images. Those are generated at that size and aspect ratio. You'll also notice that they're not taking up the amount of horizontal space that's allotted to them.. If you don't mind them being a bit blurry, you could add the following code:


.featured-image img.attachment-archive-thumbnail.wp-post-image
{
width: 100%;
}


This will ensure that they take up as much horizontal space as they are given.

I'm afraid I don't know about the sharing buttons on Wordpress.com. I suspect you're limited to the plugins that are available there. You may be able to customise them via Custom CSS, but without an example I really couldn't say.

Good luck!
posted by Magnakai at 8:58 AM on September 19, 2012

Oh, and let's not forget the big header image:


#featured-content img.attachment-featured-thumbnail.wp-post-image
{
width: 100%;
}

posted by Magnakai at 9:00 AM on September 19, 2012