Contents will not center on Screen

The contents are shifted left and not centered. This page is believed to have no sidebar.
But, after switching to pro editor, I no longer see a way to add or remove sidebar widgets and confirm what page layout I am using…
Please advise.

Hi Loren,

You can remove the right sidebar by going to Pro > Theme Options > Layout and set the proper option to have no sidebar.

Also, if you go to the homepage and check the Page Templates at the right section of the screen you can choose to have no container mode which will cause the page to be full width. You can change the same option if you are inside the Pro editor and you click the settings icon at the bottom left hand side of the screen.

Thank you.

Objective:
a) We want the Logo and Navigation Bar to go clear across the Screen at all times.
Fullwidth does this, but Boxed and " Blank Container-Header Footer" do not. Can this be changed or fixed?

b) We want the page title like “HOME” to have the background behind it (i,e. no white page). Can this be fixed?
Fullwidth does go across the screen, but Boxed does not. (see “c)” next

c) We want the white page centered. Using “Blank Container-Header Footer” as you suggested does center the content. But all the page titles, i.e. “HOME” have disappeared. How do we fix this?

d) In Fullwidth mode, the Sidebar images allow the background to show through (Much preferred). When using “Layer Content Left and Sidebar right” the white Content page extends under the sidebar images and the background does not show through. How can we get the background to show between the images and widgets. in the sidebar?

Thank you for your continued guidance.

Hi Loren,

I am little confuse with each question, so I will explain the sctructure instead so you can decide.

First site wide structure, you have to set it FULLWIDTH on Theme Options > Layout and Design

That setting will control the entire structure. Content container width can be adjusted per page using CSS or on section>container when you inspect it. But that should be set first. That’s the main box/container that will define the width.

Under that setting, you can see CONTENT LAYOUT. If you intend to use a sidebar on a page, please choose a layout with sidebar. Either left or right.

Another layer of structure after that is the PAGE TEMPLATE. You have set the sitewide structure already, though you might want a some page to be fullwidth, then some page with sidebar. We can set that using PAGE TEMPLATE.

Using Ethos stack, if you set CONTENT LAYOUT with a sidebar on THEME OPTIONS, then on a specific page you want a content to be fullwidth, we need to use LAYOUT FULLWIDTH PAGE TEMPLATE:

It will give you a white background on content container. That is set on Ethos stack. If you want it to be transparent so you can see a background image behind it, try adding a class on this page settings:

Then add this CSS on THEME OPTIONS GLOBAL CSS:

.transparent-fullwidth.x-full-width-active .x-container.main:before {
    background-color: transparent;
}

Using Page template with sidebar and you want it to be transparent too, same step,add the class but use this CSS:

.transparent-fullwidth.x-sidebar-content-active .x-container.main:before {
    background-color: transparent;
}

Other structure options is possible but it will require customization that is outside the scope of our support. Hope this helps what you are trying to achieve.

I am unable to locate the 3 and 4th screen shot. How are they accessed?

To clarify our layout desire.

  1. http://stunlight.info/technology/rlt-inside/ This page has general look we want on a sidebar page. The page title shows (“RLT Inside”) above the white contents.and below the navigation bar. Plus the background shows through the sidebar.
    But we want to get a narrow margin on the left of the white content page. The white should not extend all the way to the left hand side of the screen. The margin on both sides of the white page should be about the sames i.e. 1-2 cm (about 60 px) leaving the background visible on the left if the screen is over 1200 px. How do we fix that?
  2. http://stunlight.info/ This page does not look like it should. There is no “Title” between the Navigation bar and the white content page. We would like this page to match the Title layout on the http://stunlight.info/technology/rlt-inside/ . How can this be accomplished?
    Next, There is no background showing on both sides of the white content page. How do we fix that?
    I tried the Boxed layout instead of Fullwidth, but it messed up the slider page and the Title is missing.

CORRECTION-The last sentence should have read," Next, There is no background showing on both sides of the white content page. How do we fix that?
I tried the Boxed layout instead of Fullwidth, but it messed up the Sidebar containing page layout and the Title is missing.

Hi Loren,

