July 1, 2014 at 4:10 am #112354
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!
Tobiashttp://allthingsgood.deJuly 1, 2014 at 4:27 am #112356July 1, 2014 at 4:28 am #112357
Yes.July 1, 2014 at 4:30 am #112358
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
July 1, 2014 at 4:33 am #112359
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.July 1, 2014 at 4:41 am #112360July 1, 2014 at 4:49 am #112363
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.July 1, 2014 at 4:52 am #112364
Should be fine i think as long as you have allowed for margins and padding etc.
July 1, 2014 at 5:57 am #112377
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.July 1, 2014 at 6:21 am #112382July 1, 2014 at 6:21 am #112383
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?July 1, 2014 at 6:23 am #112384
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!July 1, 2014 at 6:30 am #112385
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.
July 1, 2014 at 6:31 am #112386
You’re right. I thought so too immediately after I read your solution. Will do accordingly. Thanks a lot!July 1, 2014 at 6:39 am #112392
It works like a charm
You must be logged in to reply to this topic.