Docs

[necxelos]

Hello once more

My usual disclaimer:
– I don’t have a domain yet, so I work on localhost, thus can’t provide site access. I will try my best o make my questions as specific as possible.
– I have a Child Theme ready to go. I used the one downloadable from Your site.

And this is where questions begin:
UBERMENU QUESTIONS
1. Once I added Ubermenu to the navbar (instead of standard X menu) I found out that it is much smaller then navbar and navbar itself doesn’t shrink its height to fit the height of Ubermenu. I did manage to change navbar height using:

.x-navbar-wrap {
	height: 45px !important;
}
.x-navbar-inner {
	min-height: 45px !important;
}

…but it feel more like a band-aid to me, not a best practice solution. Is there a way to make navbar height automatically fit ubermenu height?

2. How can I bind fullscreen search to Ubermenu button?

ETHOS QUESTIONS
3. Right now my content.php in Ethos looks like this:

<?php

// =============================================================================
// VIEWS/ETHOS/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard 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_ethos_featured_index(); ?>
  <?php else : ?>
    <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php if ( ! is_single() ) : ?>
          <?php x_ethos_featured_index(); ?>
        <?php else : ?>
          <?php x_featured_image(); ?>
        <?php endif; ?>
      </div>
    <?php endif; ?>
    <div class="entry-wrap">
      <?php x_get_view( 'ethos', '_content', 'post-header' ); ?>
	  
	  <?php if ( has_tag() ) : ?>
		<footer class="entry-footer cf">
		<?php echo get_the_tag_list(); ?>
		</footer>
	  <?php endif; ?>
	  
      <?php x_get_view( 'global', '_content' ); ?>
	  
    </div>	
  <?php endif; ?>  
</article>

<div>
<?php echo do_shortcode('[share_custom title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" reddit="true" email="true"]'); ?>
</div>

As You may notice I have my social sharing bar declared outside the <article></article>. This is due to the fact that I was unable to make social sharing bar stay below entire entry (on the front end). When I place social sharing line of code inside <article></article> several unwanted things happen:
– Background color of social sharing bar fills entire article.
– Social sharing ends up being below entry-wrap instead of below entire content (AKA centered at the bottom of a post).
– If actual height of featured image and entry-wrap differ more then just few pixels social sharing bar splits, with few social icons being under the featured image and few being under entry-wrap (one side higher one side lower).

[I attach screenshot to show the issue on the front end.]
[SCREENSHOT EXPLANATION]
[SCREENSHOT 1: Red background of social sharing bar fills entire post.]
[SCREENSHOT 2: Grey background of social sharing bar fills entire post AND social icons are split into two different altitudes.]
[SCREENSHOT 3: This is how it should look like. And this is how it looks like when social sharing line of code is outside <article></article>.]

Summing things up: I need social sharing line of code to be inside <article></article> (mainly because I need to style it on per-category basis using category classes) but I need it to look like screenshot 3.

4. How can I force Ethos to use resized/cropped ‘entry’ images as featured images instead of original full-size images? I managed to crop/resize images as I see fit thanks to Rad but Ethos seems to be the only stack not using ‘entry’ image.

5. How can I move “next post / previous post” buttons in single post page view to be above article title instead of being in the same line. I do center my titles, tags and meta and those buttons push my title to the left side (so it becomes out of sync with other centered stuff).

Thanks in advance and have a good night 🙂

[Rad]

Hi there,

1. If your Ubermenu is floating (left or right), then its container doesn’t have any height to follow. It’s either that CSS, or remove your Ubermenu’s float position.

2. You should enable search feature on your customizer (under Admin > Appearance > Customizer > Header). Then please check this another thread https://community.theme.co/forums/topic/ubermenu-search-icon-broken/

3. and 4. Please provide your site’s URL, admin and FTP login credentials. I like to see its current structure.

5. It’s within post header templates, but I like to verify the other structure first.

Thanks!

[necxelos]

1. I can’t find any Ubermenu CSS class with float property (except for single top-level buttons which have float: none), at least not using FireBug. Do You know where Uber has float: left or float: right declared? I’m using default setting with no customization (not even CSS) yet.

2. Ok, this is smart: Your navbar search actually ended up being inside ubermenu as last top-level item. I kinda hoped I can bind it to actual Ubermenu button though (for the purpose of having the same look as the rest of buttons and moving it where I want inside Ubermenu, not necessarily last top-level item position).

