Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

HowTo: Main area scrolling


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Mar 4, 2010, 08:16 AM
Tamas
 
21 posts · Jan 2009
Hungary
Hi!

I would like to have the header, footer and side-widget areas fix on the screen.
The text and images from Posts and Pages should be displayed into a fix-sized main area.
If the info is more than the fixed size, than THAT area could be scrolled.

So, how to make the MAIN AREA scrollable?

Thanks,

Tamas
  #2  
Old Mar 5, 2010, 09:41 PM
Eric Bobrow
 
70 posts · Jan 2009
I have the same question. In doing a Google search, I came across a comprehensive tutorial that covers this for web pages in general:
http://www.noobcube.com/tutorials/ht...inners-guide-/

It shows how to create fixed headers and/or footers that work in all major browsers, including IE6 (which is the most troublesome). I'm not sure how easy it will be to implement this in Atahualpa, but I may give it a shot. It doesn't deal with sidebars, but it's likely the approach could be extended to work for them too.
  #3  
Old Mar 6, 2010, 12:47 AM
Eric Bobrow
 
70 posts · Jan 2009
SUCCESS!

It took a little while, but I succeeded in getting my header to remain fixed at the top of the screen in all browsers!

The tutorial article I referenced above gave all the tools, but of course I had to adapt things for use with Atahualpa. Here is a summary of what I added and changed to make this work:

In ATO > Style & edit HEADER AREA -
HTML Code:
<div id="header-wrap">
	<div id="header-container">

%pages %logo %bar1 %image %bar2

	</div>
</div>
In ATO > Add HTML/CSS Inserts > CSS Inserts -
Code:
#header-wrap {
	position: fixed;
	width: 1000px;
	top: 0px;
}

#header-container {
	height: 90px;
}
To keep the center and sidebars from running up underneath the fixed header, one needs to adjust the top padding to keep that part of the browser window clear. In ATO > Style & edit CENTER COLUMN > Center Column style - adjust the top padding, the first number in the padding list (the default is 10px) to accommodate the Header height - I set mine to 120px and my line became:
Code:
padding: 120px 15px;
In ATO > Style & configure SIDEBARS - adjust the top padding (first parameter in the padding list) for each relevant sidebar style - mine became:
Code:
border-right: dashed 1px #CCCCCC;
padding: 120px 10px 10px 10px;
background: #ffffff;
This completes the work for Firefox, Safari, Chrome, and IE 7 & 8!

Since IE6 does not handle CSS position: fixed properly, if one wants to keep the site working for IE6 visitors, one has to add a few additional things.

Return to ATO > Add HTML/CSS Inserts, and in the Header, put in conditional code that only IE6 will execute that loads a supplemental style sheet:
HTML Code:
<!--[if IE 6]>
<link href="http://www.yoursite.com/css/ie6-fixed-header.css" rel="stylesheet" type="text/css" />
<![endif]-->
One needs to create the CSS file for this, and name and place it in the proper directory and URL referenced above. The CSS file is simple:
Code:
html, body{
	height: 100%;
	overflow: hidden;
}
#header-wrap {
	position: absolute;
}
#header-container {
	margin-right: 17px;
}
#ie6-container-wrap {
	width: 100%;
	height: 100%;
	overflow: auto;
}
Finally, one needs to create an extra "ie6-container-wrap" DIV that will contain the entire BODY of the site, that only has an effect in IE6.

In ATO > Add HTML/CSS Inserts > Body Top - add the following line:
HTML Code:
<div id="ie6-container-wrap">
In Body Bottom, add the following to close the DIV:
HTML Code:
</div>
As far as I can remember, these are the steps that I did to achieve the effect.

I hope some others in the Atahualpa community find this useful!

P.S. One last thing - I noticed that the Flash videos on some of the pages on my site had a strange behavior. When I scrolled the page, they went up underneath part of the header (the page menu bar) normally, but slid on top of the header graphic images, which looked pretty odd. I was able to find an article that gave me a clue for how to deal with this:
http://www.communitymx.com/content/a....cfm?cid=e5141

