Creating A Custom Page Template For a Wider Layout

[brennak]

Hello! I am using the Altitude Pro theme and I am trying to figure out how to change the container size for only one particular page. My initial thought is that I am going to need to create a custom page template, but for lack of better knowledge, I figured I would reach out here for help as well.

The page I am working on is essexdigitalplatformtest.com/login. (Obviously this is just a test site for design purposes.) This page has a portal login iFramed into the page and it is set to 100%. However, the body size on this page is really small, making it hard to navigate through our portal once a client has logged in. I'm assuming I need to change the size of the body or container for this page so that it is wider? If I am correct, can someone point me in the right direction of how to go about this?

I am probably using incorrect terms here, but hopefully someone catches my drift. Appreciate any help!

http://essexdigitalplatformtest.com/log-in/

[Christoph]

Hi,

if it is really only this one page, there is no need for a custom template.
You can assign a Custom Body Class in the page editor or you can use the page-id to target the page with css.
Are your visitors really staying on this page after they login or are they redirected somewhere else?

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[brennak]

Hi Christoph! That's great news---and makes total sense! Yes, they will still stay on this same page after they login because everything happens within that iframe. And we want our portal to stay under our domain name (the actual portal is hosted on a different site.)

Not to be a hassle, but do you by chance know of any tutorials that can explain exactly what you mentioned with the Custom Body Class?

Thanks so much! Really appreciate it!

[Christoph]

Hi,

you are welcome.

You will find the custom body class here:
http://screencast.com/t/FRvWSYF5v

You are assigning a css class for the page.
E.g. signin
http://screencast.com/t/KUSZwIBfGFD

You can use

.signin .what-ever-css-class-you-want-to-target {
}

to target only the css of that page.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts