Can't increase $content_width in child theme

Tagged: jetpack, layout, tiled gallery

This topic has 6 replies, 2 voices, and was last updated 9 years, 7 months ago by name.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
April 21, 2015 at 8:24 am #56299
name
Member
Hi and thanks for this free nice theme which so far is also proving to be very solid.

First I’d like to say that this has been cross-posted to https://github.com/Automattic/jetpack/issues/1989# because I’m not sure where the problem is coming from.

Basically I wanted to enlarge the theme content area (for single column layout) to take more space and I easily accomplished that with:
```
.no-sidebar.content-width #main {
   width: 920px;
}
```
Everything is ok with this, except pictures contained in a Jetpack tiled gallery (which is a mosaic like kind of gallery), would not fill the new available width, giving the impression that the gallery is aligned to the left, while the gallery container is actually correctly centered (“tiled-gallery type-rectangular” div).

So Jetpack devs stated that it could be because their gallery is dependant on the existance of a $content-width value (http://jetpack.me/support/tiled-galleries/#content-width) which obviously is already set in your theme.

What I tried then was to increase $content_width in my catch-base child theme’s functions.php to a higher value than the one set in inc/catchbase-core.php (780) setting it to 900.

But for some reason this doesn’t work, and the gallery would only look centered (i.e. the images in it would fill it completely) only if .no-sidebar.content-width #main is not higher than the original 820px.

With one big exception, that is, when I change $content_width in the parent theme (catch-base itself)! In that case everything works as expected.

I’m kindly asking if you could give me a hand here.. because not exactly being a WordPress hero, this had me totally frustrated for the last 4 hours…

Thanks a lot, really!
A dozen +1 to you in adv! 🙂
April 21, 2015 at 9:18 pm #56345
Sakin
Keymaster
@name:
1. For child theme and sample Catch Base child theme, you can download it from http://catchthemes.com/blog/create-child-theme-wordpress/.

2. Then add the following code in your child theme functions.php file
```
/**
 * Loading Content Width
 */
function catchbase_content_width() {
	global $post, $wp_query, $content_width;

	//Getting Ready to load options data
	$options					= catchbase_get_theme_options();
	
	$themeoption_layout 		= $options['theme_layout'];
	
	// Front page displays in Reading Settings
	$page_on_front = get_option('page_on_front') ;
	$page_for_posts = get_option('page_for_posts');

	// Get Page ID outside Loop
	$page_id = $wp_query->get_queried_object_id();

	// Blog Page or Front Page setting in Reading Settings
	if ( $page_id == $page_for_posts || $page_id == $page_on_front ) {
        $layout 		= get_post_meta( $page_id,'catchbase-layout-option', true );
    }
	elseif ( is_singular() ) {
 		if ( is_attachment() ) { 
			$parent = $post->post_parent;
			
			$layout = get_post_meta( $parent,'catchbase-layout-option', true );
		} 
		else {
			$layout = get_post_meta( $post->ID,'catchbase-layout-option', true ); 
		}
	}
	else {
		$layout='default';
	}

	//check empty and load default
	if( empty( $layout ) ) {
		$layout = 'default';
	}

	if ( $layout == 'no-sidebar' || ( $layout=='default' && $themeoption_layout == 'no-sidebar' ) ) {
		$content_width = 920;
	}
	elseif ( $layout == 'right-sidebar' || $layout == 'left-sidebar' || ( $layout=='default' && $themeoption_layout == 'right-sidebar' ) || ( $layout=='default' && $themeoption_layout == 'left-sidebar' ) ) {
		$content_width = 780;
	}	
}
```
Then add the following css in your child theme style.css
```
@media screen and (min-width: 940px) {
	.no-sidebar.content-width #main {
		width: 920px;
	}
}
```
April 22, 2015 at 12:59 am #56374

name
Member

Thanks for your answer!
So basically you are saying that in my child-theme’s functions.php I need to override the whole function catchbase_content_width() and not just $content_width var ?

Just to understand what is going on, is this necessary because $content_width in my child-theme functions.php will be overwritten when catchbase_content_width() is called, meaning that that function is called after my $content_width = x ?

Is there something else to it? Something else is different in the function?
Thanks a lot!

April 22, 2015 at 1:19 am #56379
Sakin
Keymaster
@name: Yes, as you are using No Sidebar, Content Width layout. Yes, you don’t need to change global content_width variable. You need to add the above code catchbase_content_width() which I gave you. There in that functions, I just change width for No Sidebar, Content Layout. The following code is extra in that function:
```
if ( $layout == 'no-sidebar' || ( $layout=='default' && $themeoption_layout == 'no-sidebar' ) ) {
		$content_width = 920;
	}
```
April 22, 2015 at 8:33 am #56395

name
Member

Thanks for the extra clarification!!! Actually can’t thank you enough.. so, thanks again, appreciated 🙂

April 22, 2015 at 8:49 am #56398

Sakin
Keymaster

@name: Thanks for your appreciation and if you like Catch Base theme and support that I provided you. Please provide your valuable review and rating at https://wordpress.org/support/view/theme-reviews/catch-base?rate=5#postform. Thanks 🙂

April 22, 2015 at 2:22 pm #56410

name
Member

Sure! Bye 🙂
Author

Posts