Layouts not working

Hello,
I want to put a different background to some pages in order to realize something like this:
image 

I tried to use Layouts function, but it doesn't work: on my first attempt, I succeed to create a layout, but it didn't show the background image. 
After, I created other ones, but when I tried to preview them I only received a 404 page error, both as a draft and as a published layout.

Can you explain me the best way to achieve my goal or how can I solve this layouts function error?
I've already tried to search a solution on your forum, but there are too many entries!

Other information, if them can be useful: 
I'm using BT Child theme;
my CSS customizations are:
----
#Top_bar #logo {
height: 90px;
padding: 0px 0px;
}

body:not(.template-slider) #Header {
min-height: 90px;
}

@media only screen and (max-width: 767px)
body:not(.template-slider) #Header {
min-height: 90px;
}

#Top_bar .menu > li > a span:not(.description) {
line-height: 53px;
}

.header-split #Header .top_bar_left .menu_left {
float: left;
width: 40%;
text-align: left;
}

.header-split #Header .top_bar_left .menu_right {
text-align: left;
}

@media only screen and (max-width: 1239px)
#Top_bar a.responsive-menu-toggle i {
font-size: 40px;
line-height: 35px;
}

body:not(.template-slider) #Content {
padding-top: 0px;
}

.pager {
background-color: white;
margin-bottom: 40px;
padding: 20px;
}

.image_frame:not(.no_link) .image_wrapper img:not(.ls-l) {
margin-bottom: 0px !important;
}

.post-item {
background-color: white;
margin-bottom: 0px;
}

.with_aside .four.columns {
margin-top: 20px;
}
----

Thank you in advance,
Daniele

Comments

  • Hi,

    please show us on screenshots what errors you got because we do not understand. Please notice that all 404 errors are not related with theme at all so if you got 404 error, it must be something else wrong.
  • Hi,

    here they are:

    image

    image
  • You must misunderstood something probably :) When you click "Preview changes" button, you won't see anything because this is not a standard type of page or post. This button for "Layouts" simply does not work. If you want to check how layout looks like, you must set this layout for page (for each page under "Page options" you have an option to select layout). This is the only way to preview the layout for page.
  • OMG, sorry. Spending hours on a project makes us crazy :-S It was simple!
    Thank you!


  • OK, now layout works fine! :-)

    But I have a question: is it possible to do something similar to the first screenshot I attached before, using a "full-width" Top Bar with menu and then a "boxed" body for the rest of content, to show the background image? 

    It seems not :-(

    Many thanks!
  • If you will set boxed layout for page then you can send us url to this page and we can check if it is possible to be done with custom css.
  • Thank you so much, I found a partial solution but it works only at full-width resolution (1920px).
     
    I create a full-width layout, setting the background image, logo and header style.

    Then I put this custom css in page:
    ---
    #Content {
    width: 1280px;
    margin-left: 320px;
    margin-bottom: 150px;
    }

    #Wrapper {
    background-color: transparent;
    }
    ---

    It works perfect at 1920px, but due to "margin-left" setting it is going to broke when you reduce browser width.

    Maybe, can it be better to set a boxed layout and then to increase the Header width? 
    Can you suggest me the right way to do that, without responsive issues, please?

    Now the website is in Mantenaince Mode. I don't want to go online, but I'll willing to do it if that's what it takes. Thank you!
  • We need to have a look on website and only then we'll be able to tell you if this can be fixed or not.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.