Blog Styling / Post Meta / Blog Menu

gra_gra_grafik · March 30, 2019, 10:43am

I would chance some stuff in blog articles:

How can i change the padding on the article?
I would like to have in the “post meta” just the date without a image. Only text.
How i can define the style of the “post meta” font?
I don’t need a Links to the single blog, i show all content in the newsfeed. Is there a posibility to deacitvate the links?

How i can design the Menu to see older Post. Font / Color / Size of the Buttons / Round Edges…

Thanks a lot for you Support!

ruenel · March 30, 2019, 11:40am

Hello Dani,

Thanks for writing in!

1.) To change the padding on the article, please update your code with the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.page-template-template-blank-1 .entry-wrap,
.page-template-default .entry-wrap,
.entry-wrap{
  padding:30px;
}

2.) For the meta, we will have to modify the post meta function. Since the child theme is set up, please add the following code in your child theme’s functions.php file

// Integrity Custom Entry Meta
// =============================================================================

if ( ! function_exists( 'x_integrity_entry_meta' ) ) :
  function x_integrity_entry_meta() {

    //
    // Author.
    //

    $author = sprintf( '<span> %s</span>',
      get_the_author()
    );


    //
    // Date.
    //

    $date = sprintf( '<span><time class="entry-date" datetime="%1$s"> %2$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date() )
    );


    //
    // Categories.
    //

    if ( get_post_type() == 'x-portfolio' ) {
      if ( has_term( '', 'portfolio-category', NULL ) ) {
        $categories        = get_the_terms( get_the_ID(), 'portfolio-category' );
        $separator         = ', ';
        $categories_output = '';
        foreach ( $categories as $category ) {
          $categories_output .= '<a href="'
                              . get_term_link( $category->slug, 'portfolio-category' )
                              . '" title="'
                              . esc_attr( sprintf( __( "View all posts in: &ldquo;%s&rdquo;", '__x__' ), $category->name ) )
                              . '"> '
                              . $category->name
                              . '</a>'
                              . $separator;
        }

        $categories_list = sprintf( '<span>%s</span>',
          trim( $categories_output, $separator )
        );
      } else {
        $categories_list = '';
      }
    } else {
      $categories        = get_the_category();
      $separator         = ', ';
      $categories_output = '';
      foreach ( $categories as $category ) {
        $categories_output .= '<a href="'
                            . get_category_link( $category->term_id )
                            . '" title="'
                            . esc_attr( sprintf( __( "View all posts in: &ldquo;%s&rdquo;", '__x__' ), $category->name ) )
                            . '"> '
                            . $category->name
                            . '</a>'
                            . $separator;
      }

      $categories_list = sprintf( '<span>%s</span>',
        trim( $categories_output, $separator )
      );
    }


    //
    // Comments link.
    //

    if ( comments_open() ) {

      $title  = apply_filters( 'x_entry_meta_comments_title', get_the_title() );
      $link   = apply_filters( 'x_entry_meta_comments_link', get_comments_link() );
      $number = apply_filters( 'x_entry_meta_comments_number', get_comments_number() );

	    $text = ( 0 == $number ) ? __( 'Leave a Comment', '__x__' ) : sprintf( _n( '%s Comment', '%s Comments', $number, '__x__' ), $number );

$comments = sprintf( '<span><a href="%1$s" title="%2$s" class="meta-comments"> %3$s</a></span>',
        esc_url( $link ),
        esc_attr( sprintf( __( 'Leave a comment on: &ldquo;%s&rdquo;', '__x__' ), $title ) ),
        $text
      );

    } else {

      $comments = '';

    }


    //
    // Output.
    //

    if ( x_does_not_need_entry_meta() ) {
      return;
    } else {
      printf( '<p class="p-meta">%1$s%2$s%3$s%4$s</p>',
        $author,
        $date,
        $categories_list,
        $comments
      );
    }

  }
endif;
// =============================================================================

3.) To define the style of the “post meta” font, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.p-meta {
  font-size: 1em;
}