The solution to this problem is to change the "wmode" parameter for the Flash video from its default value ("window") to "opaque". This makes the Flash video position itself directly within the page, rather than being in a separate layer; this makes it both opaque (you can't see through it, even if part of the video is transparent), but ALSO makes it possible for other graphic elements (e.g. the header images) to cover it up as they cover up neighboring elements on the page.

For more details on this topic, please visit the web page referenced here.

Last edited by juggledad; Dec 27, 2012 at 05:24 PM.
  #4  
Old Mar 6, 2010, 08:16 AM
lmilesw's Avatar
lmilesw
 
10,111 posts · Jul 2009
Central New York State USA
Works for me in IE but not in Firefox. In Firefox all I get is a blank page.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Mar 6, 2010, 12:58 PM
Eric Bobrow
 
70 posts · Jan 2009
Thanks for letting me know! I continued work for several hours last night, adding a feature to the header for rotating random quotes. All was well when I last checked in all the browsers, but when I checked again this morning after your posting, there was a big problem in Firefox.

Since the rotating quotes aren't strictly necessary for the site, I've commented out the jQuery code I added, and the site shows properly in Firefox again. I don't think this affects the instructions I gave for making the main area scroll while keeping the header fixed. I'll post again after I've figured out what's going on with my jQuery code for the rotating quotes.
  #6  
Old Mar 7, 2010, 02:29 PM
Eric Bobrow
 
70 posts · Jan 2009
It turned out I had some errors in the code that I put in later that evening for rotating quotes in the header. After I fixed that, everything worked nicely. So my original lengthy posting of code and instructions seems to be just fine.

Again, for anyone who wants to see a fixed header in Atahualpa, with the rest of the page scrolling below it, please visit:
[site URL removed, no longer using Atahualpa]

Note that I also have implemented a slideup panel for capturing leads for our email list. It currently waits about 15 seconds after you get to the website, then slides up from the bottom of the screen. After it appears, it acts as a fixed footer, and works nicely in all browsers including IE6.

A visitor can fill in the form to be added to our email list, or click the active text in the bottom left to close the panel. This is all done with jQuery code added to Atahualpa's js.php file. When I get a chance, I'll write up some documentation here so that others can reuse the code.

Last edited by juggledad; Dec 27, 2012 at 05:21 PM.
  #7  
Old Mar 8, 2010, 07:19 AM
lmilesw's Avatar
lmilesw
 
10,111 posts · Jul 2009
Central New York State USA
Nice work Eric and thanks for sharing. That will save other hours of time.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #8  
Old Oct 4, 2010, 07:58 PM
bosscakes
 
1 posts · Oct 2010
Thank you so much! This has saved me so much time.
  #9  
Old Oct 12, 2010, 02:26 AM
Eric Bobrow
 
70 posts · Jan 2009
By the way, I had to change the URL for our website since I no longer am a reseller for Graphisoft (the developer for the software product ArchiCAD) and they requested that I stop using their trademark ArchiCAD as part of the domain name.

Last edited by juggledad; Dec 27, 2012 at 05:22 PM.
  #10  
Old Dec 2, 2010, 07:26 AM
coldar75
 
9 posts · Jul 2009
Great Eric!
Have you any suggestion about locking sidebars and scrolling only the page/post area?

Thanks

Coldar
  #11  
Old Dec 15, 2010, 05:56 AM
rhenium3's Avatar
rhenium3
 
66 posts · Jul 2010
Bozeman, Montana
Send a message via AIM to rhenium3 Send a message via Skype™ to rhenium3
Eric, Thank you so much for this post, it looks fantastic!

I have a little problem with google ads though, if you go to my site on www.swedishfreak.com you can see that the header is locked, but for some reason only google ads goes over the header instead of under it. Any suggestions?
  #12  
Old Dec 15, 2010, 08:43 AM
rhenium3's Avatar
rhenium3
 
66 posts · Jul 2010
Bozeman, Montana
Send a message via AIM to rhenium3 Send a message via Skype™ to rhenium3
I found this:

http://www.google.com/support/forum/...1a452c1b&hl=en

But I don't know where the #nav li ul is in the theme, or what it is called...
  #13  
Old Dec 15, 2010, 11:42 AM
lmilesw's Avatar
lmilesw
 
10,111 posts · Jul 2009
Central New York State USA
The z-index won't help. This is a wmode issue and I am not sure you can fix unless a plugin for Google ads is available that that can take care of it. See this post.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #14  
Old Aug 23, 2011, 10:06 PM
bswb97
 
152 posts · Aug 2010
For future reference, I got this to work on the sidebars. For example, on the left:

Place this AFTER the TD in the Header.php file. You have to hard code it.
HTML Code:
<div id="left-wrap">
	<div id="left-container">

content...

	</div>
</div>
And in the CSS/HTML Inserts

HTML Code:
#left-wrap {
	position: fixed;
	width: 250px;
	left: 0px;
}

#left-container {
	height: 1000px;
}
For the right sidebar, simply do the same thing on the right side in the Footer.PHP file (hard code). Note that you MUST use "left" or "right" in the CSS, if you leave that out, everything will poop.
  #15  
Old Dec 27, 2012, 04:39 PM
sober's Avatar
sober
 
121 posts · Oct 2010
Just curious, are the codes mentioned valid in this year and Atahualpa and Wordpress versions ? I tried the demo sites and did not see it working in chrome.
  #16  
Old Dec 27, 2012, 05:20 PM
juggledad's Avatar
juggledad
 
22,378 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
When you say you tried the demo sites, what do you mean?

The post from Eric was from 2010 and that site is not using atahualpa any more. You should try it and see what happens
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #17  
Old Dec 28, 2012, 12:19 AM
Eric Bobrow
 
70 posts · Jan 2009
Sober and Juggledad -

You're right, the site I referred to earlier in this thread has been changed to use a different theme. I still use Atahualpa for some of my sites, but haven't implemented this fixed header concept in them.

I'm pretty sure that the principles still apply, but you would need to study the current version of Atahualpa to see where line numbers and file references need to be updated.

Eric Bobrow
__________________
Eric Bobrow - Creator of ArchiCAD Tutorials and ArchiCAD Training materials:
The Best Practices Course and MasterTemplate

Bookmarks

Tags
main area scroll, scroll text

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] place start and stop tags around main content area. RealtorNathan Atahualpa 3 Wordpress theme 3 Aug 16, 2010 03:22 PM
How to show shadow behind main layout area in IE? andr3w84 Atahualpa 3 Wordpress theme 4 Jul 22, 2010 03:02 PM
Can I overlap the header on my main content area? Masselyn Header configuration & styling 1 Feb 2, 2010 05:41 AM
Style issues with sidebar and main content area jenchilada Post-Kicker, -Byline & -Footer 1 Nov 30, 2009 08:24 PM


All times are GMT -6. The time now is 04:23 AM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.