3. 4. 5. Sorry can’t do (still localhost). But I can paste contents of whatever file You want here, or attach actual files from my x-child-theme if that’s possible.

Thanks! 🙂

[Rad]

Hi there,

1. It’s under Admin > Appearance > UberMenu > Main UberMenu COnfiguration > Position & Layout > Menu Bar Alignment. I’m not sure if there are conflicting CSS or custom CSS, and I need to check it directlt to confirm it.

2. UberMenu has its own structure, binding may not work since javascript that’s responsible for navbar search it’s part of X core. Though, I’ll add that as the feature request for UberMenu.

3. In your screenshot, elements overlaps and affecting the other which I assume that there is broken structure or element. And the only way to find out is by checking it directly.

4. Do you still the thread that has the code? Cropping is done through this function https://developer.wordpress.org/reference/functions/add_image_size/. Or please provide the file here by uploading it as text file.

5. Please add this code to Admin > Appearance > Customizer > Custom > Javascript.

jQuery( '.single-post .x-nav-articles' ).insertBefore('.entry-featured');

Thanks!

[necxelos]

1. I just tested it on fresh install (only WP, X Theme and Ubermenu, no header customizations whatsoever, no CSS customizations whatsoever). I found those options (Menu Bar Alignment) in Customizer but they refer only to width (not height) and I have everything possible set as either fullwidth or center respectively.

X-navbar height and minheight was both set to 90px by default though, it wasn’t dynamic so maybe that’s the case. At which point: should my brutal height change be actually right?

2. It’s ok. I don’t expect You guys to have Your theme deeply interact with plugin as big as Ubermenu. I’ll bite this problem from other angle then:
– Can I move fullscreen search to be placed either in sidebar or in the logo bar (right side of the logo)?

3. Just tested those on the fresh install with only code presented in my initial post being used plus the code to create proper social bars of Yours in functions.php.

In general it looks like this:
– Both main elements inside article container (entry-featured and entry-wrap) are float elements (which is awesome btw. and has many uses).
– Adding third element (entry-social) at the bottom of article container makes it take entire space (because it doesn’t float). Of course adding float is no use to me because only two values it takes are left or right and I need it centered at the bottom.
– Spliting entry-social content (social icons) across different heights happen if the left element is lower then the right element. That’s default behaviour.

That’s for explanation what happens and why (no broken structure whatsoever as I only use code from You guys) and now for the solution: by sheer luck (and hours of googling through CSS properties – which I hoped were the only possible solution) I found out something that by its definition shouldn’t do anything, actually kind of solved the problem. I used the clear: right (which in theory makes my social bar ignore the floating element on the right and only adjust to the left one) on the entry-social. What I need now is:

a) Telling me if my reasoning of “why issue happened” is correct (I just followed simple logic without deep php/html programming knowledge whatsoever)?
b) Telling me if clear: right solution really does the job or is it just a band-aid that will break (missplace everything) first time it is given a chance?

4. I tested the same thing on fresh install too. It’s just that every other stack (Icon, Renew, Integrity) uses this image:
– MY-PATH/uploads/2016/08/Image-Name-862×300.jpg [which is a default ‘entry’ version]
…but Ethos uses this instead:
– MY-PATH/uploads/2016/08/Image-Name.jpg [which is original image]
…by default. Whether I use the code to change sizes or not effect is the same – Ethos uses original image (I tested). Now the thing is how to “tell” Ethos to use those ‘entry’ versions of images instead.

Even on Your demo page Ethos-1 there is original full-sized image used in blog/archive view but the ‘entry’ cropped image used in single post view.

5. It moved to the side of featured image instead (pushing that aside for a change), and I need it to have it’s own separate line (between featured image and title preferably) so it doesn’t interfere with the general “look” where everything is centered.

Thanks again and good night to You all 🙂

[Rad]

Hi there,

1. The min-height should be enough. It only limits how small it can be, but it can still expand greater than the specified value.

Yes, the only option is full-width, since left and right floats. Though, I can’t really tell what you’re currently getting as I can’t check it.

2. Is it the modal popup window, or just the search icon?

3. You’re correct, the reason is that those elements are floating. And floating elements can change how relative elements being displayed. And clearing them negates the effect of float element without the need to making it full-width. It’s the same as what we’re discussing on #1

