[Stanley TanParticipant]

Hi, how do you change category and tags layout to be like this without changing the stack?
http://theme.co/x/demo/integrity/1/blog/

[Prasant RaiModerator]

Hello Stanley,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[Stanley TanParticipant]

http://www.owlguru.com/category/blog/
http://www.owlguru.com/tag/green-careers/
Here are 2 urls. 1 for the category blog and 1 for a tag page.

We’re looking to change the format for all the category and tag.

[LelyModerator]

Hello Stanley,

Thank you for giving us your site URL.
Unfortunately, mixing stack design is possible via custom development which is outside the scope of our support. Please note that those template is dependent on the customizer settings when stack is set to integrity. We have to manually supply the variables to achieve those settings/design when using Renew. Category pages uses the file index.php from wp-content\themes\x. We can create a file category.php on wp-content\themes\x-child then copy the index.php content. Then you can use this template to customize the category pages. If you’re not comfortable doing this you may wish to consult a developer. Thank you for understanding.

Always,
X

[Stanley TanParticipant]

How about these 2? Both of these are Renew which is the stack I’m using.
http://theme.co/x/demo/renew/7/blog/
http://theme.co/x/demo/renew/10/blog/

We don’t need the header, sidebar, footer, etc just the blog layout format.

[LelyModerator]

Hi Stanley,

Both of those demo content are using Masonry type of blog. In Appearance > Customize > Blog > Style: Choose Masonry and then on Columns: Choose Two.

Hope this helps.

[Stanley TanParticipant]

Nice! That works perfectly.

I got 2 css questions:
1. How do you move the title from being above the featured image to below it and remove the excerpt too?
*Attached screenshot 1 (ogcustom.png)*

2. How do you add a content band with headline, text and background above every tag and category pages?
*Attached screenshot 2 (ogcustom2.png & ogcustom3.png)*

[Rue NelModerator]

Hello There,

Moving the title from being above the feature image to below and removing the excerpt cannot be with just custom css. You need to have a custom template for this. Since you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Renew.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    
    <?php if ( is_single() ) : ?>

	    <?php x_get_view( 'renew', '_content', 'post-header' ); ?>
	    <?php if ( has_post_thumbnail() ) : ?>
	      <div class="entry-featured">
	        <?php x_featured_image(); ?>
	      </div>
	    <?php endif; ?>

	<?php else : ?>

	    <?php if ( has_post_thumbnail() ) : ?>
	      <div class="entry-featured">
	        <?php x_featured_image(); ?>
	      </div>
	    <?php endif; ?>

	    <?php x_get_view( 'renew', '_content', 'post-header' ); ?>

	<?php endif; ?>

    <?php x_get_view( 'global', '_content' ); ?>
  </div>
</article>

3] Save the file named as content.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/renew/

To add a content band with headline and text content and a background, please insert this following code in your child theme’s functions.php file.

// Add Custom banner for category and tag pages
// =============================================================================
function add_custom_category_and_tag_banner(){ ?>
  <?php if( is_category() || is_tag() ) : ?>

    <div id="custom-banner" class="x-section" style="margin: 0px;padding: 45px 0px;">
      <div class="x-container max width" style="margin: 0px auto;padding: 0px;">
        <div class="x-column x-sm x-1-1" style="padding: 0px;">
          
          <?php

            $meta  = x_get_taxonomy_meta();
            $title = ( $meta['archive-title'] != '' ) ? $meta['archive-title'] : 'Category Archive';

          ?>

          <h2 class="h-custom-headline cs-ta-center h3"><span><?php echo $title; ?></span></h2>

          <?php 

            if ( is_category() ){
              $desc = category_description();   
            } 

            if ( is_tag() ){
              $desc = tag_description();   
            }
            
            $desc = $desc != '' ? $desc : '<p>Please enter a decription by editing the category or tag. </p>';

          ?> 

          <div class="x-text">
            <?php echo $desc; ?>
          </div>

        </div>
      </div>
    </div>

  <?php endif; ?>
<?php }
add_action('x_before_view_global__script-isotope-index', 'add_custom_category_and_tag_banner');
// =============================================================================

And to add a background color or a background image to the custom banner section, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

#custom-banner {
    background-color: #e5e5e5;
    background-image: url(http://placehold.it/600x600);
}

Hope this would help you.

[Stanley TanParticipant]

It looks great now.
2 more things that we need are:
1. Removing excerpt
2. Adding a custom css to .entry-header (padding: 15px; font-size: 18px;)

How can we do that?

[RadModerator]

Hi there,

1. In that case, please add this as well

.category .entry-content.excerpt, .tag .entry-content.excerpt {
display: none;
}

2. Should be like this,

.category .entry-header, .tag .entry-header{
padding: 15px;
}
.category .entry-header a, .tag .entry-header a {
font-size: 18px;
}

Hope this helps.

[Stanley TanParticipant]

Perfect! Thank you so much for all the help.

[RupokMember]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts