full width template

Hello,

I'd like to make a full width template with Game in http://jreplay.com. Currently I can temporary set the the value in Template width to a very high value (1500). However, if the monitor has a high resolution (2K/4K). It will be like this:
http://screencast.com/t/aD8JkblY1
Is the any way to set the width of template by percent (100%)?

Thanks,
Giang Anh

It would be great if I am able to make the 100% width for content only because currently the main menu is scaled also: http://screencast.com/t/u6IkbVJDqwlP

Hello,

Please help.

Thanks.

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

.gkPage {
    max-width: 3000px;
}


Hello,

It doesn't work on my both styles:
http://screencast.com/t/0E547ggHWDPD
http://screencast.com/t/wXlJBk8QO

Override is enabled of course. You can test in the small res monitor by zoom out the web page.

Thanks,
Giang Anh

Hi

Try using this code:

Code: Select all

.gkPage {
    max-width: 3000px !important;
}


It works. Thank you TEITBITE

Hi.

I found that this will increase the width for all elements on the page instead of only the content area:
http://screencast.com/t/6gZp0qlls
Is there any way to keep the header bar (mainmenu) at the middle (with 1200) and increase the width of the content area only?
And I'd like to use this css for all pages except home page. Is there any way to do that?

Thanks,
Giang Anh

I found the way to do this using this override css:

Code: Select all

#gkContent, #gkPageContent {
   max-width: none;
}

Hi

I think this should work for all pages:

Code: Select all

#gkPageContent {
    max-width: none !important;
}


Thank you teibite.
I don't add !important since I don't want to apply full width in my hompage by adding custom css in the template setting for template style assigned to my hompage.

Hi

But if You are willing to use full width than it's the best option. There is a line which locks width to specific value, so You can remove this line, but it will got overwritten during template update again. Anyway using override.css file is the only way to do so.

Hi,

I'm sorry I was not clear in latest post. I mean because I want to add the custom css code in the template setting of my home page (I have 2 styles of Game, one assigned for home page and one for the rest pages). If I use !important in override.css, the css code I input in template setting will be ignore (http://screencast.com/t/S6nubzrP)

So far I have what I want by follow this.

Thanks,
Giang Anh

Hi

Ok than. I'm not sure if I understand, but if it works than lets just close it.

Hi,

I met other issue. I want to make the full width content for all my pages except home page. So I create 2 template styles:
- I assign 1 style for my home page and the rest for all other page
- I add full width code to override.css
- I add 960px width code to home page style
I have what I want, however, some time when I visit my home page, the site show full width content. I have to refresh the page to get non-full width style.
Is my setting incorrect? Do you have any suggestion to solve this?

Hi

Since it's the same template and names of the files are same cache may not clear in time to use the different value.

Try using a page class suffix, for example "frontpage" or add the max-width value to the custom css field not override.css file.

I'm not a developer. So could you please give me an example of using page class suffix? I tried some times by the ways in Google but they didn't work.

Hi

Here is a detailed instruction how to use it: https://www.gavick.com/documentation/un ... mla-pages/

This works. Thank you so much.

Hi

Finally I'm really glad this solved the problem.

Using page class suffix with override.css didn't solve the issue. I've move the code to the custom css field. Will let you know the result soon.

Hi

I do not understand. Do You mean that putting the code with suffix itself into override.css field doesn't work ?

I can see that it worked for frontpage with this code:

Code: Select all

.HomePage #gkPageContent {
    max-width: 980px !important;
}


so probably the code was placed wrong or some other class was messing with this one. Anyway I think it's a success now

Yes, but as I said, sometime (when the cache or session is refreshed I guess), it doesn't work. I have to refresh the page to have 980px width:
I confirmed that bot solutions you mentioned doesn't work.

Thanks,
Giang Anh

Hi

It doesn't make sense ;/ There is only one page with suffix "HomePage", so same file can be loaded any time. Please next time when You will see this happen see the source code and copy it for me. I think it's because of a validation error and not this code.