The theme is based on a 940px wide 16 column system. You would need to convert the base grid css elements to a percentage based system most likely. Also the offset grids as-well.
And is it an easy task to accomplish for a non-techie person? And won’t it affect the whole page?
So you only want certain pages as full width and others as normal?
That is right. Well, ideally, I want to have only the slider full-screen. That Parallax plugin uses layers of pages, if I understand it right, so I can have full-screen and full-width side by side. Is that doable and if it is, what is the simplest way?
Thanks for helping me out!
I am marking this topic as resolved. I have settled for the normal slider on a regular page
http://engeduc.com/
No need to rack your brain over a simple design whim. Thanks, everyone.
I’d like to refresh the thread and the question. Would U mark it as not resolved as it has’t been answered yet?
I was wondering if it is possible to make a full-screen template with it? I am not good at coding and stuff, and I had only a limited success with it. I am using a plugin, Parallax Gravity, to have a full-screen slider (from one side to the other), but I was wondering if something like that was possible without a heavy plugin. Here is the page I have made with Parallax.
Done. You’re right. It would be nice to know how to do it anyway.
The theme is based on a 940px wide 16 column system. You would need to convert the base grid css elements to a percentage based system most likely. Also the offset grids as-well.
style.css from line 71
/* Base Grid */
.container .one.column,.container .one.columns {
width:40px;
}
.container .two.columns {
width:100px;
}
.container .three.columns {
width:160px;
}
.container .four.columns {
width:220px;
}
.container .five.columns {
width:280px;
}
.container .six.columns {
width:340px;
}
.container .seven.columns {
width:400px;
}
.container .eight.columns {
width:460px;
}
.container .nine.columns {
width:520px;
}
.container .ten.columns {
width:580px;
}
.container .eleven.columns {
width:640px;
}
.container .twelve.columns {
width:700px;
}
.container .thirteen.columns {
width:760px;
}
.container .fourteen.columns {
width:820px;
}
.container .fifteen.columns {
width:880px;
}
.container .sixteen.columns {
width:940px;
}
.container .one-third.column {
width:300px;
}
.container .two-thirds.column {
width:620px;
}
/* Offsets */
.container .offset-by-one {
padding-left:60px;
}
.container .offset-by-two {
padding-left:120px;
}
.container .offset-by-three {
padding-left:180px;
}
.container .offset-by-four {
padding-left:240px;
}
.container .offset-by-five {
padding-left:300px;
}
.container .offset-by-six {
padding-left:360px;
}
.container .offset-by-seven {
padding-left:420px;
}
.container .offset-by-eight {
padding-left:480px;
}
.container .offset-by-nine {
padding-left:540px;
}
.container .offset-by-ten {
padding-left:600px;
}
.container .offset-by-eleven {
padding-left:660px;
}
.container .offset-by-twelve {
padding-left:720px;
}
.container .offset-by-thirteen {
padding-left:780px;
}
.container .offset-by-fourteen {
padding-left:840px;
}
.container .offset-by-fifteen {
padding-left:900px;
}
/* #Tablet (Portrait)================================================== */
/* Note:Design for a width of 768px */
@media only screen and (min-width:768px) and (max-width:959px) {
.container {
width:768px;
}
.container .column,.container .columns {
margin-left:10px;
margin-right:10px;
}
.column.alpha,.columns.alpha {
margin-left:0;
margin-right:10px;
}
.column.omega,.columns.omega {
margin-right:0;
margin-left:10px;
}
.alpha.omega {
margin-left:0;
margin-right:0;
}
.container .one.column,.container .one.columns {
width:28px;
}
.container .two.columns {
width:76px;
}
.container .three.columns {
width:124px;
}
.container .four.columns {
width:172px;
}
.container .five.columns {
width:220px;
}
.container .six.columns {
width:268px;
}
.container .seven.columns {
width:316px;
}
.container .eight.columns {
width:364px;
}
.container .nine.columns {
width:412px;
}
.container .ten.columns {
width:460px;
}
.container .eleven.columns {
width:508px;
}
.container .twelve.columns {
width:556px;
}
.container .thirteen.columns {
width:604px;
}
.container .fourteen.columns {
width:652px;
}
.container .fifteen.columns {
width:700px;
}
.container .sixteen.columns {
width:748px;
}
.container .one-third.column {
width:236px;
}
.container .two-thirds.column {
width:492px;
}
/* Offsets */
.container .offset-by-one {
padding-left:48px;
}
.container .offset-by-two {
padding-left:96px;
}
.container .offset-by-three {
padding-left:144px;
}
.container .offset-by-four {
padding-left:192px;
}
.container .offset-by-five {
padding-left:240px;
}
.container .offset-by-six {
padding-left:288px;
}
.container .offset-by-seven {
padding-left:336px;
}
.container .offset-by-eight {
padding-left:384px;
}
.container .offset-by-nine {
padding-left:432px;
}
.container .offset-by-ten {
padding-left:480px;
}
.container .offset-by-eleven {
padding-left:528px;
}
.container .offset-by-twelve {
padding-left:576px;
}
.container .offset-by-thirteen {
padding-left:624px;
}
.container .offset-by-fourteen {
padding-left:672px;
}
.container .offset-by-fifteen {
padding-left:720px;
}
Thanks. I was reading more on this, and saw a tutorial for that for another theme. It proved to be too difficult for my skills. I’m sure with time I’d figure it out, but I don’t think it is worth it. Though adding a custom page template like that would really make the theme stand out. I’m saying this with a bit of fear that it would also mean making the theme commercial, which I wouldn’t want to happen.=)
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I’m saying this with a bit of fear that it would also mean making the theme commercial,
What do you mean by “commercial” here?
I mean putting a price tag on it. =)
There is a big chance we will get full width template in the next version 1.3.3 🙂
Maybe we will add full width template in next theme version.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
@kwiecu, btw sorry for deleting your comment on this thread. Accidental.
