Docs

[robotpants]

Hey all! Couple of questions about blogging. Anyone in the community have any ideas on these it would be super helpful:

1. This is more of an advice thing but I’m torn between using the blog vanilla and using Cornerstone. I understand that Cornerstone will make any future migrations much harder but I want the blog to be magazine like and have fancy features but is also easy to edit (no using short codes). Anyone here blogging with CS?

2. I noticed that there no way to set an image to be actually fully 100% like when making a page. Is there a way to do this?

3. I noticed when editing in CS on a blog post, it ads extra padding to the left and right versus a vanilla blog post. I can’t see anything in the CS page settings for this.

4. Is there a way to do the big fullscreen splashes on a blog post like you can with a page? Other than using RevSlider above the header I mean.

[Rue Nel]

Hello There,

Thanks for writing in!

1] Cornerstone does not have any issues in your blog. If you want to have a magazine like and would like to display excerpts, you should always make sure that you insert a manual excerpt. By default and if you not using Cornerstone in creating the blog posts, auto excerpts are easily be generated by WordPress taking the first 55 characters or with the limit you have set in the customizer.

2] Please insert an image element instead. This should display the fullwidth image. If you notice a space on the left and right, please refer to #3.

3] This is because in the row settings, column container is enabled. Disabling the column container will make the row width fullwidth and the same width as the width of the content container.

4] This particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[robotpants]

Thanks for the reply! Few notes/questions on this:

1) By default I’d like to use CS because of the flexibility. The ONLY hesitation is that content almost always outlives themes in WordPress. I’m not planning on leaving X anytime soon (it’s the BEST!) but something Ive already run into with things like visual composer being a mess to to import to a new blog that doesnt use it since it’s so dependent on shortcodes. Have you guys ever thought about a tool that strips the CS codes an preserves the basic text, links, images, an video embeds?

2/3) Copy that. Seems like the blog still has an added container the pages don’t have? See my screenshot. Not a huge deal if this is the case.

4) No worries!

NEW QUESTION! It seems like the lightbox has to be turned on manually every time. Is there a way to always trigger the lightbox on a direct image link? I saw a few threads about this in the forums but never saw a fully resolved solution.

THANKS!

[Rad]

Hi there,

1. You mean remove CS shortcodes but retain Visual Composer’s shortcode? There is no tool, but if you plan to remove all shortcodes regardless of the builder then you can create custom code and call strip_shortcodes() https://codex.wordpress.org/Function_Reference/strip_shortcodes

2. Could be line breaks (WordPress convert line breaks to <p></p> or <br> and if it happens to be added as first child of the block element, then that happens. You may provide your site’s URL that has this issue 🙂

3. Lightbox requires selectors if you enable it by default and globally then it will affect other links that have the same selector. But yes, still possible through custom coding, example,

add_action('wp_footer', 'enable_lightbox_globally', -9999);
function enable_lightbox_globally () { echo do_shortcode('[lightbox]'); }

And it will attach the lightbox on all X’s image element.

Thanks!

[robotpants]

Hello! For 2, which is my only remaining issue, it’s thegoodok.com

I have one post live you can see it’s not going full width on mobile: http://thegoodok.com/her/

I have the CSS trick on to only go full width on mobile (which is brilliant) but there’s still padding even with the container set not to. (See screen)

[robotpants]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code:

.single-post .site {
    width: 100%;
    max-width: 100%;
}
.single-post .x-container.max.width.offset {
    width: 100%;
    max-width: 100%;
}

Please disable column’s container as well.

Hope it helps.

[robotpants]

Hmmm this made the entire post go much wider. Is there a way to only let this effect the section that has columnless container set to off versus the entire post?

Thank you 🙂

[Rue Nel]

Hello There,

If you only want the section, please select the row and in the row settings, please disable the column container. Once column container is disabled, it won’t matter whether it is marginless or not.

And by the way, I think the given code in the previous reply is not necessary thus you can remove it.

Hope this make sense.

[robotpants]

Yeah I mentioned a while back that I was already turning the column container off and it was not working. :/

[Christopher]

Hi there,

It’s possible in pages with blank-no container templates. But posts doesn’t have this option.

Please update previous code to:

.single-post header.entry-header,.single-post .site p {
    width: 88%;
    max-width: 88%;
    margin: 0 auto;
}
.single-post .site {
    width: 100%;
    max-width: 100%;
}
.single-post .x-container.max.width.offset {
    width: 100%;
    max-width: 100%;
}

Hope it helps.

[robotpants]

This worked very well but made everything do crazy on desktop. It also made the title go haywire to the left. See screenshots. :/ Ideas?

Two followups related to this and I promise to be out of your collective hairs!

1) Should I still keep this? Assuming yes!

@media (max-width: 979px) {
  .site,
  .x-navbar.x-navbar-fixed-top.x-container-fluid.max.width {
    width: 100%;
  }
}

2) I tried to get this to work with the blog/archive view (set to Style: Standard and Layout: Fullwidth) using entry-wrap but I think I’m barking up the wrong tree there? (Assuming we get the main thing working right!)

Thanks per usual! You guys have outstanding support.

[Rad]

Hi there,

Box layout and full width are against each other. If you wish to make your specific content to go full-width, then the main layout should be set as full-width too. And by doing that, it’s by removing the box that’s wrapping your entire page.

It’s not possible without breaking other structures including titles and other elements. You could try the rev. slider as a replacement, it has the full-width setting that ignores layout, it uses its own positioning.

If you wish to continue box to full-width change, then we’ll have to fix the affected elements one by one. And selectively apply alignment and box wrapping on each element.

Thanks!

[robotpants]

Well it looks like I’m trying to shove a square peg in a round hole! Eep, sorry! Since that’s the case, I’ve shifted the site over to full-width. No qualms! I can very easily adjust everything around that.

So I’ve removed all the custom code related to this topic. Which pieces of CSS should I put back in to achieve the goal? I’ve attached two images of a blog post and list/archive of what media looks like on mobile now (left) and ideal (right). I only want this to apply to mobile but have desktop still contained and not going all the way to the edge (unless I use column-less container). I tried a few versions of the different parts but they all went a bit goofy on me!

Apologies for all the headaches! I’m mostly chasing the way it works for sites like http://www.theverge.com/ and http://abduzeedo.com/ which seems to be the new way media (@media??) behaves with responsive.

THANK YOU!!!!!! 😀

[Joao]

Hi There,

You can add the following code to Appereance > Customizer > Custom > CSS , I guess your site looks pretty good like this:

@media (max-width: 769px) {
.x-container.max {
    width: 93%;
}
}

Please have a look and let us know how you like it.

Thanks,

Joao

[Author]

Posts