Search Results for 'adjust page width'

[AmeeC]

I am trying to figure out how to make the content area larger, since I made the theme wider, and I have sidebar-content-sidebar, but whenever I make the content section larger it pushed the sidebar to the right off the page, and doesn't move to the left...any ideas?

thanks

 

site is

http://www.pittsburghfrugalmom.com/

[Metro]

Hi folks, I'm hoping someone can help me with a few Metro questions that I can't seem to find the answer to. Unfortunately the site is in development so I can't share the link, but any help would be most appreciated.

1. I want to position a 728x90 ad in the header to the right of a 270x90 logo. However, the header-right widget area is too small and cuts off the ad. I tried adjusting the #header and #widget-area properties in the theme's css but it had zero effect. Would someone be able to provide the exact code/adjustments needed to make the ad sit snugly to the right of the logo?

2. I'm also trying to position/wrap the post titles and post meta information on the homepage (not single page) to the right of the respective post thumbnails. Currently, they sit above the image, but I'd prefer them to be positioned like they are in the "Featured Bottom Widget" (i.e. to the right of the image and just above the excerpt), which I'm unable to use as our client requires the page navigation which disappears when using the content area widgets.

3. Finally, how can I adjust the width of the Metro theme? I'd like the main content area to be 650px and the sidebar 300px. Where in the code can I make this adjustment?

Thanks in advance for help with the above.

[heartattack247]

Hey Ed, the problem I believe you are seeing is that the video you have on the "Welcome!" page is that the video is not adjusting to a mobile size, am I right? If that is the issue you are referring to, you need to get your videos to behave properly with responsiveness.

This was an initial issue for me when switching TheRefugeCamp.com to the Outreach Theme due to the video on the homepage.

The fix to this was a great new plugin call "Fitvids for WordPress". You can simply search "Fitvids for WordPress" from your WordPress Dashboard under Plugins>Add New or you can download it directly from this link:

There was a small learning curve to getting this to work correctly, but it wasn't too bad.

Here are my Instructions as simple as I can explain them:

From your WordPress Dashboard go to Plugins>Add New
Search "Fitvids for WordPress"
Should be 1st on the list, currently version 2.1 (as of 03/02/2013), click "Install Now" and then click "Ok" when the box pops up.
After the plugin finishes installing, click "Activate Plugin".
Go to the FitVids settings page which will now be on your left-hand tool bar under Appearances >FitVids
Check the "Add jQuery 1.7.2 from Google CDN" box
In the "Enter jQuery Selector" box, type (or copy/paste) ".wrap"
In the "Enter FitVids Custom Selector" box, type (or copy/paste)"iframe[src^='https://maps.google.com/maps'], iframe[src^='https://www.google.com/calendar']"
Click "Save Changes" and you should be good to go.

A few notes:

This will for sure fix your video issue and make it responsive
This works decent with the embedded Google Maps iframe code
It doesn't seem to work very well at all with embedded Google Calendar (from my very quick testing). I set up a test page real quick (Click Here) and it does respond to manual browser width adjustment via desktop Chrome browser, but it gets pretty funky looking on the iPhone and doesn't look good at all and isn't remotely functional. (unlike the Google Maps, which is decent looking)

Here are a few websites I found helpful to understanding this plugin, how it works and what it does:

Developers Site:
http://fitvidsjs.com/

Developers Blog (w/ good video intructions):
http://css-tricks.com/video-screencasts/103-integrating-fitvids-js-into-wordpress/

Another Developers Blog (less helpful, but good information to understanding this progress of the solution) :
http://daverupert.com/2011/09/responsive-video-embeds-with-fitvids/

I hope this all helps for you to make some better progress. It will at least fix the video for sure and you can toy with other Map & Calendar solutions. I'm sure I will be diving into figuring out those issues myself in some near future Mobile Responsive builds.

[LionArcherWeb]

I am having more problems actually.  I removed the one code and my posts layout is clear but my homepage has the sidebar pushed down again.. and I have gray lines out of whack on the post pages. In a private reply I will post my url. Is there STILL something I am missing?

