Docs

[edwinoonk]

Hi,

how can I show the posts thumbnail/first image on the homepage? Just like it is shown on the single posts page?

So, like you can see on the single post page:
http://www.edvervanzijnbed.nl/test/2013/11/met-de-vlam-in-de-pijp/

I want that same picture shown in the same way on home:
http://www.edvervanzijnbed.nl/test/

Also how can you define the appearance of the widget header? I want it to look similar like it does now in my old theme: http://www.edvervanzijnbed.nl

Kind regards,
Edwin

[Christian]

Hey Edwin,

Looks like you already achieved what you need? If not, could you give us more details of what you’re trying to achieve?

Thanks.

[edwinoonk]

No I didn’t, but never mind. I decided that the integrity stack is not right for my site. But Ethos looks promising. I have activated it on the test URL http://www.edvervanzijnbed.nl/test

But there are a number of things I can’t get right.

First the widget header is transparent, how can I make it not transparent

The background image doesn’t show (why?)

The main content container has a white background and starts from the left end of the screen. I want it to start where the header image and menu bar start, so to the left of the main content the background image should show.

Is all that possible?

Thanks,
Edwin

[Thai]

Hi Edwin,

To make the header widget is not transparent, please add the following CSS under Customizer > Custom > Global CSS:

.x-main .h-widget, .x-sidebar .h-widget {
    background-color: #fff;
}

The background image doesn’t show (why?)

There is a fatal error on your sidebar, could you please remove the widget in your sidebar?

Thanks.

[edwinoonk]

Yes, that did the trick for the widget headers, and solving the fatal error brought back the background image.

Now we’re getting somewhere.

Now can we get the main content area to have a margin, so it begins where the header image and menubar begin as well?

Also I would like the breadcrumb bar to be separated from the main content, boxed and also just as wide as the menubar and header.

One other thing is a question about the category filter. Once a user applies a filter, how can he reset the filter?

Thanks a lot for all your help Thai.

Kind regards,
Edwin

[Rue Nel]

Hello There,

To get the main content area to have a margin, so it begins where the header image and menubar begin, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-container.main:before {
	display: none;
}

.site .x-container>.offset {
	margin-top: 0;
}

.site .x-main {
	background-color: #fff;
    padding-top: 20px;
	padding-left: 20px;
	padding-bottom: 20px;
	padding-right: 20px;
}

And to separate the breadcrumb, please use this custom css code:

.site .x-breadcrumb-wrap {
	max-width: 1500px;
	margin: 0 auto;
	margin-bottom: 20px;
}

Please let us know if this works out for you.

[edwinoonk]

The main content area is now how I wanted it.

The breadcrumb is now separated, so that’s good. But I want it to have a border (black) and it should end left and right at the same point where the menubar and header image end.

So we’re almost there.

And can you answer my question about the filter? How can a user reset the filter after he has chosen one?

Thank you so much Rue Nel

[Rue Nel]

Hello There,

Thanks for the updates! Do you want something like this?

Then please use these custom code instead:

.site .x-breadcrumb-wrap {
	max-width: 1500px;
	margin: 0 auto;
	margin-bottom: 20px;
    border: solid 1px #000;
}

