Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

My favorite ATA design trick


  #1  
Old Feb 7, 2013, 10:08 AM
mcphoto
 
120 posts · Apr 2009
Here's a great way to add some design coolness to an ATA site.

Say you want a graphic to break past the bounds of your layout - or, in the test below, you want to overlay the header image. In the design below, I proposed an endlessly scrolling scene of real customers, with the logo and header overlaid. And this design "breaks" past the layout margins, overlaying the layout with a soft drop shadow specific to the graphics.

Click image for larger version

Name:	dcy-test.jpg
Views:	430
Size:	128.5 KB
ID:	2214

I've fought with positioning elements in ATA; generally, you want a container with relative positioning, and then set your overlaid content to absolute (and maybe use a z-index). This takes the content out of the page flow, where it won't push other elements down or over. I could never get it to function right in ATA, until this occcured to me:

Go to theme options: Style and Configure Layout.
In the "Layout Container Style" field, add this:
position: relative;

Then you can add your overlaid art (theme options - HTML CSS Inserts - "body top" works well) and position it via CSS inserts. In this case, it's a transparent PNG, so the soft shadows overal the scrolling photos and the page background.

I've had no problems with any site by adding "position: relative" to the layout container (though I haven't tried it with percent-sized layouts, only fixed). In this case, the layout is 800px, but the top of the design seems to "break" past those bounds, while overlaying the header.

Since the images above endlessly scroll across (it's actually 3 images for faster loading, with the far left and far right setup to "match" with no break) I didn't use "%image" in the header setup; instead I coded it into header.php. CSS Inserts "body top" may have worked as well.

Give it a try - I find it's very easy to "design for wordpress" and think "header/column/center/column", but stuff like this can break you out of a design rut. I have many peers and clients who say, "no way is that wordpress!" I just point them to Atahualpa...
  #2  
Old Feb 22, 2013, 05:13 PM
mcphoto
 
120 posts · Apr 2009
One correction - I can never get this sort of thing to work with html inserts>>body top - that loads content before the framework of the layout. I paste this into header.php.

It would be great if we had a "layout top" insert...

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to add favorite link or button to post footer area in posts list page? yyyyyywhy Post-Kicker, -Byline & -Footer 3 Mar 11, 2012 08:06 AM
Design Widgets Budun Sidebars & Widgets 3 Apr 17, 2010 01:45 PM
Blog design help ldsmedia Customization, Design, Programming... 11 Feb 1, 2010 06:43 AM
[SOLVED] willing to pay for design help measure2x Customization, Design, Programming... 3 Nov 15, 2009 05:47 PM


All times are GMT -6. The time now is 02:07 PM.


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