You will also need to do something with this image (my recommendation would be to remove it):
background: url(images/inner-cs.png);

From this area:

.content-sidebar #inner {
	background: url(images/inner-cs.png);
}

(This is an image which runs down the left of the sidebar, if you adjust your sidebar width, you need to move that image, or remove it altogether.

[lauradamb]

1. I use the Minimum theme and want to show the featured image on the home page.

2. When I set a featured image, it shows up as a thumbnail om the blog page, but in the post it shows in the header. Because of the sizing of photos, it looks dumb. How do I fix this design wise?

2. I want to adjust the width and length of the excerpt text and image ob both the home page and the blog posts page.

3. I want to change the text that says "From the Blog" on the blog post page.

http://www.lauradambrosio.com

Thanks.

[hivehealthmedia]

Yes, I believe so.

 

Here's my home.php file:

<code>

<?php
// Custom Home Page

add_action( 'genesis_before_loop', 'child_maybe_do_grid_loop' );
/**
* Before we get to the loop, see if we're anywhere but a single page. If so,
* swap out the standard loop for our grid loop.
*
* @author Gary Jones
* @link http://dev.studiopress.com/genesis-grid-loop-advanced.htm
*/
function child_maybe_do_grid_loop() {

// Amend this conditional to pick where this grid looping occurs
if ( ! is_single() && ! is_page() ) {

// Remove the standard loop
remove_action( 'genesis_loop', 'genesis_do_loop' );

// Use the prepared grid loop
add_action( 'genesis_loop', 'child_do_grid_loop' );

// Add some extra post classes to the grid loop so we can style the columns
add_filter( 'genesis_grid_loop_post_class', 'child_grid_loop_post_class' );
}
}

/**
* Prepare the grid loop.
*
* Takes care of existing query arguments for the page e.g. if it's a category
* archive page, then the "cat" argument is carried into the grid loop, unless
* it's overwritten in the $grid_args.
*
* @author Gary Jones
* @link http://dev.studiopress.com/genesis-grid-loop-advanced.htm
* @uses genesis_grid_loop() Requires Genesis 1.5
*/
function child_do_grid_loop() {

global $query_string, $paged;

// Ensure the arguments for the normal query for the page are carried forwards
// If you're using a Page to query the posts (e.g. with the Blog template), comment out the next line.
wp_parse_str( $query_string, $query_args );

// Create an array of arguments for the loop - can be grid-specific, or
// normal query_posts() arguments to alter the loop
if (is_home()) {
$grid_args = array(
'features' => 1,
'feature_image_size' => 'Home Thumbnail',
'feature_image_class' => 'alignleft post-image',
'feature_content_limit' => 400,
'grid_image_size' => 'grid-thumbnail',
'grid_image_class' => 'alignleft post-image',
'grid_content_limit' => 70,
'more' => __( 'Continue reading →', 'genesis' ),
'posts_per_page' => 0,
);
}
if (is_category() || is_author()) {
$grid_args = array(
'features' => 1,
'feature_image_size' => 'Home Thumbnail',
'feature_image_class' => 'alignleft post-image',
'feature_content_limit' => 400,
'grid_image_size' => 'grid-thumbnail',
'grid_image_class' => 'alignleft post-image',
'grid_content_limit' => 70,
'more' => __( 'Continue reading →', 'genesis' ),
'posts_per_page' => 9,
);
}

// Make sure the first page has a balanced grid
if ( 0 == $paged )
// If first page, add number of features to grid posts, so balance is maintained
$grid_args['posts_per_page'] += $grid_args['features'];
else
// Keep the offset maintained from our page 1 adjustment
$grid_args['offset'] = ( $paged - 1 ) * $grid_args['posts_per_page'] + $grid_args['features'];

// Merge the standard query for this page, and our preferred loop arguments
genesis_grid_loop( array_merge( (array) $query_args, $grid_args ) );

}

/**
* Add some extra body classes to grid posts.
*
* Change the $columns value to alter how many columns wide the grid uses.
*
* @author Gary Jones
* @link http://dev.studiopress.com/genesis-grid-loop-advanced.htm
*
* @global array $_genesis_loop_args
* @global integer $loop_counter
* @param array $classes
*/
function child_grid_loop_post_class( $grid_classes ) {
global $_genesis_loop_args, $loop_counter;

// Alter this number to change the number of columns - used to add class names
$columns = 3;

// Only want extra classes on grid posts, not feature posts
if ( $loop_counter >= $_genesis_loop_args['features'] ) {

// Add genesis-grid-column-? class to know how many columns across we are
$grid_classes[] = sprintf( 'genesis-grid-column-%s', ( ( $loop_counter - $_genesis_loop_args['features'] ) % $columns ) + 1 );

// Add size1of? class to make it correct width
$grid_classes[] = sprintf( 'size1of%s', $columns );
}
return $grid_classes;
}

/** Move the nave to the end of page */
remove_action('genesis_after_endwhile', 'genesis_posts_nav');
//add_action('genesis_after_content', 'genesis_posts_nav');
// add actions and filters to only the home page for the teasers.
// if your blog isn't on the home page swap out "is_home()" to where your blog may be.
// for example: is_page_template('blog.php')
add_action('wp', 'enable_post_teaser_logic');
function enable_post_teaser_logic() {
if( genesis_get_option('teasers_enable') == 1 ) {
if (is_home() ) {
remove_action('genesis_post_content','genesis_do_post_content');
add_action('genesis_post_content','genesis_do_teaser_content');
add_action('genesis_before_post','post_teaser_do_open', 10, 2);
add_action('genesis_before_post','post_teaser_pertwo_wrap_open', 15, 2);
add_action('genesis_after_post','post_teaser_pertwo_wrap_openclose');
add_action('genesis_after_endwhile','post_teaser_pertwo_wrap_close', 5, 2);
add_action('genesis_after_endwhile','post_teaser_do_close', 6, 2);
add_filter('genesis_options', 'define_content_archive_home_setting', 10, 2);
add_filter('post_class', 'add_oddeven_class');
if( genesis_get_option('disable_teaser_meta') == 1 ) {
remove_action('genesis_after_post_content', 'genesis_post_meta');
add_filter('genesis_after_post_content', 'genesis_post_meta_teaser_logic');
}
}
}
}

// adds a class of odd-post or even-post
// to the post class depending on the count of the loop.
function add_oddeven_class($classes){
global $post, $loop_counter;

$oddeven = ($loop_counter&1) ? "odd-post" : "even-post";
$classes[] = $oddeven;

return $classes;
}

// This makes sure the_content is shown as default on homepage.
function define_content_archive_home_setting($options, $setting) {
if($setting == GENESIS_SETTINGS_FIELD) {
$options['content_archive'] = 'full';
}
return $options;
}

// Makes the teaser use the excerpt.
function genesis_do_teaser_content() {
global $loop_counter;

if( $loop_counter >= genesis_get_option('numof_full_posts') || is_paged() >= 2 ) {
the_excerpt();
if ( genesis_get_option('readmore_on_teasers') == 1 ) {
echo'<a class="more-link" href="'.get_permalink().'">[Read more...]</a>';
}
} else {
the_content(__('[Read more...]', 'genesis'));
}
}

// This will remove post meta on teaser posts
function genesis_post_meta_teaser_logic() {
global $loop_counter;
if ( is_page() || $loop_counter >= genesis_get_option('numof_full_posts') || is_paged() >= 2 )
return; // don't do post-meta on pages or teasers

$post_meta = '<span class="categories">Filed Under: </span> ';
printf( '
<div class="post-meta">%s</div>
', apply_filters('genesis_post_meta', $post_meta) );

}

// Wraps the post teaser area with its own div.
function post_teaser_do_open() {
global $loop_counter;

if( !is_paged() && $loop_counter == genesis_get_option('numof_full_posts') || is_paged() >= 2 && $loop_counter == 0) {
echo '
<div id="post-teasers">';
}
}
//Opens the div for the first pair of teasers. This helps to keep the area of two
//the same height so can have a flexible height for the teasers.
function post_teaser_pertwo_wrap_open() {
global $loop_counter;

if( !is_paged() && $loop_counter == genesis_get_option('numof_full_posts') || is_paged() >= 2 && $loop_counter == 0) {
echo '
<div class="post-teasers-pair">';
}
}

// Wraps the a pair of teasers with their own div. This helps to keep the area of two
//the same height so can have a flexible height for the teasers.
function post_teaser_pertwo_wrap_openclose() {
global $loop_counter, $posts;
if( $loop_counter == get_option('posts_per_page' )-1 || $loop_counter == sizeof($posts)-1 ) return;
if( !is_paged() && $loop_counter > genesis_get_option('numof_full_posts') && $loop_counter % 2 || is_paged() >= 2 && $loop_counter % 2) {
echo '</div>
<div class="post-teasers-pair">';
}
}

// Closing div to teaser pairs.
function post_teaser_pertwo_wrap_close() {
global $loop_counter;

if( $loop_counter >= genesis_get_option('numof_full_posts') || is_paged() >= 2 ) {
echo '</div>
';
}
}
// Closing div to post teaser area.
function post_teaser_do_close() {
global $loop_counter;

if( $loop_counter >= genesis_get_option('numof_full_posts') || is_paged() >= 2 ) {
echo '</div>
';
}
}
// Remove the post meta function
remove_action('genesis_after_post_content', 'genesis_post_meta');
?>

</code>

[Brad Dalton]

No worries Karla.

It was pretty easy really.

The only issue is the CSS which needs adjusting for the widgets because of the width but everything else worked fine.

Admin1.

I think its just a matter of editing the CSS based on the width but there must be another way to do it also.

Seemed pretty straight forward when i tested it.

If you don't need the left and right middle widgets then it would be even easier as you shouldn't need to edit the CSS until you get it right.

---

Get Help – Book Consultation.

[Brad Dalton]

Adjust the code in your child themes functions.php with your custom values.

// Add support for custom header
add_theme_support( 'genesis-custom-header', array(
	'flex-height'	=> true,
	'height'		=> 100,
	'width'			=> 300
) );

Upload your header using the custom header page under Appearance

Link to your site please.

---

Get Help – Book Consultation.

[ameeker]

I had this same question today, except using the Executive theme, and with the intent to use a tiled gallery in a widget in an area that is full width on the home page. When I asked over at the WP forums, they suggested I look to the TwentyTwelve theme for direction on how to filter the content width per page template, which I tried using this below, but it didn't work (used in the functions file, and took out a || ! is_active_sidebar( 'sidebar-1' ) along the way in the original example here: http://core.trac.wordpress.org/browser/trunk/wp-content/themes/twentytwelve/functions.php#L414).

`

/**
* Adjusts content_width value for full-width and single image attachment
* templates, and when there are no active widgets in the sidebar.
*
* @since Twenty Twelve 1.0
*/
function twentytwelve_content_width() {
if ( is_page_template( 'page-templates/home.php' ) || is_attachment() ) {
global $content_width;
$content_width = 1140;
}
}
add_action( 'template_redirect', 'twentytwelve_content_width' );`

 

Any thoughts about how to get that to work?

---

Looking for Genesis website design backed by strategy? http://www.angiemeekerdesigns.com

[Fabio]

Hi there,
thanks for reading this thread 🙂

I'm looking for a full width layout for my blog posts.
But I want it to have a custom width and centered, including centering the post title (very important).

I don't know if what I just wrote is clear enough 🙂
I basically want the text in my full width page to be let's say not wider than 3 inches
and centered so that the reader has an optimal reading experience.
(Ideally it would be great and amazing and marvelous if everything around my post content would fade out while my reader is reading and then maybe fade in again when he points the mouse around my post,
but maybe I'm asking too much and I would need to pay $1M to someone to do that 🙂 so let's go with the
simple custom centered width for today).

Oh! Please don't take for granted I know about coding, because I don't 🙂
So in your answer please write also things that you would suppose I know, like if I'm your grandpa 🙂
(unless you are Bill Gates' grandson)
Thx
Fabio

Theme Eleven 40

[MarkAsacker]

He Anita! Thanks for the quick response.

You're right...I did make custom changes to the CSS and I did remove the responsive code.

The custom changes to the CSS have been restored to the default CSS. The only changes now are to things that should NOT have any bearing on how the site displays like color, fonts, etc.

The responsive code was removed because I figured if it would NOT "respond" nicely I would just have the desktop version without the quirks brought on by the responsive code.

I use Firefox and also have Google Chrome and IE8 installed on my computer. I run XP so I can't install IE9 but I'm using "Browsershots.com" and "DebugBar" to see how they render in other browsers. Everything is cool in Firefox, Chrome and Safari but still IE...all versions... have problems, especially with the responsive slider which, at this point is my biggest concern.

The excerpt area disappears when the screen width reaches a certain point. AND it's on purpose....here's the CSS to show that it's told to disable the excerpt view and directional nav links for mobile....

#content #genesis-responsive-slider .flex-control-nav.nav-pos-excerpt,
#content #genesis-responsive-slider .flex-direction-nav li a,
#content #genesis-responsive-slider .flex-direction-nav li a.prev {
display:none;
}

This doesn't make any sense to me. It seems as though the author couldn't figure it out so they just decided to disable it. While I don't care so much about the navigational arrows I do care about the excerpt...it should remain visible and adjust the font size accordingly. I've tried to make it work but haven't been able to...If I remove "display:none;" the text ends up too big because the excerpt area shrinks to 29% and the "continue reading" link to the featured page disappears.

Any Ideas?

[vpkeale]

Hi all!

I'm having a hard time trying to edit the image display on the blog page - with the going green demo the featured image is full page width above the title for the blog page. I would like to use the 150x150 thumbnail and have it align with the text instead of being above the title. Kinda like how the standard excerpt is - title, meta data, image aligned left to excerpt text.

I have not found any success in finding where this is set up so I can adjust it. Anyone have ideas on how to help?

The page is: http://www.venturewalk.com/category/general/

Any suggestion would be much appreciated!!!

Victoria

 

[wendycholbi]

If your footer widgets no longer fit (the Footer 3 widgetized area appears to be “bumped down” and not aligned with Footer 1 and Footer 2), adjust the widths of the three widgetized footer areas by adding this snippet to Genesis > Custom Code > Custom CSS:

/*adjust the width of the widgetized footer areas*/
.footer-widgets-1 {
width: 275px;
}
.footer-widgets-2 {
margin: 0 20px 0 0;
width: 270px;
}
.footer-widgets-3 {
width: 275px;
}

If your text footer no longer fits (this looks like the “return to top” link on the bottom left of the page is not on the same horizontal line as the footer information on the bottom right), adjust the widths of the two text footer sections by adding this snippet to Genesis > Custom Code > Custom CSS:

/*adjust the width of the text footer*/
#footer .gototop {
width: 190px;
}
#footer .creds {
width: 715px;
}

