Integrity #3 Home Page-Classic Callout Area

Support
#1

Hello
I am working with the Integrity #3 theme. I have run into a problem on the Home Page that I cannot find the solution to. I would appreciate any direction you could provide.

When I edit the page with Cornerstone, the Classic Callout area has a Title and a Message area. I would like a lot more text in the message area. When I add this additional text to the message area, the Classic Callout expands. The title remains in the same position but the Classic Callout expands so much that the Button is almost at the bottom of the page. This is what I expected/wanted. However, only a few lines of the additional text is showing. The rest of the message area (between the Title and the Button) is blank. I only see the black background in this area.

I would like additional text in this area. I tried to add a Text element to this area but it would not allow me. It will let me enter the text in the message area on the sidebar but, as I said, only several lines of the new text is visible.

I would appreciate your help.
Thank you
Bill

#2

Hey Bill,

Regretfully, the Callout element’s Message box isn’t expandable because the element’s intent is to show a short message. To see your text, you will need to copy and paste your text in a text editor like notepad.

Thank you for understanding.

#3

Thank you Christian. I appreciate your prompt reply.
I did not find it in the documentation but is there a way to insert an element inside the callout area, below the message and above the button where I can put my text? I am looking to have a half page of text below this message and above the button. Or do I have to delete the callout and use a different method(content area?) to do this same thing?

Thank you
Bill

#4

Hey Bill,

You can’t add a Cornerstone element inside a Callout but you can use shortcodes. Here are the shortcodes available in X. The Callout has a predefined/predefined CSS that gives it its unique appearance. If you’re going to use another method whether its Content Area or Text element, you won’t have that unique border design.

Thanks.

#5

Hello Christian
I followed your advice and worked to use shortcodes to get the “look” of my webpage the way I want it.
I first tried the following X theme shortcode:

[callout type=“center” title=“Engaging Title Here” message=“Add in your content here. Make sure that it is something super duper awesome to get people to click on the button below!” button_text=“Click Me!” href="#example"]

I went to wp-admin/all pages/add new and I pasted this shortcode onto the new webpage. I added my content and clicked on Preview Page. The callout is showing but the content is not showing. I tried everything I could think of to get the content visible but I was unable to do this.

As an alternative, I found the following code on the internet which looked right to me, even though I did not recognize all of the classes or shortcodes.

Engaging Title Here

Add in your content here. Make sure that it is something super


_ duper awesome to get people to click on the button below!

_


Find Out
_ More!_

When I used this for my page, it looks fine with these exceptions

  1. The button at the bottom of the page is not centered on the page but should be.
  2. The callout (the first object on the page) is full width. I want it to be a partial width in the center of the page like other pages in this theme.
  3. The callout “frame” is different with this callout. I would like to know what is making this different.

The page using the first approach with the x theme shortcodes is the “Test Home” page
The page using the alternative approach is the Home – Front Page

I would be happy with the first approach (the x theme shortcode) or the alternative, whichever we can get working.

Is this something you can help me with? I have not changed the site’s user or password since my last secure message.

Thank you
The following describes what I did to try to resolve the issues, for the alternative, if you want to see it.

  1. I have tried everything I know to get the button centered. I tried defining margin:0, margin-left, , etc., without success.
  2. I have taken several courses in both html and css. But, I am stumped with the site for this theme. I read the Knowledgebase document and the X Theme Documentation. I looked at the complete list of classes and Shortcodes. I could not find many of the classes and shortcodes used by theme. As a result I could not get any clarity that would enable me to use these for my customization of the home page as you suggested. I also “googled” many of these objects but could not find them on the internet.

To try another way to decipher the Integirty Theme, II created a new page. The only thing I did was assign a title to the page. The page was created with the default template. I could not find any documentation on the name of the default template or the code associated with that template. When I go to “edit” the page, the page is blank. It has no visible code.

I used Cornerstone inspect the new page’s callout to see how it was sized the way I want the callout on my Home page sized (not fullwidth)

