- This topic has 14 replies, 3 voices, and was last updated 11 years, 9 months ago by
.
-
Posts
-
Hi,
I'm using Genesis/Prose for a while now, and liked it because of the design controls.
I ran across a site with a cool design that I'd like to use, but I'm sure it was a top-dollar job. I'm an amateur and do my own sites for lack of bread, as they said in "Hair". 🙂
Anyhow, this is a graphic on the background layer that extends above and to the left of the main body of a page. The effect is that the image appears to be behind the body/text area.
Here's the example: http://www.empoweredsoul.com/
I think I could do this in Prose... except that I would need space _above_ the main body, where the header usually is. Is there an easy way to lower the body area of a page (or add background area above it)?
TIA
Hmmm... wondering if I can make a high header space, and put part of the image directly on the header, then match the background image to th emissing portion on the header image. Make sense? But I would need to get rid of the padding between the header image and the extreme edge of the main body, and I have no clue about that. Opinions? Suggestions? TIA.
Can you provide a link to your site so we can see what you have?
Need help with customization or troubleshooting? Reach out to me.
Sure, mine is pretty much a standard Prose setup.
Prose is a beast! I'm not good with that at all, but after looking at you site - look for this in your style.css (I think for Prose that's where it's at). But you would just increase the 15px in the margin to say 150 or 175. It will bring it down. So you can add a custom background image like her's and then edit this just to get started.
#wrap {
background-color: #FFFFFF;
border: 1px solid #E7E4E4;
border-radius: 0 0 0 0;
margin: 15px auto 0;
padding: 10px;
}
Need help with customization or troubleshooting? Reach out to me.
In Genesis --> Design Settings --> Wrap --> Top Margin, change the 15px to 150px and see how that looks. You will probably also need to change both the padding and the border (in the same Design Setting) to 0 (zero) to avoid a white background strip interrupting your image.
If you're going to add any code snippets like the above, paste them into Genesis --> Custom Code --> Custom CSS, instead of making any changes to style.css.
Code that's added to Genesis --> Custom Code --> Custom CSS will override the Design Settings, so it's always best to look for a Design Setting that does what you want, and only add code to Custom CSS if you want to do something that isn't covered by the Design Settings.
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
Wow @wendycholbi, Prose really is a beast! I'll have to install it on a test and play with it. It's nothing like the other themes.
Need help with customization or troubleshooting? Reach out to me.
Personally, I think Prose is the unsung hero of all Genesis themes. The Design Settings in combination with the Custom Code fields make it super-powerful...and much easier for beginners to customize their sites (no need to make a child theme, or modify core theme files).
But you're right that those very features make it different from all other Genesis themes (great power --> great responsibility, blessing/curse, yada yada...).
🙂
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
OK great, I got the text body lowered and it works great! I didn't even realize what those particular controls were for. 🙂
Now to get the bg image lined up with the header part. I'll post a link when I'm finished.
Glad it worked for you, Michael! I'm looking forward to seeing what it looks like when you're done -- seeing someone trick out Prose into a unique creation is one of my favoritest things.
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
Here's a first rough effort. The bg is one big png that needs to be wider. The top of the header area is too low here. The cutout is not good, just for practice. The yellow shows the lack of border in the header area. Trickiest part will be aligning the bg partial image with the header partial image. Wish there was a way to get coordinates off a web page.
compared to hers at
Are you going to actually need the header area for something in addition to your site name/title (for instance, were you thinking of having a signup widget like the one at Empowered Soul)?
Just thinking out loud here and trying a few things with Firebug, it occurred to me that you could set the header height to 0px (would probably also need to set .header-image #title-area to 0px in height in Genesis --> Custom Code --> Custom CSS), place your site name and tagline into the background image itself, and eliminate the need to align a header bg with the page bg.
If you did that, you could use one of the Genesis Hooks (genesis_before or genesis_before_header -- see the Visual Hook Guide and the Genesis Hook Reference; you can add HTML and PHP to any of these hooks with the Genesis Simple Hooks plugin) if you needed to replace the header-right widget area.
But please ignore these ideas if they don't work for you. There's always more than one way to do something, especially in Genesis/Prose/WordPress, and I'm just brainstorming for fun, to see if I could figure out a way to avoid the aligning-two-backgrounds issue.
I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi
Thanks, good ideas. Even tho I'm a layman, once I'm made aware of tools like you've given me I can usually play with it pretty well.
You're right, and also I want to get the body higher than I have it now so I don't lose so much "above the fold" real estate.
Many thanks to both of you.
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.