Docs

[necxelos]

Hello again

Quick disclaimer (a bit shorter this time):
– 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.

So here’s my list of questions and/or issues:

1. BUG/STRANGE BEHAVIOUR: For unknown reason when I install content dock add-on there is a X-Content-Dock.zip created in my uploads folder (the same that stores all the images) and the same file is visible in my back-end Media. Such thing didn’t happen with any other add-on and it didn’t happen in earlier verions of X Theme.

2. INTEGRITY SPECIFIC:
a) How can I center tags under the post and tags in tag cloud? Right now they are aligned to the left in both cases.
b) How can I move tags under the post elsewhere (preferably right under the post title)?

3. ETHOS SPECIFIC: What is the difference between build-in Ethos article sliders (the grid-ish one at the top and classic one below the main navigation) and sliders created using dedicated plugins (Revolution Slider, Layer Slider, The Grid, Essential Grid)? Do they have same functionalities or are they more limited?

Also my first impression was that Ethos sliders work faster (less graphical lag, more smooth animations) but it may be just my confirmation bias.

[Next two questions are PICK-ETHOS-DEAL-MAKERS for me. If those will be possible I’m switching to Ethos right away and never bother with Integrity again. I keep my fingers crossed!]

4. ETHOS SPECIFIC: How can I have only first post (one on the top) in the blog page / archive page have featured image above the excerpt (just as it looks in Ethos single post view or in other stacks)?

5. ETHOS SPECIFIC: How can I have all the posts in blog page / archive page alternating between having featured image on the left side of the entry-wrap and on the right side of the entry wrap?

Thanks in advance and good evening to You all 🙂

[Lely]

Hi There,

1.) That file shouldn’t be there. I just tried to reinstall the content dock extension and there’s no zip file. Unfortunately, I can’t duplicate your issue. See attached screenshot of my uploads folder content.

2.)
a.) Is this the tag cloud on a sidebar? Try adding the following CSS:

.widget_tag_cloud .tagcloud a, .widget_product_tag_cloud .tagcloud a {
    float: none;
    margin: 0.615em auto 0;
}

If you’re referring to tag cloud below the post content, use the following instead:

.entry-footer {
    text-align: center;
}
.entry-footer a {
    float: none;
}

b.) Go to this folder:
\wp-content\themes\x\framework\views\integrity
Copy the following file:

_content-post-footer.php
_content-post-header.php

To this folder on your child theme:
\wp-content\themes\x-child\framework\views\integrity
Open _content-post-footer.php file from your child theme and then replace the content with the following:

<?php

// =============================================================================
// VIEWS/INTEGRITY/_CONTENT-POST-FOOTER.PHP
// -----------------------------------------------------------------------------
// Standard <footer> output for various posts.
// =============================================================================

?>

<?php if ( has_tag() ) : ?>
  <footer class="entry-footer cf">
    <?php //echo get_the_tag_list(); ?>
  </footer>
<?php endif; ?>

Then open _content-post-header.php file from your child theme and then replace the content with the following:

<?php

// =============================================================================
// VIEWS/INTEGRITY/_CONTENT-POST-HEADER.PHP
// -----------------------------------------------------------------------------
// Standard <header> output for various posts.
// =============================================================================

?>

<header class="entry-header">
  <?php if ( is_single() ) : ?>
  <h1 class="entry-title"><?php the_title(); ?></h1>
  <div class="header-tag-list">
  <?php echo get_the_tag_list(); ?>
  </div>

  <?php else : ?>
  <h2 class="entry-title">
    <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
  </h2>
  <?php endif; ?>
  <?php x_integrity_entry_meta(); ?>
</header>

Then also add the following CSS:

.single-post p.p-meta {
    clear: left;
}
.header-tag-list a {
    display: inline-block;
    float: left;
    position: relative;
    margin: 0.615em 0.615em 0 0;
    border: 1px solid #ddd;
    border: 1px solid rgba(0,0,0,0.125);
    padding: 0.692em 1.154em 0.769em;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    color: #c5c5c5;
    color: rgba(0,0,0,0.375);
    background-color: transparent;
    border-radius: 0.35em;
    box-shadow: inset 0 0 0 transparent,0 1px 1px rgba(255,255,255,0.95);
    -webkit-transition: color 0.3s ease,border-color 0.3s ease,background-color 0.3s ease,box-shadow 0.3s ease;
    transition: color 0.3s ease,border-color 0.3s ease,background-color 0.3s ease,box-shadow 0.3s ease;
}

