Blog post page & landing page

Support
#1

Hello,

A few questions…

I would like to set my blog post page to a width of 800px

I would like to have the entry title to have a background repeat image that spans the entire page, not just the container width.

Include authors profile image in the Meta data?

Any assistance on this would be gratefully received.

Dan

#2

Hi Dan,

Thank you for writing in, since you’re using the PRO, you can build that posts banner as part of your header, either as your current header or a duplicate of your current header that will be assigned specifically to posts. You can utilize the Dynamic Content feature to have a dynamic headline title and author element. Then have the Bar containing it its background-pattern.

Work With Dynamic Content
Header and Footer Builder Overview

You can also utilize the social element for social sharing icons.

You can then hide the title on the content, and have the content container max-width of 800px.

Hope it helps,
Cheers!

#3

Awesome, thank you, I have been able to work out most of the above, however I have a couple of questions…

  1. How do I get the social icons to show vertically & to the right hand side of the content, as per in the example supplied…

  2. On the blog page (landing page, not post page) the header shows the very latest post, how would I be able to just show title or other content relative to the /blog/ page only?

Dan

#4

Hello Daniel,

Thanks for updating in!

1.) Please edit your header and make your bar to be positioned as absolute. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

2.) For the blog page title, you will need to insert a text element in your header which will display the title. You might be interested in this thread:

Hope this helps.

#5

Thanks, pls see below…

#6

Hello Daniel,

I have edited your header and removed the bar with the social icons. I was able to resolved it by doing the following.

1.) I went to Pro > Global Blocks and created a Socials block. This mainly contains the social icons.

2.) I added this custom php functions in your child theme’s functions.php file

// Add Socials global block
// =============================================================================
function add_custom_socials(){ ?>
  <div class="custom-socials">
    <?php echo do_shortcode('[cs_gb id=910]'); ?>
  </div>
<?php }
add_action('x_before_the_content_begin', 'add_custom_socials');

3.) And finally, I added this custom css in your child theme’s style.css

.single-post .custom-socials {
    float: left;
    width: 200px;
}

Please check your single blog posts now.

#7

Thank you very much…

  1. how would I get those icons to display horizontally above the blog text on mobile view?

2)I have the social icons also showing on the portfolio single post pages, can I remove them from those pages and show on blog single post pages only?

Thanks
Daniel

#8

Hello Daniel,

I went ahead and edited the global block. I aded this custom css in the column:

@media(max-width: 767px){
  $el{
    flex-direction: row !important;
    max-width: 100% !important;
  }
}

So that in smaller screens, the icons will display inline. I also edited the PHP function to make sure that it only display in your single blog posts. I modified the code into this:

// Add Socials global block
// =============================================================================
function add_custom_socials(){ ?>
  <?php if ( is_single() ) : ?>
	  <div class="custom-socials">
    	<?php echo do_shortcode('[cs_gb id=910]'); ?>
	  </div>
  <?php endif; ?>
<?php }
add_action('x_before_the_content_begin', 'add_custom_socials');

Lastly, I noticed that you added a custom css as well. I have updated it and use this code instead:

.single-post .entry-content {
   max-width: 800px;
   padding:15px;
   margin: auto;
}

I have removed the -250px top margin because it is causing an issue.

Check your single blog posts now.

#9

perfect, thank you. However I still seem to the social icons showing on the Projects pages?

Thanks
Daniel

#10

Also I am having trouble removing the featured post from the header for the blog landing page?

#11

Hello Daniel,

The code has been updated:

// Add Socials global block
// =============================================================================
function add_custom_socials(){ ?>
  <?php if ( is_single() && 'post' == get_post_type() ) : ?>
	  <div class="custom-socials">
    	<?php echo do_shortcode('[cs_gb id=910]'); ?>
	  </div>
  <?php endif; ?>
<?php }
add_action('x_before_the_content_begin', 'add_custom_socials');

If you want to have a the featured post only to a specific page, please create a similar custom header and assign it as global so that there will be no featured post in some other pages.

Hope this helps.

#12

Hello,

all is well, just a little confused on how stop the featured article showing in the blog landing page, category & archive landing pages?

#13

Hey @Dan1el,

Are you referring to this?

That’s part of blog header.

If that’s not what you mean, please give us a screenshot of the area you’re referring to.

Thanks.

#14

Hi,

Yes, on the /blog/ landing page, category landing page & archive landing page.

Dan

#15

Hello Dan,

Duplicate the header that is assigned to All Posts. This duplicated header, remove the bar that displays the post title as indicated by @Christian. And then you will need to assign this header as your “Posts Page”. This header will now only displays in your blog index and archive pages.

Hope this makes sense.

#16

Thank you so much,

this has worked for the blog landing page but not the category or archive pages?

Dan

#17

Hey Dan,

Archive pages uses the Global Header for now. There’s no option to assign a header to them yet. For now, you need to follow this article https://michaelbourne.ca/assign-pro-header-search-results-page/

The code in your child theme’s functions.php should look like the following:

add_filter('cs_match_header_assignment', 'custom_search_header');
function custom_search_header($match) {
	if (is_archive()) {
		$match = 1805;
	}
	return $match;
}

Notice the condition inside the if statement or line. is_archive is all archives in your site. For more details, please see the WordPress Conditional Tags documentation at https://codex.wordpress.org/Conditional_Tags

1805 is the Header ID. You can get that in the URL when editing your header.

Hope that helps.

#18

Perfect, works like a dream…thank you :tada:

#19

You are most welcome!

#20

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