Sidebar on Home Page

Hello
I am working with Integrity #3 theme at onestopwebsite.website. My password is the same as sent in earlier secure note.

I want to put a sidebar on the front page so I did the following:

  1. Go to Appearance–>widgets and drag the text widget under the sidebar.
  2. Go to Appearance–>Customize–> Layout and Design
  3. Under Content Layout, click the Content Left, Sidebar Rlght radio button
  4. Click Publish
    The progress icon spins for a few seconds and stops. The Publish button changes color and stays that color. The sidebar never appears.

I would appreciate your help in resolving this error

Thank you
Bill

Hello Bill,

We appreciate for posting a very detailed post information. The sidebar did not appeared in your homepage because you are using a Blank - No Container | Header, Footer page template. Please edit your homepage and change the page template to the default page template. To know more about the page templates, please check this out: https://theme.co/apex/forum/t/features-page-templates/50/1

Hope this helps.

Thank you for your prompt reply.

To get this look, I was advised that I could not do it with the default template because the default callout could not be changed in the way I needed.

Is there another way I could get the sidebar?

Thanks
Bill

As you said, I went to the edit page for the home page, went to the menu on the right hand side, set the Template to Default Template and clicked on Preview.

However, the sidebar is still not showing

Bill

I updated the Home page and now the sidebar is showing.t
I need to figure out how to remove it from other pages.
The page is now its former size but no includes the sidebar. I also need to figure out how to make the sidebar, on the home apge, move to the right so I can expand the content.

Can you offer any guidance on how to accomplish these two things

  1. Move the sidebar to the right and expand the content. I would like to make the content look the same as before the sidebar was added and have the sidebar on the right
  2. Remove the sidebar from all pages except the home page

Thank you
Bill

I figured out how to remove the sidebar from selected pages.
I now need to find out how to adjust the content and sidebar and sidebar sizes for different pages.

I am not find the documentation very helpful but I am looking at everything I can find.

Thank you
Bill

Hi There,

To change the content and sidebar width for the home page only, please add this custom CSS under Theme Options > CSS:

.home .x-main {
    width: 75%;
}

.home .x-sidebar {
    width: 22%;
}

For other pages, please try with this custom CSS instead:

.page-id-123 .x-main {
    width: 75%;
}

.page-id-123 .x-sidebar {
    width: 22%;
}

The 123 number is the page ID.

Hope it helps :slight_smile:

Hello
Thank you for your response. Unfortunately, following this did not make any difference.
I went to wp-admin, clicked on Appearance–>customize.
I clicked on Manage Theme Options
This brought up the customize menu.
To the left of the customize menu, I clicked on CSS
I pasted the following into the css area:
.home .x-main {
width: 75%;
}

.home .x-sidebar {
width: 22%;
}

.page-id-123 .x-main {
width: 75%;
}

.page-id-123 .x-sidebar {
width: 22%;
}
I clicked on Save. There was no difference in the appearance of any of the pages.
These changes were made online if you would like to see them at onestopwebsite.website. My password is the same as contained in my secure note.

Thank you
Bill

Hi Bill,

Unfortunately, we do not have access to other threads secure note. Please add a secure note and give us the URL/User/Pass of your website.

Now what I want to suggest:

Please remove the given CSS code and go to X > Theme Options > Layout and Design. Set the options in a way that you want to have on the inner pages.

Then please Go to X > Theme Options > CSS and add the CSS code below:

.home .x-main {
width: 78%;
}

.home .x-sidebar {
width: 19%;
}

Now, please change 78% and 19% and play with the numbers to find the best composition of the values of the code.

Thank you.

Thank you very much for your reply. Your instructions were great. This is the most progress I have made(with your help)

However, for some reason the sidebar is not displaying on the home page. When adjusting the inside pages I did change the layout to full width but that does not seem to be affecting the home page.

I followed your instructions and things seem to be heading in the right direction. I am having control over the way things are being displayed. I think if I keep playing with it, I will get what I want.

I have no idea why the sidebar is not displaying.

I did not touch anything relating to the sidebar so I do not know where to look for the new problem.
I will send you a secure not with the id and password for my website onestopwebsite.website.

Also, based on your comments I see that there are several places to enter css code i.e. the customize page, theme options page, the edit page, the inspecter page, etc.
Is there documentation (I could not find any) that talks about where to enter the css?

Again, I would appreciate any help you could provide.

Sorry to make so many posts. I think there will be no problem doing what I need. Then, I run into problems. I have searched the doc and googled but can’t figure it out.

I think I have the size of the Home page content area the way I want it. However, I would like the text on the Home page to fill most of the content area like it does on the Roadmap page. I tried everything I could think of. I also have the padding and margin set to 0.

I even inspected the Roadmap page looking for clues how that page did it (I did this page through the Layout and Design in Theme Options as you said)

I also googled this but could not find a solution to get the text to fill the Home Page content area but was not able to find a solution.

Also, I still have not been able to get the sidebar to display again.

Thank you
Bill

Hi Bill,

The page layout will not work if you have set full width content layout in Theme Options > Layout and Design

To add sidebar to your homepge, you can add the code below in your child theme’s functions.php file.

  function add_sidebar_home($layout) {  
   if(is_front_page()) {      
       $layout = "content-sidebar";
   }
  return $layout;
}

add_filter('x_option_x_layout_content', 'add_sidebar_home',9999);

Then to make the content area wider, you need to remove container in your content.


 [container]     
 
<div class="x-main full box-sizing:border-box;" style="padding:0px; margin:0px;">

Make sure to remove the closing tags as well.

</div>
[/container]

Hope that helps

This is GREAT! Thank you VERY much. This is exactly what I was looking for.
A question, please.

  1. Didn’t I have to set full width content layout in Theme Options > Layout and Design, in order to get the look I wanted on other pages(not the home page)?
  2. I thought the css I entered for the home page overrides this. I also set the page template for the Home page to “content left - sidebar right”
  3. Is the php function "add_sidebar_home($layout) " in the documentation? Should I have found this in the documentation? Is there a way I could have resolved this on my own? I googled this and looked through a lot of examples from the Themeco community but did not find anything applicable.
  4. I think I have a good knowledge of php and css. How can I learn more about how to resolve these issues?
  5. There are many ways in the X Theme to enter CSS; in the customizer, on the edit page, in the Cornerstone inspector fields, etc. Is there documentation that will guide me on which to use in different scenarios?

Thank you again for this great help.
Bill

Sorry. My previous email was based on the fix for the sidebar which is great. I should have checked the home page layout before I responded.
I removed the container from the home page. I am still unable to get the text to fill the space on the home page. It looks ok on the left but there is too much space on the right. I would like the text on the right to extend further, to look like the Roadmap page.
I added “padding-right:0;” to the css but that is not helping.
Could I please ask for your help again?
Thank you
Bill

I got the home page working. I am sorry AGAIN. It was my mistake. I missed one of your instructions.
So the home page is very good now. Thank you very much.

I would appreciate it , though if you could try to answer some of the questions I asked.

Thank you again and I am sorry for unnecessarily complicating this.

Bill

Hi Bill,

Sorry but, we kindly ask that you create those other questions on a separate thread, as this one is getting drift off and hard to follow.

How To Get Support

Thank you for understanding,

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.