Background Issues and Playable Video Thumbnails Ethos

Hey Guys,

I switched our theme from Integrity to Ethos just now and I can’t seem to figure out what is forcing the background on all my woocommerce & Learn Dash pages to white. I removed all custom CSS and tried to change the background and I can see that it is changed behind this layer of white, but where is the white coming from?

Also, I noticed that the portfolio layout with Ethos won’t allow the thumbnail to be a playable video – why is that? Seems like this is known with Ethos and kinda strange as the options are there and it is working fine with all other stacks. I did find this thread https://theme.co/apex/forums/topic/ethos-featuring-video-instead-of-image-on-blog-roll/#post-58555 and was wondering if that would apply to me as well?

Website is currently hosted on our IP https://132.148.19.177/. SSL is not active yet so you must proceed “unsafe” to view the site.

The pages I’m trying to change the background can be viewed here:
https://132.148.19.177/my-account/
https://132.148.19.177/module/1-1/
https://132.148.19.177/step/1-1-2/

Thanks for the help!

Ann

One more thing, I just noticed that the text color disappeared from the “Content Area Off Canvas” that I have added after switching to Ethos. Any idea why? If you visit this page https://132.148.19.177/step/1-1-2/ and click the little icon from the top navigation menu, the list of classes/lessons won’t show.

Thanks!

Hi Ann,

By default, ethos content container is set to white. We can override it to transparent or any color using the following custom CSS:

.woocommerce-page .x-container.main:before,
.single-sfwd-courses .x-container.main:before {
    background-color: transparent; /*Feel free to change this to any color.*/
}

Regarding portfolio video thumbnail on portfolio index page, that’s part of the differences on each stack. Each stack is unique, with own design and features and there’s a lot of changes already on the theme codes. Since there’s changes on the code, now it is possible with customization that is outside the scope of our support. Please note that due to the differences of features, applying certain features/design from stack to another requires customizing template some times multiples files that is beyond the normal scope of support. Thank you for understanding.

So with Ethos you have to add CSS to change the default background? It is strange to me that the site setting won’t work for such basic design change. Thanks for letting me know though!

I understand the video part is a customization and outside the scope of your support – however, all I’m asking is if the setup should work? You guys clearly guided other users though the customization so I’m not sure why you couldn’t give me a different answer…

What about the widget text? Widget text should be blue links but you can’t see them at all.

Thanks.
Ann

Hello There,

Thanks for updating in! If I am not mistaken, you are referring to the featured video on this page: http://demo.theme.co/integrity-1/portfolio/

You can still have something like this when using Ethos. Just make sure that the featured content type is set to video and that the featured content is set display the video in your portfolio item settings. For more information about how you can display a video in the portfolio page, please check this out:


On the other hand, we are not seeing any widget text. Could you please provide a screenshot?

Thanks.

All my posts are set to that exact setting you’re referring to and the preview is still blank using ethos. I’ve read posts on this forum saying that ethos won’t allow the preview video - hence my previous question to customize it. Are you saying the preview should work?

Thanks!

Ann

Like I mentioned in my previous comment, it seems like this is a known issue with Ethos and I found a few threads with customizations. Unfortunately, neither of them turned out the way it should, close though! The best I could find was this: https://theme.co/apex/forums/topic/ethos-portfolio-featured-content/. If I follow all the steps, I get the video to appear as the preview, but I also get the navigation arrows on top of each video and the dark overlay covering the title. If I only complete the first step described, the dark overlay and the title disappear.

How can I fix this?

Also, I’m working on a local environment now with only themex installed so there are no plugin issues.

Ann

Hi there,

It’s not a bug or issues, it’s intentionally made that way which is unique on each theme’s stack. There is just a confusion with featured image in single portfolio page, and images in portfolio index page.

http://demo.theme.co/ethos-1/portfolio/

Video thumbnails in the portfolio index page aren’t really playable, the white background is intentionally added to separate the content and transparent sidebar, it’s a unique layout.

The problem is with your customization, plus the thread you’re following is old and only applicable for that version. Please remove all of that customization, and let’s start a new.

Please create this file \wp-content\themes\pro-child\framework\views\ethos\content-video.php in your child theme, then its content/code should be like this

<?php

// =============================================================================
// VIEWS/ETHOS/CONTENT-VIDEO.PHP
// -----------------------------------------------------------------------------
// Video post output for Ethos.
// =============================================================================

$is_index_featured_layout = get_post_meta( get_the_ID(), '_x_ethos_index_featured_post_layout', true ) == 'on' && ! is_single();

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <?php if ( $is_index_featured_layout ) : ?>
    <?php x_featured_video(); ?>
  <?php else : ?>
    <?php if ( has_post_thumbnail() && ! is_single() ) : ?>
      <div class="entry-featured">
        <?php x_featured_video(); ?>
      </div>
    <?php elseif ( is_single() ) : ?>
      <div class="entry-featured">
        <?php x_featured_video(); ?>
      </div>
    <?php endif; ?>
    <div class="entry-wrap">
      <?php x_get_view( 'ethos', '_content', 'post-header' ); ?>
      <?php x_get_view( 'global', '_content' ); ?>
    </div>
  <?php endif; ?>
</article>

And that’s it, you may enhance this but we can’t further cover it. This snippet may only work for now depending on the changes in the next X versions.

Thanks!

