X Theme Blog Posts Missing "Insert Shortcodes Element" Cube

Support
#5

Hello There,

Sorry for that. It should be X > Cornerstone > Settings and find the “Show Legacy Shortcode Generator”.

Please let us know how it goes.

#6

Why is its use not recommended? What is the new quick way to add embedded videos and social media sharing to blog posts?

Thanks.

#7

Hello There,

Thanks for writing in! This is not recommended because it does not work with the new elements. Only old X shortcodes were present in it if you wish to continue using those shortcodes. The easist way to added embedded videos and social sharing in your blog posts is to create the post in Cornerstone. You can drag and drop the video element and the social sharing element in your post.

And if you just want to default WP editor in creating your posts, It is best that you use 3rd party plugin like Social Warfare or Add This button to add social sharing in your posts.

Hope this helps.

#8

Wait, I can create a post in Cornerstone??? Can you link to the tutorial for that? Thank :slight_smile:

#9

I just tried using Cornerstone. There seems to be no way to make the images as wide as the feature image in the posts and also, no way to easily add a caption to the image. Is this correct or am I missing something?

Thank you :slight_smile:

#10

Hi There,

Yes, you noticed you can create a post, save it, click edit with Cornerstone.

If you add the image element in Cornerstone you can set the width to 100%

If you are facing difficulties, please provide the URL of the page you have placed the image.

If you want to add an image with the caption, you could try using the PROMO Element instead or adding a text element below the image element.

Hope it helps

#11

Thank you. As you can see, it does not work with 100% width. If the % is increased, the image spills over to the widget area. I need the image to be as wide as “Section 1” in the first image.

#12

Here is how they look when I don’t use Cornerstone. This example has an image caption.
You can see that the text is aligned with the post image width, which is just slightly smaller than the Feature Image.

#13

Hi There,

Thanks for clarifying

Please dd the following CSS to Theme Options CSS

.x-main.left {
    padding-right: 0px !important; 
}

Hope it helps

#14

How do I make all my images display the width of the “Section 1” in the first image?
Thank you.

#15

Also where is “Theme Options CSS”. When directing to particular sections it is very helpful to provide detailed directions to save your customers from asking. Especially since so much has changed in the last few months.

Thank you :slight_smile:

#16

Hi There,

You will add the code at your Wordpress Top Admin Bar > X > Theme Options > CSS

The code provided will remove the padding right and as long as your images are large enough they will cover 100% of the width, if your image is smaller, you can add the following CSS to those images, on the new image element, you will find the CSS Inline Box at the Customize tab, on the classic image element, you will find the style box at the bottom of the element. And you will add:

width: 100%;

Hope it helps

#17

Thank you :slight_smile:

#18

You’re welcome!

#19

Quick question:

Does this code:

.x-main.left {
    padding-right: 0px !important; 
}

Affect images in posts that were not created using Cornerstone?

Thank you :slight_smile:

#20

Hi,

That code will remove the space between your main content and sidebar globally.

If you have set your images to have a width of 100%, it will affect the spacing on the right.

If you wold like it to take effect only in your blog page, you can change the code to this.

.blog .x-main.left {
    padding-right: 0px !important; 
}

Thanks

#21

I am hoping to only affect 1 blog post, not all of my blog posts.
I have used WP to create about 200 posts already because I didn’t know that I could use Cornerstone.
So now I was thinking of trying it but I need the Cornerstone generated posts to have the same width and look as all of the other posts.

Thank you :slight_smile:

#22

Hi There,

In that case, we have to add post id on the CSS like below:

.postid-5940 .x-main.left {
    padding-right: 0;
}

That CSS will work for this post: https://artthescience.com/blog/2017/10/27/creators-bojana-ginn/
For other post, change post ID. See this: https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59
When applying it to multiple post, it can be like this:

.postid-1 .x-main.left,
.postid-2 .x-main.left {
    padding-right: 0;
}

Hope this helps.

#23

That’s brilliant! Thank you :slight_smile:

#24

You’re welcome!