4. What’s the size of your uploads/2016/08/Image-Name.jpg ? If it’s smaller than ‘entry’ size, then it will stay as the original.

5. Try this one

jQuery( '.single-post .x-nav-articles' ).css( { width: '100%', clear: 'both'} ).insertBefore('.entry-featured');

Thanks!

[necxelos]

1. Min-height isn’t enough. Height of the wrapper is responsible for pushing content down. All three situations can be seen in my screenshot. From top to bottom respectively:
– Default height of navbar-wrap and default min-height of navbar-inner. [incorrect look]
– Default height of navbar-wrap and changed min-height of navbar-inner. [incorrect look]
– Changed height of navbar-wrap and changed min-height of navbar-inner. [correct look]

If I understand correctly navbar wasn’t scaling dynamically in the first place. It had fixed size, that’s why it didn’t adjust to Ubermenu being smaller.

Only thing I wonder is: should I disable navbar-wrap height completely and add min-height property there? I think it makes more sense as content need to be pushed down exactly as much as height of the actual navigation.

2. The magnifier icon/button (that activates the full-screen search) is in navbar right now (as last position of Ubermenu if Ubermenu is used). I want to move this icon/button to either sidebar or to logo-bar. It’s a plan B because plan A assumed that I can move this icon deeper to Ubermenu (for example to 1st level submenu). Hope I explained properly this time 🙂

3. It’s done then. Hooray 🙂

4. They are surely not smaller. During development in localhost I’m using fake content, which in this case means wallpaper-sized images (gigantic, some 3000px * 2000px or so). So that’s not the problem. Let me explain directly on Your demo:
http://demo.theme.co/ethos-1/
This Your demo image link used in blog/archive pages (extracted using FireBug):
http://demo.theme.co/ethos-1/wp-content/uploads/sites/56/2014/05/headphones.jpg
And this is Your demo image link used in single-post view (extracted using FireBug):
http://demo.theme.co/ethos-1/wp-content/uploads/sites/56/2014/05/headphones-862×575.jpg

It makes absolutely no sense that Ethos is using bigger image for tiny thumbnail in blog/archive pages but uses smaller, cropped image for fullwidth featured image in single post page. If anything it should be exactly the opposite. That’s why I need to make Ethos use ‘entry’ version of image in blog/archive pages instead.

5. This time those buttons replaced both the image and the article title (big white space there with buttons being on the top). I was thinking of making those buttons have absolute position (instead of Your code) with % left but this can potentially cover part of the title if title is long enough.

Funny thing: completely disabling float property of x-nav-articles move it to the separate line above title and below featured image (so 99% success) BUT also made them stick to the left side instead of the right side. Can I somehow move them to the right without using float property?

Thanks and have a good night 🙂

[Rad]

Hi there,

1. The height is static, min-height is dynamic. But if your workaround fixes it, then you should implement it.

It will not scale since its content is floating or fixed position. You have to define at least minimum height to add some dimension to it. It’s up to you what you wish to add, but personally, I prefer min-height because it doesn’t restrict the expansion compared to height.

I can’t really provide a fitting solution unless I can check it directly. Maybe there is a misunderstanding.

2. It can’t move deeper within Ubermenu. It’s part of X theme’s native menu and designed to be part of top-level menu items. Ubermenu doesn’t really support that search icon and what was provided is just a workaround. It can’t be moved to any place either because javascript is bound, moving it will remove the functionality of search pop up. What I’m thinking is hide it, then add a proxy button that will trigger the search.

Example, let’s say we added this on sidebar

<a href="#" class="search-button-proxy"><i class="x-icon x-icon-search"></i></a>

Then we can implement this javascript to delegate the click event to search on the menu.

jQuery('.search-button-proxy').on('click', function() {

jQuery('#menu-item-id-here-where-search-is').click();

} );

4. It doesn’t use entry size, it’s made that way since it’s background image. It’s special feature in ethos, not the same with another stack. And the background is usually scaling so it should be bigger as much as possible. In fact, in advance mobile devices like retina, or higher DPI device requires resolution twice as big of its size.

If a mobile has 768×1024 (portrait) and 1024×769 (landscape) size, would you display a 800px image stretching up to 1024px? It will be going to be blurry. Please note that in mobile, everything will break down to one column, and full-width.

