Want to create a full-width landing page with theme assets

[Lynkai]

I am currently trying to prepare a site which will also show landing pages to push people towards content over many releases/articles.

However for the life of me I am unsure as to how to create a full-width page template and then begin creating the pages styled as I want them.

I have contacted the theme creator to try and get him to make me a full-width template but he has no plans to do so, I dont see it as being a massive ordeal but searching Google try to and get a tutorial on doing so doesnt really pull up this sort of code used in the template I am running.

Would love it if someone wanted to help show me the ropes with this.

Trying to aim for something like this;

Halo 5: Guardians - Cover Story Hub July 2015

Just Cause 3 - Cover Story Hub December 2014

Which retains a sidebar and navbar, but just clueless

This is the theme: http://demo.explora.com.uy/kairos/left_sidebar/

PS: Sorry for the long read, im no good at writing this sort of stuff up!

[ralphm]

Hi @Lynkai. Theming is not my area, although those landing page examples are actually pretty simple. There is ony an appearance of a full-width layout because of the large background image. Essentially, there’s just a large background image in the main content area, with a single column containing a list of links. That’s about as simple as it gets. However, once you start to mess with themes, of course more complexity is introduced. Still, you should be able to create a page that retains the header and footer areas, add your content in the middle along with a large background image.

[Lynkai]

Thanks for the response atleast, Ralph!

I am using a page builder, but given the way that the theme is structured it seems limited to just a certain width - so cannot do a full image, as it literally would only show ‘x’ amount of image before the rest cutting off.

It’s pretty annoying really man. Clueless here

[ralphm]

I’m not sure how easy it is for you to access the code, but there should be two easy options:

1. Add a large background image to the body element, as they do on the site you want to imitate. E.g.

   body {
   background: #0a0e15 url(“http://media1.gameinformer.com/filestorage/CommunityServer.Components.SiteFiles/images/hubs/justcause3/1412justcause3_webBG-v01.jpg”) 50% 32px no-repeat;

2. Add a container div around your content area thathas 100% width and then add the background image to that.