3.) For ethos carousel on top and slider below the menu, it’s option is available on Customizer. It’s look is already define in Ethos stack. We just need to set it’s settings where the content is coming from and a few more options available and it’s all done. On the other hand, using plugins, we have absolute control on design and content. We can design it as we like as long as the plugins allows. We can built from scratch or use available plugins slider demo.

Yes, correct. using the plugin means it will loads it’s plugin library. Using ethos, it was already loaded with the theme.

4.) To show featured image only on the first blog post in blog index page and archive page, we can use custom CSS.

5.) We can use the following custom CSS:

.blog .x-main .hentry:nth-child(even) .entry-featured,
.archive .x-main .hentry:nth-child(even) .entry-featured  {
    float: right;
}

Hope this helps.

[necxelos]

1. You checked in wrong place. It was created deeper, in Your case (Your screenshot) it would be inside …/uploads/2016/(month number).

But funny thing is, it didn’t happen to me again. I reinstalled this several times now and YES, it creates this file in place I mentioned, but just for a brief moment, and then the file disappears (having the folder opened while reinstalling gives You enough time to see it right after installation ends). Guess it was some kind of lag bug, that the file stayed there.

I’ll get back to You if it happens again but for now I consider it being solved on its own 🙂

2.
a) Centering tags under the post worked perfectly, thanks. But centering tags in sidebar tag cloud didn’t work (nothing changed).
b) Placing this part:

<div class="header-tag-list">
<?php echo get_the_tag_list(); ?>
</div>

…inside _content-post-header.php works only when I place it outside (right after or right before) the if/endif. Inside the conditional as in Your example doesn’t do anything. There is one issue with my placement though: tags become inline with either title or meta (depending on placement before/after if/endif).

3. Thanks for clarification 🙂

4. You didn’t understand. I know how to disable/enable featured image in first post only. It’s as simple as:

.hentry:first-child .entry-featured {
display: none;
}

…or the other way around. What I was asking is: How can I have the first post (and only first post) in blog page / archive page have it’s featured image above the .entry-wrap? Big featured image with same width as .entry-wrap, just as it looks in Ethos single post page or as it looks in Integrity default blog page.

5. Works like a charm, great thanks! 🙂

[Lely]

Hi There,

2 a.) Please also add this:

.widget_tag_cloud .tagcloud, .widget_product_tag_cloud .tagcloud {
    text-align: center;
}

b.) Did you also add the CSS? By default it will be inline. The CSS I have suggested will move the meta tag on a new line.

4.) Thank you for the clarification. Please try this CSS:

.blog .x-main .hentry:first-of-type .entry-featured,
.blog .x-main .hentry:first-of-type .entry-wrap,
.archive .x-main .hentry:first-of-type .entry-featured,
.archive .x-main .hentry:first-of-type .entry-wrap {
 {
    display: block;
    width: 100%;
}
.blog .x-main .hentry:first-of-type .entry-featured,
.archive .x-main .hentry:first-of-type .entry-featured,{
 {
    margin-bottom: 20px;
}

You’re always welcome and hope this helps.

[necxelos]

2.
a) Works perfectly in Integrity. Can You help me do the same in Ethos? I changed tags in Ethos to a cloud-like thingy using this code:

.widget_tag_cloud .tagcloud a, .widget_product_tag_cloud .tagcloud a {
	width: auto;
	padding: 5px;
	margin: 5px;
	display: inline;
	border: 1px solid black;
}

.widget_tag_cloud .tagcloud a:nth-child(2n), .widget_product_tag_cloud .tagcloud a:nth-child(2n) {
	float: left;
}

…from this topic here:
https://community.theme.co/forums/topic/tag-cloud-in-ethos-isnt-a-cloud/
…but the same method that centers them in integrity doesn’t seem to work here.

b) I had to change float to none in Your CSS and tags stopped occupying the same line as title. Solved 🙂

4. Works like a charm! But there is tiny ussue: for some reason it works on pages 1, 2, 3, etc. of respective blog page / archive page too, while it should only work on page 1 (whole point is to make only newest post stand out).

Thanks again Lely, You rock! 🙂

[Lely]

Hi There,

2 a.) For ethos, please try this:

.tagcloud {
    text-align: center;
}
.widget_tag_cloud .tagcloud a, .widget_product_tag_cloud .tagcloud a {
    width: auto;
    float: none !important;
    padding: 5px;
    margin: 5px auto;
    border: 1px solid black;
    text-decoration: none;
    border-radius: 4px;
}

