Is it possible to have the side widget only on the homepage?

Support
#1

Hi there,

How can I make it so that my side widget bar is only available on the homepage?

#2

Hey @stevenkwlee,

You can hide the sidebar except the home page by adding this code in Appearance > Theme Options > CSS

body:not(.home) .x-sidebar {
    display: none;
}

Hope that helps.

#3

Hey Christian, thank you for this code, it worked.

However, when I use it, there is now a large, empty gap on the right side of my pages, as shown by this picture:

Is there a CSS line that would get rid of this empty space, only on pages other than my homepage (as this is the only page where my side bar would be)?

Thanks!

#4

Hi There,

To remove the empty gap on the right side please add this in the Global CSS. You can do this by going to [ X > Launch > Options > CSS ]

body:not(.home) .x-sidebar {
    display: none;
}

body:not(.home) .x-main.left{
    width:100%;
    float:none;
}

Hope it helps.

#5

Hi, thanks for your response.

However, this still happens:

How might I be able to fix this?

Thanks!

#6

Hi,

You can try this code instead.

body:not(.home) .x-sidebar {
    display: none;
}

body:not(.home) .x-main.left{
    width:100%;
    float:none;
}

body:not(.home) .x-content-sidebar-active .x-container.main:before {
   display:none;
}

body:not(.home) .x-main {
    background: #fff;
}

Hope that helps.

#7

Hey there, thanks for the response. It looks better, but now I’m getting this:

#8

In addition to the codes given above, please add this.

.x-content-sidebar-active .x-container.main:before {
    right: -35%;
}

Hope that helps.

#9

Thank you so much for the help. Now just one last thing:

When I click on a post, there is a big white space to the right:

Is there a way to center the blog posts and featured images to be in the middle?

If you can, please provide instructions on these two separate ideas:

  1. Just centering the featured image

  2. Centering featured image + blog text

Once again, thank you.

#10

Hi There,

1.) To center featured image, use this CSS:

.single-post .entry-thumb {
    text-align: center;
}

2.) Center both featured image and blog text:

.single-post .entry-thumb, .single-post .entry-wrap {
    text-align: center;
}

Hope this helps.

#11

Thank you!!

#12

Glad that we could be of a help :slight_smile:

#13

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