Adjust the widths to suit your site.

Did you recently update from Prose 1.0 to Prose 1.5? These footer issues are common after such an update (in fact, my instructions here are from my tutorial on updating Prose).

Hope this helps!

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[Green Being]

I am using the Executive Theme under Genesis.  Working on XAMPP development site (not live yet).  My goal is to make the first page lay out exactly like the Demo.  Got the header and menu locked in so far, but the slider has been a problem.  At first it looked okay except for the images being left justified under the caption area or so it seemed.  After a lot of work get the CSS to be exactly like the demo CSS for the slider (using Firebug) I punted and deleted the images from the Portfolio where they were being selected by the slider.  I started to reload larger ones 1040 X 445 and right justifying them.  Still no go and in fact the height of the slider shrunk to about 15px.  But the width is 100%.

What the heck is going on?  I cannot get this adjusted at all  The pictures are loading, because I can click on them and display those images.  My home page is "latest posts" and not static.  I have tried so many different combinations to find a clue, but nothing seems to budge the height.  the CSS look right on.  The arrows display okay too.  But the height is collapses.  Tried it on Firefox and IE.  Same results.  Thoughts?

[Susan]

@jtooth - when did you submit a support ticket to the PDCD help desk? I've just recently started volunteering over there to help answer tickets, and I can't imagine anyone telling you they don't have time!

