Community Forums › Forums › Archived Forums › Design Tips and Tricks › over-lapping title area and header widget
- This topic has 8 replies, 2 voices, and was last updated 11 years ago by john gronley.
-
AuthorPosts
-
April 1, 2013 at 10:28 am #32456john gronleyMember
Hello;
I have been able to get the title and description areas to overlap with the upper-right header widget area in the Enterprise theme by the use of z values. Here is one site that I use them on: http://dlund.com
I am trying to get the title area and description area to overlap over the widget area in the agentpress theme but can't seem to figure out how and where to assign the z values in this theme. Can someone help? Maybe there is a way to accomplish this other than z-values?
Here is the site I am trying this on http://searchrealestatephoenix.com/
Thanks,
John
April 1, 2013 at 10:35 am #32458nciskeMemberWell that's one way to do it, I guess.
The best practice way is to upload a custom image header (or set one via css) and use text-indent to push the title and description off screen.
That keeps the text there for Google, without requiring negative margins and z-indexes.
Here's a tutorial:
http://genesistutorials.com/how-to-add-a-logo-to-the-header/
Nick Ciske | https://luminfire.com/ | @nciske
Did I help you? Say thanks: http://bit.ly/1lahwy0April 1, 2013 at 10:40 am #32459john gronleyMemberThanks nciske;
In this case with the agentpress I want the title and description to display centered and overlap the image widget. The image widget will just be the fairhousing and realtor logos with the company logo and have these off to the right.
April 1, 2013 at 10:44 am #32461nciskeMemberWhy use an image widget?
This is what CSS backgrounds (or custom image headers) are for -- set that on the #header (or use the Genesis theme header option) and the text will automatically display on top.
If you 'pull' an image widget from below the header over top of the header, it will always stack above the text unless you do some absolute positioning tricks to get the z-index to take effect (in the other site, I suspect z-indexing isn't even active, just display order).
Nick Ciske | https://luminfire.com/ | @nciske
Did I help you? Say thanks: http://bit.ly/1lahwy0April 1, 2013 at 10:52 am #32463john gronleyMemberThanks I will try this custom image header!
April 1, 2013 at 2:53 pm #32511john gronleyMemberHey Nciske;
The theme does have a place to upload the custom header; I supppose I will have to upload the logos and then go in and change the margins and padding until it is positioned where I want it? I think by default it is set to float left....
Thanks,
John
April 1, 2013 at 2:54 pm #32512nciskeMemberYou'd put the logos into one image and upload that.
Nick Ciske | https://luminfire.com/ | @nciske
Did I help you? Say thanks: http://bit.ly/1lahwy0April 1, 2013 at 2:58 pm #32514john gronleyMemberGot it and the settings:
.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 125px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 400px;Would be tweaked until the image shows up to the lower right side?
April 1, 2013 at 3:19 pm #32522john gronleyMemberI think I can do the same with the image widget and just change the padding to 5px and then change the width of the title to 960px and it should tuck in nicely: I did this on http://johnstestsite.org/
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.