When I inspect the object, I find it is a class named entry-wrap and is defined as:
.entry-wrap {

  1.   display: block;

  2.   padding: 60px;

  3.   background-color: #121212;

  4.   border-radius: 4px;

  5.   box-shadow: inset 0 -0.125em 0.5em 0 rgba(0,0,0,0.85), 0 3px 2px -2px rgba(255,255,255,0.075);

This does not appear to have any effect on the size of the callout. However, it is part of a Div. When I look at the css for the div, I see the following:

Table of Contents

Themeco does not list all the classes and shortcodes in the list of Shortcodes or The List of Classes. However, looking at the html, I do not see anything in the above that would describe the callout size.

By inspecting the element, I think I found the default template:

#6

Hello There,

Thanks for updating in! Have you tried adding Callout element using Cornerstone? I created a test page and inserted a call out element. Please check it out here: onestopwebsite.website/an-x-test.

If you want to know more about the templates and how you can re use this in your site, please check this out: https://theme.co/apex/forum/t/template-manager/20364/1

Hope this helps.

#7

Thank you for your reply. However, I am confused by your answer. I am not sure why you are telling me you added a callout element using Cornerstone. I do not mean too sound flip but I do not know how this relates to my question. This whole support ticket started because I could not insert elements into a callout that I had created. Christian, from support said:

Let me try to clarify my question.
I tried two different approaches to get what I needed. Both approaches are based on Christian’s recommendation to use shortcodes because elements could not be inserted into the calllout(see Christian’s comments above). Both approaches created a callout and all the objects that I want inside the callout. However, both approaches had other problems associated with it even though all objects were created inside the callout.

If we could fix the problems with only one of these approaches, that would be fine, I could then use the approach that we fixed.

The first approach that we can try to fix is in “Test Home” page. The problem here is that the callout is visible but the content is not visible.

The seccond approach we can try to fix is in the Home- Front Page. The problem here is that:

  1. The button at the bottom of the page is not centered on the page but should be.
  2. The callout (the first object on the page) is full width. I want it to be a partial width in the center of the page like other pages in this theme.
  3. The callout “frame” is different with this callout. I do not need this fixed but I would like to understand what is making this different.

Thank you

#8

Hi William,

I would like to approach to give you proper CSS code suggestions that you can add to the second approach, but as you are working on your website locally I do not have any means to see the code live on my browser to be able to use my Google Chrome Browser developer toolbar to give you proper CSS code. I suggest that you temporarily upload your website to an online server so that we can access the page in question and check in our browser to give you proper support.

Meanwhile, there is another trick that you can use to add extra information into the callout. You can use the Cornerstone and add the Callout element:

Now as you want to add the additional information you will see that you can only add text and no elements:

But actually, you can go to X > Global Blocks and add whatever element you want there and then use the auto-generated shortcode of that Global Block and paste it in the text section of the call out. That way you will be able to insert the element into the Callout.

For more information about the global blocks please read this article.

The method above does not guarantee that you might have few style problems which will need additional CSS code to fix which will bring us to the first step that we need to have a live representation of the case to be able to give you proper CSS code suggestions.

Thank you.

#9

Christian
Thank you for your reply
fyi, the latest version of the website is online at onestopwebsite.website. The password is in the secure note that I previously sent. It has been out there for a while. You can see everything by going to that site.

RueNel of your staff added a page several days ago but you do not need to look at that. I do not think it is relevant.

So, all the code has been out there for a whiile(at least a week). You can see it by going to onestopwebsite.website and use th epassword sent previously in my secure note.

Following are the pages in question:
The first approach that we can try to fix is in “Test Home” page. The problem here is that the callout is visible but the content is not visible.

The seccond approach we can try to fix is in the Home- Front Page. The problem here is that:

The button at the bottom of the page is not centered on the page but should be.
The callout (the first object on the page) is full width. I want it to be a partial width in the center of the page like other pages in this theme.
The callout “frame” is different with this callout. I do not need this fixed but I would like to understand what is making this different.
Thank you

#10

Hello Christian
I am a little confused. Seven days ago you told me:
“You can’t add a Cornerstone element inside a Callout but you can use shortcodes.”

Your latest response seems to be saying just the opposite.

As far as adding text to the callout, the text is limited, which is the initial problen and the one that started this thread. Based on your reponse to use shortcode, I created Approach 2 (this was actually the first approach but I labelled it No 2 for the post)

When I experienced the problems noted above, I started on Approach 1. And here I am.

I have done a loto of research. This stuff is not very intuitive and the documentation is not complete so I am currently unable to go any further.

Based on your latest comments, I am going to “play” with this and try to get more familiar with the details and possible alternatives.

In the meantime, If you could help me with the css you talked about, I would appreciate that very much.

Thank you very much for all your help
Bill

#11

Hi Bill,

First of all I noticed that you are editing the pages outside cornerstone. Please note that pages that was created in cornerstone can only be edited in cornerstone.

  1. In Test Home I fixed the callout by adding <br> in message attribute instead of next line.

  2. In your Home page, I added center-text to make your button centered.

  3. In your Home page, you need to add container shortcode to contain your content.

http://demo.theme.co/integrity-1/shortcodes/container/

Hope that hepls

#12

this explains a lot.
Thank you very much

#14

You’re welcome!
We’re glad @Paul were able to help you out.