.site .x-breadcrumb-wrap .x-container{
    max-width: 100%;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

And to resolve the filters, what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once 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/ETHOS/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

$paged      = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$categories = get_categories( array( 'include' => x_get_option( 'x_ethos_filterable_index_categories' ) ) );

?>

<ul class="option-set unstyled" data-option-key="filter">
  <li>
    <a href="#" class="x-index-filters cf">
      <span class="x-index-filter-label"><?php _e( 'Filter by Topic', '__x__' ); ?></span>
      <i class="x-icon-chevron-down" data-x-icon=""></i>
    </a>
    <ul class="x-index-filters-menu unstyled">

      <?php static $i = 1; $selected = ( $i == 1 ) ? 'class="selected"' : ''; ?>
      <li><a href="#" <?php echo $selected; ?> data-category-id="0">All</a></li>

      <?php foreach ( $categories as $category ) { ?>
        
        
        <li><a href="#" <?php echo $selected; ?> data-category-id="<?php echo $category->term_id ?>"><?php echo $category->name; ?></a></li>

        <?php $i++; ?>
      <?php } ?>
    </ul>
  </li>
</ul>

<div class="x-filterable-index">

  <?php

  foreach ( $categories as $category ) {

    static $j = 1;

    $selected = ( $j == 1 ) ? ' selected' : '';
    $accent   = x_ethos_category_accent_color( $category->term_id, '#333333' );
    $wp_query = new WP_Query( array( 'post_type' => 'post', 'paged' => $paged, 'cat' => $category->term_id ) );

    echo '<div class="x-filterable-category-group' . $selected . '" data-category-id="' . $category->term_id . '">';

      if ( $wp_query->have_posts() ) :
        while ( $wp_query->have_posts() ) : $wp_query->the_post();
          x_get_view( 'ethos', 'content', get_post_format() );
        endwhile;
      endif;

      echo '<a href="' . get_category_link( $category->term_id ) . '" class="x-btn-filterable x-btn">See All ' . $category->name . ' Posts</a>';

    echo '</div>';

    wp_reset_query();

    $j++;

  }

  ?>

</div>

<script>

  jQuery('.x-index-filters').click(function(e) {
    e.preventDefault();
    var $this = jQuery(this);
    $this.parent().find('ul').slideToggle(600, 'easeOutExpo');
    if ( $this.hasClass('selected') ) {
      $this.removeClass('selected');
    } else {
      $this.addClass('selected');
    }
  });

  jQuery('.x-index-filters-menu a').click(function(e) {
    e.preventDefault();
    var $this       = jQuery(this);
    var $filter_cat = $this.data('category-id');
    jQuery('.x-index-filter-label').text($this.text());
    if ( ! $this.hasClass('selected') ) {
      $this.closest('ul').find('a').removeClass('selected');
      $this.addClass('selected');
    }
    jQuery('.x-filterable-category-group').each(function() {
      $this = jQuery(this);
      console.log($filter_cat);
      if ( $this.data('category-id') === $filter_cat ) {
        $this.css({ 'display' : 'block', 'visibility' : 'visible' });
        $this.find('.x-btn-filterable').css({ 'display' : 'block' });
      } else {
        $this.css({ 'display' : 'none', 'visibility' : 'hidden' });
      }

      if ( $filter_cat === 0 ) {
        $this.css({ 'display' : 'block', 'visibility' : 'visible' });
        $this.find('.x-btn-filterable').css({ 'display' : 'block' });
      }
    });
  });

</script>

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

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

[edwinoonk]

Hi Rue Nel,

thanks again for the help.

The breadcrumb is now boxed, but still ‘wall to wall’.

The filter didn’t change unfortunately. For testing I added a second category, but once you choose a category there still is no option to undo the filter.

I saved the php file as _index.php in the folder you said.

It also looks like the content is filtered by default to only show the first category (‘reizen’), so the new category (‘test’) does not show at all unless you apply the filter to show just that category.

I want to show all blogposts by default (newest first) with the option for the user to apply a filter and if desired undo all filters.

Kind regards,
Edwin

[Paul R]

Hi Edwin,

This is how your breadcrumbs looks on my end.

http://screencast.com/t/bnxA2pjdhvUA

With regards to your filter, try adding All category then set all your posts to be under it.

Thanks

[edwinoonk]

What browser are you using, I am using Chrome and I get this:

http://www.edvervanzijnbed.nl/test/wp-content/uploads/Schermafbeelding-2016-09-06-om-18.09.24.png

Also you can see that the featured image does not align well in the single post page. Is there a fix for that?

I will try the ‘all’ category solution, thanks.

Kind regards,
Edwin

[Lely]

Hello Edwin,

Please update this custom CSS:

.site .x-breadcrumb-wrap {
    max-width: 1500px;
    margin: 0 auto;
    margin-bottom: 20px;
    border: solid 1px #000;
}

To this:

.site .x-breadcrumb-wrap {
    max-width: 1500px;
    margin: 0 auto;
    margin-bottom: 20px;
    border: solid 1px #000;
    width: 90%;
}

Then also add this:

.site .x-breadcrumb-wrap >div {
    width: 100%;
}

For the featured image, it is indented by 20px because of the following custom CSS:

.site .x-main {
	background-color: #fff;
    padding-top: 20px;
	padding-left: 20px;
	padding-bottom: 20px;
	padding-right: 20px;
}

Please update to this:

.site .x-main {
	background-color: #fff;
        padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 20px;
}

Hope this helps.

[edwinoonk]

Hi Lely,

for the featured image I changed it to :

.site .x-main {
background-color: #fff;
padding-top: 55px;
padding-bottom: 20px;
padding-right: 20px;
}

And to center the image I added:

img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
margin-left: auto;
margin-right: auto;
display: block;
}

I think I’m almost done.

Thank you all so much for your help.

One last question. If I am satisfied with how it the theme is set up, can I copy all configuration to the live site?

Thank you,
Edwin

[Jade]

Hi Edwin,

Yes, you can. You can export the customizer settings of your site in the Addons page but kinda make sure to always keep a backup of everything before you do major changes.

[edwinoonk]

Two last questions:

Is it possible to get under the blog posts a pagination? Like on the archive pages, e.g.: [1] [2] …[41].

The sidebar is transparent (see widget test) can this get a solid background. I hope this also forces the widget to become responsive, because if you rescales the window the map item does not resize.

Thank you so much.

Edwin

[Author]

Posts