Change width of widget area in NewsPro theme

[T_fran_Tyskland]

Hi all!

Before I specify my current problem let me just give you a quick overview of my WP-background. I am still relatively new to WordPress as I only started working on my page a couple of weeks ago.
Nevertheless, I was already able to get a basic understanding of how WordPress works and already did minor changes to my child theme style.css (read: I only changed exisiting code but haven't written any new code myself)

To my current issue: on my site (allthingsgood.de, enter it as you read and add no "www" in front as apparently the re-routing doesn't work yet) I successfully increased the width of my primary content area and correspondingly decreased the width of the right hand sidebar. So far so good.

In the "Home-Top"-Area of the page I am using a "Featured Tabs" plugin. I now want those pictures (as well as the pictures in the "Home-Bottom"-Area) to be 809px wide instead of the default 740px. I understand that this means changing the width of the widget area, right?
Can someone tell me how and where to do that?

If this problem has already been resolved somewhere else in the forum I am thankful for the link to it and apologise for posting it here again but I couldn't find it yet.

Many thanks in advance!

Tobias

http://allthingsgood.de

[Brad Dalton]

Genesis tabs plugin? http://wordpress.org/plugins/genesis-tabs/

---

Tutorials for StudioPress Themes.

[T_fran_Tyskland]

Yes.

[Brad Dalton]

You want to change the featured image width to 809px in the Genesis Tabs plugin?
Line 27-30 News Pro themes functions.php

//* Add new image sizes
add_image_size( 'home-bottom', 150, 150, TRUE );
add_image_size( 'home-middle', 348, 180, TRUE );
add_image_size( 'home-top', 740, 400, TRUE );

Change the values for home top and bottom and re-add featured images or use regenerate thumbnails.

You might also like to inspect the CSS and modify it using Firebug. http://www.studiopress.com/tips/using-firebug.htm

---

Tutorials for StudioPress Themes.

[T_fran_Tyskland]

I want the pictures shown via the Tabs plugin to be broader (I tried and experimented via "inspect element" in Chrome and came to the conclusion that 809px instead of 740px (which apparently is the default size for this widget) would work nicely, while maintaining 400px in height.

[Brad Dalton]

I assume you have increased the content area width by at least 69px?

---

Tutorials for StudioPress Themes.

[T_fran_Tyskland]

Yes. Using "inspect element" I tried to find out where I could change the width of the left hand content area. I then saw that this would be in line 454 in the style.css file. I change this value to currently 850px in the style.css and saved it.
Everything on the page then adjusted automatically to the new width (e.g. the black lines separating the different sections) except the pictures in the Featured Tab widget. Ultimately I want those pictures to be the same width as these aforementioned black lines (and in the current setting they happen to be 809px wide).

Can you make sense of what I am trying to do?

I appreciate your support.

[Brad Dalton]

Should be fine i think as long as you have allowed for margins and padding etc.

---

Tutorials for StudioPress Themes.

[T_fran_Tyskland]

but how do I change the width of the pictures? It doesn't seem to be possible via the style.css. Do I have to change the code of the widget? That is something I am not (yet) familiar with.

[Brad Dalton]

http://www.studiopress.community/topic/change-width-of-widget-area-in-newspro-theme/#post-112358

---

Tutorials for StudioPress Themes.

[T_fran_Tyskland]

Well, I just might have found a solution. I had another look at the css file and tweaked line 295 and added a new line defining the width in line 296. Do you think it is a good idea to do it that way? This way is obviously a static one and won't adjust to any possible new changes of the width of the content area.

Following the above logic I did the exact same changes to lines 301 and 302 for the featured content.

Any thoughts on this from your side?

[T_fran_Tyskland]

Thanks a lot. For some reason I didn't see your answer before I posted the follow-on question! That looks very very helpful. I'll give it a try.

Thanks so much for your support! Have a good day!

[Brad Dalton]

My solution is better because WordPress creates different sizes for every image you upload according to the custom image sizes in functions file which i am referring to.

Your CSS method uses the browser to re-size the image on every page load which isn't efficient.

---

Tutorials for StudioPress Themes.

[T_fran_Tyskland]

You're right. I thought so too immediately after I read your solution. Will do accordingly. Thanks a lot!

[T_fran_Tyskland]

It works like a charm

[Author]

Posts