4.) Please update the CSS to this:

body.blog:not([class*="paged-"]) .x-main .hentry:first-of-type .entry-featured,
body.blog:not([class*="paged-"]) .x-main .hentry:first-of-type .entry-wrap,
body.archive:not([class*="paged-"]) .x-main .hentry:first-of-type .entry-featured,
body.archive:not([class*="paged-"]) .x-main .hentry:first-of-type .entry-wrap{
    display: block;
    width: 100%;
}
body.blog:not([class*="paged-"]) .x-main .hentry:first-of-type .entry-featured,
body.archive:not([class*="paged-"]) .x-main .hentry:first-of-type .entry-featured{
    margin-bottom: 20px;
}

You’re welcome and cheers!

[necxelos]

2. a) Works like a charm! 🙂

4. Works like a charm! 🙂

Thank You! 🙂

[Prasant Rai]

You are most welcome. 🙂

[necxelos]

Sadly I just came across small issue with this CSS from Lely:

.blog .x-main .hentry:nth-child(even) .entry-featured,
.archive .x-main .hentry:nth-child(even) .entry-featured  {
    float: right;
}

Code above should theoretically work only in desktop view (because in mobile view, every post has featured image above the content wrapper). But it makes every second featured image disappear in mobile view.

It’s even worse when I change size-proportions (width property) from default 35% featured image / 65% content wrapper to for example 25% / 75%. Works perfectly in desktop view but in mobile view it makes featured image appear small (as in desktop view) and above the content wrapper (which still reserves only part of the width, leaving the empty spot on the side).

[Christopher]

Hi there,

Please update previous code to :

@media (min-width:979px){
.blog .x-main .hentry:nth-child(even) .entry-featured,
.archive .x-main .hentry:nth-child(even) .entry-featured  {
    float: right;
}
}

Hope it helps.

[necxelos]

That could work, thanks. But is there a way I can assure that Your default mobile CSS takes priority in every case? I’m making several changes to my desktop view, while mobile view is perfect for me as it is. Checking everytime if my CSS collides with mobile and for which properties would be harder said then done (it’s easy to miss small things when You look at them all the time – that’s not the case for the end user who will see everything though).

SIDE QUESTION: It’s the second time I got some mobile-related CSS from You guys and both times border between mobile and desktop was 979px BUT in the X Theme default CSS this border is set as 767px. Which one is correct and which one should I use?

I’d like to avoid situation where CSS for screens (and browser window sizes) between those 2 values is completely broken (because some CSS already matched the screen-size border and some not).

[Christian]

Hey there,

In that case, you should hire a web developer to work closely on your site or project. What we’ve given here serves only as a guide. There’s no right or wrong with media queries as that depends on your project so it is the user’s responsibility to decide.

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[necxelos]

a) I kind of found answer to my question about the breakpoints here: https://community.theme.co/forums/topic/media-query-breakpoints/
All I need now is information in which file all the @media CSS is stored in X Theme, so I can check default values of all the CSS properties.

b) I’m not asking for a solution/customization here but for an explanation: why default @media CSS settings don’t have priority over custom CSS applied to general classess (without the use of @media). It’s only logical that when someone write some CSS to style the desktop view (like for example size of a content-wrapper in %), those changes shouldn’t affect the (entirely different) mobile view.

If I know why this happens I will be able to find my own solution (first thing that comes to mind is just adding !important to every default @media CSS property). Thanks 🙂

[Rad]

Hi there,

a) They are all under \wp-content\themes\x\framework\css\, since X theme uses stacks, then it uses multiple CSS files depending on the active stack. Though, we don’t really recommend editing the core files. And not all CSS are declared on those CSS files, some are just based on multiple CSS which can only be overridden by custom CSS. Example, you can’t find the equivalent CSS of the above CSS from those CSS files. It’s just made on-fly based on the combined CSS through developer tools. You should utilize browser developer tool instead of CSS files.

b) CSS is about selection, you’re the one that will decide what should be affected and what shouldn’t. Though I’m not really sure about your question, it’s a bit confusing. Would you mind providing some samples? CSS is a big one, there are my rules and standard applied to it.

Please note that browser loads and interpret CSS from top to bottom, the priority is based on that. The CSS on the lower end is more prioritized than on top. And on @media query, priority is based on screen size from large to smaller. Example, on mobile view and if you’ll not going to declare CSS under 767px, it will the follow the 979px, if not, then 1024px and so on.

Thanks!

[Author]

Posts