Though, you can always customize it through coding.

5. The purpose of floating is aligning the block elements. It’s different from aligning a text. Would you mind providing a mockup design of how it should, you may take the screenshot of Ethos demo.

Thanks!

[necxelos]

1. I’ll use min-height and disable height entirely then. Thanks 🙂

2. You mean it’s hardcoded, not modular/widgetized like most of X Theme features? Your solution seems awesome, there is small issue though. Original Navbar Search Button doesn’t have ID, only class. I checked in Ethos 1 Demo and it’s the same – Navbar Search Button doesn’t have ID.

4. But single post page uses ‘entry’ version – so I don’t understand something here. Doesn’t it kill bandwith for end-user if he has to load 3000px * 2000px sized image when it’s scaled down to let’s say 1000px * 800px (in the biggest scenario) anyway? I know that mobile devices have insanely-high DPI but I don’t think there is a device out there that will require (again – in the biggest scenario) featured image to be bigger then let’s say 1000px * 800px.

I believe that resizing function that You’ve shown me earlier is the best thing ever created to reduce bandwith pressure on the end user – all I need is to find right resolution I can consider “maximum” and cut bigger images to that size.

So I’d really like to force Ethos to use ‘entry’ image (as I will edit its dimentions to what I need anyway) instead of original one. I assume it’s declared somewhere in ethos code and all it requires is to switch value “original image” to “entry” and it’s done right?

5. I edited Ethos Demo in Paint to show what I need. Option (1) is how it is now and Option (2) is how I need it to be (buttons having their own space of entire line above the title but below featured image and still being aligned to the right side).

Thanks.

[Rad]

Hi there,

1. Sure

2. I mean that search functionality is never part of UberMenu. It’s a bundled plugin which the only purpose is to replace X’s built-in menu along with its functionality. It has class name to replace the ID, ID is just a sample selector.

4. It will kill the bandwidth, please upload images according to your target devices only. There is no use uploading 3000px when it’s only displayed on 1200px screen (1024px for containers and 960px boxed layout). It’s a background image and it’s intended to pull the full-size image. It’s ethos’s feature, though, I’ll forward it as a feature request to have an option for background-size.

5. Please change it to this

jQuery( '.single-post .x-nav-articles' ).css( { clear: 'both'} ).insertAfter('.entry-featured');

Thanks!

[necxelos]

2. Ok I put this on top of my sidebar file:

<i class=”x-icon x-icon-search”>SOME TEXT TO CLICK</i>

And I added this to my “Custom Javascript” in Customizer:

jQuery('.search-button-proxy').on('click', function() {

jQuery('.x-menu-item-search').click();

} );

And nothing happened (I mean there is a link in sidebar but it does nothing).

4. As I explained before I will have negligible to zero control over content being posted. All I know is that featured images used will be somewhere between big and gigantic (scientific diagrams, map data representations, screenshots from high-end PC’s) so I need a way to ensure those will be automatically scaled down to “reasonable” sizes yet still big enough to not be blurry on mobile devices.

That’s why I need to change what images Ethos use. I understand background works different but this way or another, there is a place in Ethos code which says something like USE ORIGINAL IMAGE. Well can’t I just replace that code with USE ‘ENTRY’ IMAGE?

I know the dangers of blurring, etc. but all the other stuff I’ve done (for example changing ‘entry’ to my own dimention values) will prevent this from happening anyway.

5. No effect (well it moved like 5px to the right side from default position but that’s all).

[Paul R]

Hi,

2. You need to add the class in your code.

eg.

<i class="x-icon x-icon-search search-button-proxy" data-x-icon="&#xf002;">SOME TEXT TO CLICK</i>

4. You can add this in your child theme’s functions.php file

// Recent Posts
// =============================================================================