4.) To deactivate the links in the post titles, please make use of this code:

.blog h2.entry-title a,
.archive h2.entry-title a{
  pointer-events: none;
}

5.) You can tweak the menu items in X > Theme Options > Header > Links - Text. And you need to add another menu item in Appearance > Menus that will be linked to the page 2 of your home blog index.

We would loved to know if this has work for you. Thank you.

gra_gra_grafik · March 30, 2019, 1:09pm

Thanks a lot for the support, unfortunately not everything works yet.

The Post Meta doesn’t show the icons, that’s great, but still all text, I just want the date. What do I have to change?
At the menu for the blog, I need the pro theme, how does it work?

The rest works great, Thanks a lot!

ruenel · March 30, 2019, 1:20pm

Hi Again Dani,

If you only want to display a date, please use this PHP code instead:

// Integrity Custom Entry Meta
// =============================================================================

if ( ! function_exists( 'x_integrity_entry_meta' ) ) :
  function x_integrity_entry_meta() {



    //
    // Date.
    //

    $date = sprintf( '<span><time class="entry-date" datetime="%1$s"> %2$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date() )
    );


    //
    // Output.
    //

    if ( x_does_not_need_entry_meta() ) {
      return;
    } else {
      printf( '<p class="p-meta">%1$s</p>', $author);
    }

  }
endif;
// =============================================================================

For the menu, you are using Pro theme so basically you can edit the header and add a menu for your blog.

Hope this helps.

gra_gra_grafik · April 6, 2019, 1:23pm

Hey Support, with the new code there’s nothing of Post Meta left. It show’s nothing as well not the date… Can you help me?

ruenel · April 6, 2019, 1:50pm

Hey Dani,

Sorry for the Typo error. Please use this code instead:

// Integrity Custom Entry Meta
// =============================================================================

if ( ! function_exists( 'x_integrity_entry_meta' ) ) :
  function x_integrity_entry_meta() {



    //
    // Author.
    //

    $author = sprintf( '<span> %s</span>',
      get_the_author()
    );


    //
    // Output.
    //

    if ( x_does_not_need_entry_meta() ) {
      return;
    } else {
      printf( '<p class="p-meta">%1$s</p>', $author);
    }

  }
endif;
// =============================================================================

Please let us know how it goes.

gra_gra_grafik · April 6, 2019, 2:53pm

Thanks a lot now it works well with this changes:

    // Integrity Custom Entry Meta
// =============================================================================

if ( ! function_exists( 'x_integrity_entry_meta' ) ) :
  function x_integrity_entry_meta() {


    // Date.
    //

    $date = sprintf( '<span><time class="entry-date" datetime="%1$s"> %2$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date() )
    );


    //


    //
    // Output.
    //

    if ( x_does_not_need_entry_meta() ) {
      return;
    } else {
      printf( '<p class="p-meta">%1$s</p>', $date);
    }

  }
endif;
// =============================================================================

One last question, how i can change the buttons to switch to older sites.

If i change in the theme options the buttons, theres no effect in the blog area.

Thanx a lot!

rad · April 6, 2019, 10:10pm

Hi Dani,

What do you mean to switch to older sites? If it’s just about change the style of the the pagination then button styling will not work. The paginations aren’t button, they are simply a list of link styled as button. It’s styling is inherited from the links color from Theme Options > Typography > SITE LINKS then the idle styling is inherited to the pre-coded design of the active stack or design. Example,

You can change the link color to Blue and the pagination active color will be blue while idle buttons remain white since Integrity is light. Then switch to Integrity Dark then the idle buttons will be black.

In other words, the best way to change this is through CSS since you don’t want to change your links color just for the pagination. Please add this CSS to Theme Options > CSS with your preferred color.

.x-pagination a, .x-pagination span {
    color: #a6a6a6;
    background-color: #121212;
}
.x-pagination span.current {
    color: #fff;
    background-color: #ff2a13;
 }

Thanks!

system · April 16, 2019, 10:10pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.