Jump to content
Sign in to follow this  
drmark

How to create a 70% width page template

Recommended Posts

drmark

How can I create a page template similar to the Full Width Page (no sidebar) that is only 70% width instead of full width?

Share this post


Link to post
Share on other sites
jnoh

drmark. we can do this using css. would you want the 70% page content area to be centered on the page underneath the header? and also, would you like all of your full width pages looking like this?

Share this post


Link to post
Share on other sites
drmark

The total width of any other page template that includes a sidebar is fine the way it is. I would prefer any other full width page template without a sidebar to be 65% (not 70%) instead of full width, or at least have the option of a 65% Width Page when I edit pages. It's just that a full line of text across the entire screen is too long for normal reading. Yes, I would like the 65% page centered underneath the header. Thank you.

Share this post


Link to post
Share on other sites
drmark

I watched the tutorial and applied the instructions. The Custom CSS code I inserted was: .page-id-25 #nav, #morefoot, #footer, #cred {display:none;} This eliminated the navbar and the footer on the full-width page, but it also eliminated the footer info from ALL of my blog pages and posts while leaving the navbar in place. Also, I still don't know what code to insert to restrict the page size to 65% and center the page. Next steps?

Share this post


Link to post
Share on other sites
Andrew

can you give me a live link? maybe help us w/ a screenshot/graphic with what you want to achieve?

Share this post


Link to post
Share on other sites
cmunns

Using the same page ID in the CSS portion add ` .(pageid) #fullwidth #content { width:70%; } `

Share this post


Link to post
Share on other sites
drmark

I inserted that code into the Custom CSS Rules and it didn't work. So, I put my content into a 70% width table on the full width page.

Share this post


Link to post
Share on other sites
cmunns

Glad you worked it out :) ...and just to be clear did you enter the CSS as shown below? `.page-id-25 #fullwidth #content {width:70%;}`

Share this post


Link to post
Share on other sites
drmark

That CSS did restrict the page width to 70% but it did not center the page.

Share this post


Link to post
Share on other sites
cmunns

Oh yeah my mistake, you would also have to add another rule `margin:0 auto;` to center it, but I'm glad you figured it out regardless :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×