Take a look at this markup guide - it shows you what areas you would need to adjust if you want to make any changes.

http://www.studiopress.com/images/gen_markup.png

As far as the Genesis slider - it looks like you have your site set up as a blog. If you use the "magazine" layout, you would need to add content into the other widget areas to make them appear on the front page, below your slider.

Let me know if you need more specific advice.

 

[dogleg.com]

Thanks for replying!

The Footer #1 and #2 are not sidebars, they are in the footer area, at the bottom of the page.  But I think what you are saying is that there is no room for more, just one in each.

(I looked at the link, but those instructions are usually over my head, because I have no experience with this) When you say:

.footer-widgets-1

do you mean that is how my CSS adjustment should start out, or should I look for that area in my css.style page??  I know I can make CSS changes in my custom CSS area, I just need to know how to start out my first line.

 

One other thing---my comment box is only three-sided: top, bottom and left--the right side is  cut-off (invisible). Is that a column-width thing, and if so, what does the code look like/start with so I can adjust the correct one?

Thanks so much

Paula

[Bill Murray]

The Metric theme uses home.php. The instructions you linked to are designed to use an internal page for a home page, which isn't really what you are trying to do.

For your needs, you would be better to a) restore the original home.php and edit it to suit your needs b) add widget areas or adjust the styling of existing widgets.