We can access by clicking the icon above Save button:

1.) On that page, click CSS button on the left side to open CONTENT CSS. Add the following:

.x-content-sidebar-active .x-container.main:before {
      width: calc(100% - 26%); /*Adjust 26% as needed*/
}

2.) The following templates doesn’t have TITLE by design.

  • Container | Header, Footer
  • Container | Header, No Footer
  • No Container | Header, Footer
  • No Container | Header, No Footer
    You are using Container | Header, Footer template on the page. Please use Layout - Fullwidth template instead if you want the page title back. Then add this custom CSS on CONTENT CSS part of the page to see background on the sides
.x-container.max.width.main {
    background: #fff;
}
.x-content-sidebar-active .x-container.main:before {
    background: transparent;
}

Hope this helps.

Now I understand my inability to follow the instructions. Based on youritem 1) reply I do not have the “Page Settings” Button on that screen. See attached screenshot.

How do I add it?

Hello Loren,

Thanks for updating the thread.

Looks like it’s permission issue. Under Pro > Settings > Permissions > Administrator > General > Pages and in that make sure Access Settings option is selected.

To learn more about permissions please refer following post:

Thanks.

Unfortunately, that did not fix the problem of no “Page Settings” button.
Can you please see what the problem is?

Hi Loren,

I’d appreciate if you can give us access to your website so that we can check and see why this is happening for you. To do so please provide us the information below:

  • WordPress Dashboard URL
  • WordPress Dashboard Username
  • WordPress Dashboard Password

You need to use the Secure Note feature to add the login information privately to us.

Thank you.

I gave you secure access in the previous thread, but will send again.

I have administrator rights. All of a sudden after following the instructions above, I am getting this error. “Oops! Looks like you’re trying to view something you’re not allowed to access. Check your permissions in the plugin settings.”
Please suggest a fix.

Hello Loren,

Using the access you have given us, I can see page settings:

I have checked homepage and another draft page. Page settings are there.

On what page you are getting that error? In case we can’t duplicate it on our side, would it be fine to share the same credentials you are using just to see if it is user permission issue? Thanks.

I solved the “Opps” problem. Somehow the permissions got unchecked via >Pro>Settings.
But as you can see I still do not have the “Page Setting” button.

I tried to turn every permission on. Perhaps I missed one. Attached are the Keys.

Hello Loren,

The Preference tab you have shown is taken from X > Theme Options. To display the Page Settings, you will need to edit a page in Pro Editor. An if you are not using Pro editor in building the page, just edit the page using the default WordPress Editor and find the Page Settings meta box.

To know more about Page Settings and how you can find them, please check this out:

Hope this helps.

You said, "… Then add this custom CSS non CONTENT CSS part of the page to see background on the slides. But that is working without this extra code.
.x-container.max.width.main {
background: #fff; }
.x-content-sidebar-active .x-container.main:before {
background: transparent; }

I was unsure what this code was to accomplish. It did not seem to have an effect.

So for others that want the background to show through on both full width pages and Sidebar pages, these instructions worked once I was able to access the various locations.
Thank you.

Hi Loren,

Glad the Page Settings is resolved.

Regarding these custom CSS, please link the thread where you get that CSS code, I’m sure there is a reason why is that given.

This first block is to add a white background on the content area.

.x-container.max.width.main {
	background: #fff;
}

The problem with this is it affects all the pages even the other pages that were not intended to be affected. Another thing is this extends the white content background to the sidebar. So yes this CSS code needs to be revised to work as intended for.

This second CSS code is the contrary, this removes the white background in the content, so you can see the page background-image behind, and this only affects the pages that set to have a sidebar, not the fullwidth pages.

.x-content-sidebar-active .x-container.main:before {
	background: transparent;
}

The problem with this is if you remove the background color on the content, your text kind of blend to your page background-image and it’s very hard to see, something like this:

Unless you added a white background to your section, like what you did here:


That is fine, but kind of tedious if you have lots of section and pages.

We kindly ask if you have a follow-up question, please write it on a new thread as this is one getting long and mixed up and getting hard to follow.

Thanks,

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