Comments on: How can I edit this Wordpress theme?

Question: How can I edit this Wordpress theme?

FuckingAwesome — Wed, 19 Sep 2012 07:08:40 -0800

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

By: fontophilic

fontophilic — Wed, 19 Sep 2012 07:29:23 -0800

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.

By: backwards guitar

backwards guitar — Wed, 19 Sep 2012 07:54:30 -0800

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.

By: Magnakai

Magnakai — Wed, 19 Sep 2012 08:58:55 -0800

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!

By: Magnakai

Magnakai — Wed, 19 Sep 2012 09:00:57 -0800

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



#featured-content img.attachment-featured-thumbnail.wp-post-image 

{

width: 100%;

}