[Resolved] Emulating an existing site using GP Premium

[NBC]

Greetings:

I’m trying to emulate the look of this site.

Specifically, the width of the nav bar, the way the page floats over the background image, and the fact that the background image substitutes for a page header.

Any suggestions as to the best way to get there quickly? I have no desire to cobble together a menu built out of bitmaps as the prior site did.

I’m also trying to figure out the log-in form in the footer.

Thanks for any help!

[Tom]

1. Set content layout to One Container in Customize > Layout > Container.
http://docs.generatepress.com/article/content-layout/

2. Set your header, navigation and footer widths to contained.
http://docs.generatepress.com/article/header-layout/
http://docs.generatepress.com/article/navigation-layout/
http://docs.generatepress.com/article/footer-layout/

3. Delete the color from the Header background in Customize > Colors > Header.

4. Upload a background image to the body in Customize > Background Images > Body.

That should give you a good start 🙂

[NBC]

Hi, Tom:

Thank you for the suggestions! I am most of the way there, but have 2 problems:
1. Cannot make header tall enough to reveal the background image.
2. Body background color doesn’t match image (it’s set to #6B9471, but what’s showing up is not the right color: too light).

Any ideas of what I can do?

Thank you again!

[Leo]

Hi there,

Little challenging without seeing the site…
1. You should be able to increase the height of the header by adding more top/bottom padding in Customizer > Layout > Header > Header Padding.
2. Determine the exact color of your background image (using tools like Photoshop etc) so you can set the background color to be the same to match.
Let us know if this helps.

[NBC]

Hello:

Site’s being built through MAMP/localhost; not much I can show you other than a screen grab.

Compare this (the home page of the original site) to this (a screen grab of what I’ve accomplished so far in GP Premium).

My comments are all relative to an existing site I’m trying to duplicate, to which I linked in my original message.

I need to increase the height of the header so the background image is visible.

The background color for the Body is set to the correct hex value. The color that’s showing isn’t the color I set. That’s my second problem.

TIA!

[Tom]

I would separate your header text from the background design using Photoshop, and create both with no background color (save as PNG).

Then upload the text image as your logo, and the design as your background image.

That should get you closer 🙂

[NBC]

I wish I could do that, but all I have of the header image is what you see in that screenshot. 8-(

[Tom]

Text in a background image is never a good idea – they aren’t predictable enough.

There’s no way for you to separate the two images?

[NBC]

I wound up having to rebuild that image from scratch. I don’t have access to the original PS composition (client can’t provide it). All I have is a JPG.

I tried using the text by itself as the logo, but I’ve never been able to bring in a logo image at a predictable size. Even if I tell WP to skip the scaling, it still alters the image. That drives me nuts. I spend a lot of time setting up files so they’ll come in at the right size, etc., and the logo import process hoses them every time.

What I ended up with were two background images. A replacement for the graphic (transparent PNG) as the body background image, and a replacement for the text (another transparent PNG) as the header background image. Then I had to figure how to position the second image so it matched the original composite.

One other question: Where in the CSS can I control the amount of padding or margin on the left and right sides of the FA icons? I have three of them (Twitter, FP YouTube), and I’m losing menu width like crazy. I looked and looked in the FA CSS file, but nothing I experimented with in my child theme actually changed anything.

[Tom]

Uploading your logo shouldn’t change the image at all as long as you click the Skip cropping button.

How are you adding FA icons? In the menu?

[NBC]

I built the logo/text PNG image and the background graphic PNG image in the same PSD file so they’d have the same dimensions and one should overlay the other perfectly. The graphic comes in at the right size, but the logo is way too small. Yes, I clicked on the “Skip” button to omit cropping, but the dimensions still changed.

Yes, I’m bringing the FA icons into the menu. I’m using the 2x size, with the following code in my child theme to position them vertically.

*/
.fa-2x {
  vertical-align:-7px;
}

I just want to get rid of some of the horizontal space on either side of each of the icons. I looked through the FA CSS file for a padding or a margin value, but nothing I found made a difference.

[Tom]

Hmm I’d have to see the site and inspect the code to see what’s happening with the logo.

For the menu items, give the items with the icons a custom class, then do this:

.main-navigation .main-nav ul li.your-custom-class a {
    padding-left: 5px;
    padding-right: 5px;
}

[NBC]

Thanks, Tom! With your help, I have finally finished recreating the site!

FYI, I found a really nice custom log-in screen plug-in that uses the Customizer. This one’s free, but it gives you the ability to set parameters that other such plug-ins only make available in their paid premium versions. What’s really weird is that you have to bring up the Customizer separately for GP Premium and for the plug-in. If you bring up the Customizer for the plug-in, all the settings are accessible for both the theme and the plug-in, but only the plug-in shows up in the preview area.

It’s LoginPress by WPBrigade.

[Tom]

Cool, thanks for sharing! 🙂

[Author]

Posts