It’s intentionally built so you can’t feature the video in ethos but you can in all other stacks? I’m sorry, but that makes no sense to me, that’s why I thought it was a bug. The option is still there for ethos…

I created the file but absolutely nothing happened. Was that supposed to give me a featured video? Maybe I didn’t explain well enough (sorry), but I want the portfolio view page to show the video playable. The user should be able to click “play” from the portfolio page without opening the single portfolio page. Just like the first video post on this page http://demo.theme.co/integrity-1/portfolio/

We have a portfolio of over 200 videos, uploading a single image for each video would be an absolute night mare…

Thanks for trying to help!

Ann

Hello Ann,

Thank you for the feedback.

It’s intentionally built so you can’t feature the video in ethos but you can in all other stacks? I’m sorry, but that makes no sense to me, that’s why I thought it was a bug. The option is still there for ethos…
We have 4 stacks in X and Pro theme. Each of these stacks has a unique design and features. The ethos stack is a very different from all other stacks. It has its own features like the post carousel and post slider. It is also the only stack the has entry covers and featured posts just as shown in this demo site: http://demo.theme.co/ethos-1/. The portfolio page as shown here: http://demo.theme.co/ethos-1/portfolio/ is also using entry covers in displaying the portfolio items. This is why ethos doesn’t have the features like in Integrity that you can easily click on the videos because Ethos does not display the featured image, featured video or featured gallery. The ethos portfolio only display the portfolio entry covers. I know you think it is bug but it’s not. It is done on purpose. There is no option to display those videos in Ethos. If you want to display the Ethos portfolio like in integrity, we will have to recode Ethos from scratch to be like integrity. We will have to recode the whole portfolio page structure along with its JS and CSS styling which would be considered a custom development already. The best suggestion we can give at this point is to switch to a stack that best suit for your needs because we cannot mixed the unique features of each stack into one.

Thank you for your understanding.

So why did you start off by sending me a code snippet? What is that for?

Hi There,

The reason why my colleague provided the snippet is because we always try to go beyond of the scope of the theme support and often provide customizations which would not be included as theme support technically.

As my colleague recommended, you can choose a different stack or get help from a private developer to help you achieve things that are not out of the box with X.

BUT, I believe I have a better solution for you. Have you considered using The Grid to create a grid with your Portfolio items, you need to create grid use your Portfolio items as a source.

On each Portfolio item, you need to edit it, and add the video URL to the grid settings of each post so they can open an in a lightbox. It looks super modern and I believe it is a great solution for what you are looking for.

https://theme-one.com/the-grid/youtube-2/

https://theme-one.com/the-grid/youtube-3/

Hope it helps!

Thanks Joao, I appreciate all the support you guys offer, but sometimes it is unclear what would be outside the scope of your support and what’s not. Since he did provide me a snippet that didn’t work, I kinda thought he’d be able to address that…

The essential grid is a good solution, the only thing though, is that I don’t have a search feature as with portfolio. I have about 180 videos and users should easily be able to sort based on their needs. If that makes sense.

I’m playing around with this plugin right now, https://wordpress.org/plugins/featured-video-plus/, I can get it to automatically set the thumbnail from the video, it’s still not exactly what I was hoping for but at least closer.

Thanks again!
Ann

Hi Ann,

Glad you found an alternative and we’re sorry for the confusion. For essential sort and search or filter, please check the following guide:
https://www.themepunch.com/essgrid-doc/grid-item-sort-search/
https://www.themepunch.com/essgrid-doc/category-filters/

Hope this helps.

Thanks Lely!

I was able to recreate a very similar page like the portfolio – I REALLY appreciate all the help getting me there!

I have a few questions though, and please – if this is outside your support, just tell me! Is it possible to adjust in what order the sorting tabs are displayed? For this gallery http://dev.moveu.com/phase-1-video-glossary/ I’m fine with the sorting, but for this one http://dev.moveu.com/phase-2-video-glossary/ the category “Module 6” is very misplaced… I added the categories the same for both galleries so I’m not entirely sure why one turned out okay and the other one not. I’m hoping there’s a setting that I may have missed. I did some research and looked at their documentation but can’t seem to find a solution.

I was also wondering if there’s a way to hide the white box showing the length of the video? Or at least hide it unless the video is playing?

Lastly, I have set the lightbox title to “Over” the video, which I really like. However, it is covering up the play button right now. I tried to move it with CSS but moving made the dark background cover the whole video. Is it an easy fix for this?

One more thing, how is the search feature supposed to work? I thought it’d would pull data from the title but it doesn’t seem to work that way… If you search for “Bridge” in this gallery http://dev.moveu.com/phase-1-video-glossary/ it only returns one video, although 2 videos have “bridge” included in the name.

Thanks again for everything!

Ann

Hi there,

I tried changing the order of the filters/sorting buttons and it’s not currently possible. I think its order is based on its internal ID/Index when it’s added (eg. taxonomies). You may try re-adding those taxonomies again in the order you prefer (taxonomy are categories, tags, and etc.). Or please try this plugin https://wordpress.org/plugins/taxonomy-terms-order/ :slight_smile:

The white box is part of the player and it’s not hosted on your site, it’s just embedded in your site through the iframe, so it’s not possible to change.

And about the lightbox title, please add this CSS as well

.esgbox-title-over-wrap {
    bottom: 65px !important;
    right: 0 !important;
}

Also, the search only works on the current page or set of items, if the other items are on the second page (pagination “load more”), then it will not be included in the search.

Thanks!