function x_shortcode_recent_posts_v2code( $atts ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'type'         => 'post',
    'count'        => '',
    'category'     => '',
    'offset'       => '',
    'orientation'  => '',
    'show_excerpt' => 'false',
    'no_sticky'    => '',
    'no_image'     => '',
    'fade'         => ''
  ), $atts, 'x_recent_posts' ) );

  $allowed_post_types = apply_filters( 'cs_recent_posts_post_types', array( 'post' => 'post' ) );
  $type = ( isset( $allowed_post_types[$type] ) ) ? $allowed_post_types[$type] : 'post';

  $id            = ( $id           != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class         = ( $class        != ''     ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
  $style         = ( $style        != ''     ) ? 'style="' . $style . '"' : '';
  $count         = ( $count        != ''     ) ? $count : 3;
  $category      = ( $category     != ''     ) ? $category : '';
  $category_type = ( $type         == 'post' ) ? 'category_name' : 'portfolio-category';
  $offset        = ( $offset       != ''     ) ? $offset : 0;
  $orientation   = ( $orientation  != ''     ) ? ' ' . $orientation : ' horizontal';
  $show_excerpt  = ( $show_excerpt == 'true' );
  $no_sticky     = ( $no_sticky    == 'true' );
  $no_image      = ( $no_image     == 'true' ) ? $no_image : '';
  $fade          = ( $fade         == 'true' ) ? $fade : 'false';

  $js_params = array(
    'fade' => ( $fade == 'true' )
  );

  $data = cs_generate_data_attributes( 'recent_posts', $js_params );

  $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";

    $q = new WP_Query( array(
      'orderby'             => 'date',
      'post_type'           => "{$type}",
      'posts_per_page'      => "{$count}",
      'offset'              => "{$offset}",
      "{$category_type}"    => "{$category}",
      'ignore_sticky_posts' => $no_sticky
    ) );

    if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();

      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image              = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
        $bg_image           = ( $image[0] != '' ) ? ' style="background-image: url(' . $image[0] . ');"' : '';
        $image_output       = '<div class="x-recent-posts-img"' . $bg_image . '></div>';
        $image_output_class = 'with-image';
      }

      $excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p>' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . '</p></div>' : '';

      $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', 'cornerstone' ), the_title_attribute( 'echo=0' ) ) ) . '">'
                 . '<article id="post-' . get_the_ID() . '" class="' . implode( ' ', get_post_class() ) . '">'
                   . '<div class="entry-wrap">'
                     . $image_output
                     . '<div class="x-recent-posts-content">'
                       . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                        . $excerpt
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';

    endwhile; endif; wp_reset_postdata();

  $output .= '</div>';

  return $output;
}

// =============================================================================

add_action('wp_head', 'change_recent_posts_to_v2');
function change_recent_posts_to_v2() {
  remove_shortcode( 'x_recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
}
// ============================================================================= 

Replace full in this line with your size

$image = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘full’ );

5. You can add this under Custom > Edit Global CSS in the Customizer.

.single-post h1.entry-title {
   clear:both;
}

Hope that helps.

[necxelos]

2. It looks like I made mistake elsewhere. I used in Your QUERY my <i> object class instead of my <a> object class. Now when I used proper class it works. Side/Follow-up questions:
a) Can I move this QUERY code from customizer to my functions.php (I assume it will be slightly different)? I prefer to have all my changes in same place.
b) Do I understand correctly that I can move this line:
<a href="#"><i class="x-icon x-icon-search" data-x-icon="">SEARCH PROXY</i></a>
…basically anywhere? Header, Footer, Sidebar, it will work just the same everywhere?
c) Why using “display:none” on the original button made the proxy stop working? Do original button need to be visible for proxy to work or can I make it disappear somehow?

4. I used Your code and changed ‘full’ to ‘entry’, sadly it didn’t work (Blog/Archive Page posts still use full-sized featured images).

5. Awesome, that did it, Thank You Paul 🙂

Thanks and Good Night

[Paul R]

Hi,

a&b)

May I know where exactly you like your button proxy to appear. You need to add the code wherever you like the button to appear.

c) Yes, it needs to be visible and you need to add the class.

4. That’s because entry probably does not exist

You can add this in your child theme’s functions.php file

add_image_size( 'entry', 220, 180 ); 

Change 220 width your desired width and change 180 with your desired height.

After that, install and run force regenerate plugin so it will create images with that size.

Hope that helps.

[necxelos]

2.a)
2.b) and 2.c) I was just making sure if I understood correctly. I planned to add this proxy button in my Header (right side of the page logo), but that was when I thought I can make original one disappear somehow.

4. The ‘entry’ image size is one of Your 4 core image sizes declared in setup.php. And I’ll be happy to use just this one. And if I inspected the sizes filename used correctly this exact ‘entry’ size is used by Ethos in single post page so it has to exist.

[Author]

Posts