For (b), Metric already has home middle widgets. You could put recent posts in a widget area. If you want that area to be full width, all you need to do is adjust the styling of the home middle widgets (ie, make the home middle widget 1 full width and float left).

Hope that helps.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Diversified Woman]

In the primary sidebar area I wish to place a few banner ads which are 300W x 250L  as well as ad space for two columns of 125 x 125 ads. Right now the width is set to 270. When I changed that to 315 for example it didn't do anything, nor made the space for the ads any bigger, although it did make the sidebar appear further down the page.

However when I tried to add a 300 x 250 banner it does not fit without distortion. The Google adsense ad for example is definitely outside the boundary. It extends out on the right hand side and when I tried to widen the sidebar pixel-wise as I mentioned before, it then kicked the  primary sidebar area all the way down to the bottom of the page. How do I adjust this in the theme so that everything will fit? I realize I would have to make the area to the left of it, for the "actual posts" a bit narrower to accommodate the larger sidebar as well, and thats OK,  but not quite understanding where and what I need to enter in to make this all happen in my CSS. I have inserted even the 125 x 125 ads which should appear side by side and the are falling one below the other. Also the rectangle 300 x250 ads are not displaying to their correct size either. They should be much larger. I just need to know what settings to change in the code below so this all fits like its suppose to.

I am assuming this is the code as as part of my child theme CSS  that I need to edit but not sure what I need to edit in this to make it work.

 

[wp guy]

One way to do it - below. Look in your CSS and in this example I set the home.middle-2 width with to 0 and adjusted the widths of the other areas. Of course, you can play with it as you want.

.home-middle-1 {
float: left;
width: 600px;
margin: 0;
padding: 0 20px 0 0;
}

.home-middle-2 {
float: left;
width: 0px;
margin: 0;
padding: 0;
}

.home-middle-3 {
float: right;
width: 305px;
margin: 0;
padding: 0;
}

[Anita]

Okay so now, you need to add this to the bottom of your CSS - this is the CSS for Featured Page 1 widget area:

#featured-page-4 {
width: 300px;
float: right;
}

Then we have to adjust the slider. Change this to about 960 for now:

.home-featured {
width: 500px;
}

Then, change the SLIDER width to about 525px.

Let's see how that looks.

---

Love coffee, chocolate and my Bella!