bczegeny

figured it out for anyone else trying to do this

.vertical-align-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: table;
  text-align:center;
}

.vertical-align {
  display: table-cell;
}

.vertical-align--middle {
  vertical-align: middle;
}
.excerpt-content {
  padding-bottom: 0px!Important;
}

in the customizer css

opened up content.php in the editor scroll to the bottom and where you see
// otherwise output Featured Image select all the code from after that and replace it with

else {
		    echo '<a class="featured-image-link" href="' . get_permalink() . '">';
                ct_tracks_featured_image();
            echo '</a>';
	    }
	    ?>
        <div class="excerpt-container vertical-align-wrap">
	<div class="vertical-align vertical-align--middle">
	    <?php
            if(get_theme_mod('premium_layouts_setting') == 'full-width-images' || get_theme_mod('premium_layouts_setting') == 'two-column-images'){ ?>
                <div class="content-container">
            <?php } ?>
            <div class="excerpt-meta">
                <?php get_template_part('content/post-meta'); ?>
            </div>
            <div class='excerpt-header'>
                <h1 class='excerpt-title'>
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h1>
            </div>
            <div class='excerpt-content'>
                <article>
                    <?php ct_tracks_excerpt(); ?>
                </article>
            </div>
	    </div>
            <?php
                if(get_theme_mod('premium_layouts_setting') == 'full-width-images' || get_theme_mod('premium_layouts_setting') == 'two-column-images'){ ?>
                </div>
            <?php } ?>
        </div>
    </div>
<?php
}

Hope this helps anyone else out

very much appreciate all your support. The first css works perfect. I had a thought though would it be easier to add a wrapper div just above excerpt-container. Then you could basically always have the content no matter what centered. Id remove the bottom padding on the excerpt-content div to make as truly centered

something like this
then it would be dynamic. Im not sure where to add in the extra div. Checking the theme files now.

Works exactly as needed. Now to make it if I purchase additional layouts and want to mix them all together hmmmm…

ok this css will make all posts of whatever css class you want display in the default layout. All other posts will use the full-width layout.

Just paste it in the custom css field in your customize section.

.home .archive, .full-width .YOUR-CSS-CLASS-HERE .excerpt.even .featured-image,
.full-width .YOUR-CSS-CLASS-HERE .excerpt.even .featured-video {
  right: 0;
}
.home .archive, .full-width .YOUR-CSS-CLASS-HERE .featured-image {
    height: 100%;
    padding-bottom: 0;
    position: absolute;
    right: -1px;
    transform: translateZ(0px);
    width: calc(50% + 2px);
}
.home .archive, .full-width #main .YOUR-CSS-CLASS-HERE .excerpt-container {
    padding: 0 5.55%;
    width: 50%;
}
.home .archive, .full-width.full-post .YOUR-CSS-CLASS-HERE .excerpt-content {
  text-align: center;
}
.singular-post.full-width .featured-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  right: 0;
}

To use all posts within a category use .category-NAME
for all posts with a certain tag use post_tag-TAG

ok that works but when I click on a post the featured image is all out of wack

ok so I got the styles from the full-width css you linked above (I only changed the full width ones for now)

and copied the values from the standard layout put this css in the customizer and it still does not work

.full-width .category-events-galleries .excerpt.even .featured-image,
.full-width .category-events-galleries .excerpt.even .featured-video {
  right: 0;
}
.full-width .category-events-galleries .featured-image {
    height: 100%;
    padding-bottom: 0;
    position: absolute;
    right: -1px;
    transform: translateZ(0px);
    width: calc(50% + 2px);
}
.full-width #main .category-events-galleries .excerpt-container {
    padding: 0 5.55%;
    width: 50%;
}
.full-width.full-post .category-events-galleries .excerpt-content {
  text-align: center;
}

Blah

hmm ok im trying to make that work using the category class category-events-galleries

something like this

.full-width .excerpt.even .featured-image .category-events-galleries,
.full-width .excerpt.even .featured-video .category-events-galleries {
  right: 50%;
}

that does not produce any effect though

So I purchased the full width layout tried your code(assuming I add it to functions.php) and tried mine.

Your code just does not work even if I’m viewing the category archive page. My code also doesn’t work. both however do update the classes for the respected elements. It just seems to have no effect.

function my_add_post_class( $classes ) {
  $my_post_class = 'full-width';
  if( !is_category('5') ) {
    $classes[] = $my_post_class;
  }
  return $classes;
}
add_filter( 'post_class', 'my_add_post_class' );

would that work by just adding it to the functions.php after I purchase the full width. Thinking if I had the regular theme enabled with the full width unlocked after putting in the license?

I think we are getting closer but not exactly what I’m looking to do. I want the layouts to mix into the post list like this

(photoshop created)
https://www.momentsafterdark.ca/wp-content/uploads/2015/03/tracks-mixed-theme-post-layout.jpg

So any post apart of a specified category or has a specific tag/post type whatever I wanna use (category is probably the easiest) it will change the css for that post in the list.

something to this effect

$isfullwidth = has_category("fullwidth", $post);
  if ($isfullwidth === True) {
    //add .full-width class to div.post where needed
  } else {
    //output div.post as normal
}

this could be in the content post loop or its own function that is called in the loop that returns the string of text that needs to be added to the div to apply the full=width class.
Then any post apart of whatever category in this case”fullwidth” would use the full width layout. You could actually take this further and add an options in the admin settings to specify what category you want to use for each layout.

I do not know how you output each post and apply classes to them otherwise I could probably implement this

I am going to have more photography gallery posts then full width blog posts. So wouldn’t make more sense to use the custom post type for the full width ones and do kind of the reverse of what you suggested. Then the site would be doing less processing because 80% of the posts will be formatted the standard way

Hey Ben!,

I finally figured it out using .singular-post tags and .home tags. Lots of googling went on last night lol. I have another question but will start another thread as I’m sure some people will have the same question

hello

I am trying to move the position of the logo down over the single post. My home page is just the latest posts. And I tried to utilize the suggested code above with some tweaks but for some reason .home does not specify my home page when using just recent posts

any help would be appreciated