[Resolved] Yet another logo placement problem

Home Forums Support [Resolved] Yet another logo placement problem

Home Forums Support Yet another logo placement problem

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #538323
    Alan Stancliff

    My question concerns a site I’m developing offline, so I can’t provide a URL. Instead I’m providing screenshots. They are in my Dropbox and expire in 30 days.

    The website in question used a nonresponsive theme (Atahualpa). So I decided to switch it to GP-Pro. I wanted to make the new front page look as much as possible like the old. Here is what the old header of that site looked like.
    https://www.dropbox.com/s/jxrdi1azkvqkhtj/Atahualpa%20header.jpg?dl=0

    The conversion to GP was mostly successful. However, one problem is with the icon, meant to be located just to the left of the site title and the tagline as above. Here it is:
    https://www.dropbox.com/s/qkc2wcsgeetfr5o/GP%20Header.jpg?dl=0

    The icon was installed properly and is the right size (512px x 512px).
    https://www.dropbox.com/s/nke7zxp08w4872g/Setting%20Up%20Logo.jpg?dl=0

    The GP theme seemingly recognized my logo as being a logo, as it shows up as a favicon in the browser tabs.
    https://www.dropbox.com/s/h53eg4l8ciyhl2y/Logo%20as%20favicon.jpg?dl=0

    The correct CSS was properly placed under “additional CSS.” This CSS was cut-and-pasted from the documentation and several forum threads. Here is a screenshot of that CSS properly entered into the correct place.
    https://www.dropbox.com/s/zswxj11ejq77fqm/CSS%20for%20logo.jpg?dl=0

    Can you tell me what’s going wrong and how I can fix it?

    Regards,
    Alan

    #538783
    Leo
    Staff
    Customer Support

    Hi there,

    Site icon is actually the one showing up in the browser.

    Try uploading that logo through Site Logo: https://docs.generatepress.com/article/adding-header-logo/

    Then it should work with that CSS.

    Let me know if this helps.

    #539400
    Alan Stancliff

    Hi Tom,

    I appreciate the rapid response, and so far, there is much that I like in GeneratePress Pro.

    However, apparently you didn’t understand what I was trying to ask. It’s probably largely my fault. I should have named the thread “Yet another icon placement problem” instead of “Yet another logo placement problem“.

    Your explanation confused me because you said:

    Site icon is actually the one showing up in the browser.

    There is confusion over the terminology in my question and your answer. I’m probably the one who initially introduced the confusion.

    What you probably meant to say was “Site logo (or header image) is actually the one showing up in the browser.” It is actually the header image (logo) that does show up in the browser.

    So to clarify our terms for clarity’s sake, here’s what I understand to be the meaning of the relevant terms, according to the documentation you linked to:

    • Logo = header image. In this case, it’s the large banner image in the header. This is a link to the intended header (logo) image:
      https://tinyurl.com/ycqx7kfj
    • Icon = Small image for favicons, site icon, etc., originally 512 x 512 pixels. This is a link to the intended icon image: https://tinyurl.com/ya8w4f8m

    Moreover, I’m reasonably sure that I precisely followed the directions described in your link. Here is a screenshot as to how I filled out the Appearance>customizer>site identity.
    https://tinyurl.com/y8g8uux7.
    Please let me know if you see an error in it.

    The effect I seek from the GP-Pro theme header should be like this screen shot from the Atahualpa theme powered site: https://tinyurl.com/ybuz7xyw

    However, instead, I get this from GeneratePress after carefully following and rechecking the directions: https://tinyurl.com/y8o4r29p

    So once again, hopefully in clearer terms: How can I get the icon to show up

    1. As a small graphic to the left of the site title and tagline, and
    2. Above the logo (header image)?

    Regards,
    Alan

    #539920
    Leo
    Staff
    Customer Support

    To recreate that header:
    – Upload your current “icon” as the “logo”
    – Use the CSS to move the title next to the logo: https://docs.generatepress.com/article/putting-site-title-next-logo/
    – Add the banner image in the after header content hook:
    http://demo.generatepress.com/hook-locations/
    https://docs.generatepress.com/article/hooks-overview/

    – Set the navigation to Below Header: https://docs.generatepress.com/article/navigation-location/

    Let me know if this helps. If not can you put the site live on a test server?
    It will make it easier for us to help than looking at screenshots.

    Thanks!

    #540633
    Alan Stancliff

    Hi Leo,

    Sorry that I keep calling you Tom. You’re Leo.

    I looked over the last instructions you sent, and I poked around the innards. Then, I noticed where the docs you linked to said this:
    “Usually I suggest merging your site title and logo into one image file and uploading it as a header, as the results are more consistent on multiple screen sizes/mobile. However, you may want to make your header/logo in-line with your site title.”

    So I decided to disable the display of the site title and tagline, and then to make a new header image that had the elements I wanted in the position I wanted. I’m afraid that if I followed the instructions, it would look fine on my large monitor and be scrambled and confused on my phone. It seems to have worked in my tests.

    Here’s what the relevant part of the full screenshot looks like:
    https://tinyurl.com/y6wwecx3

    And here’s what Firefox in the responsive design mode shows.
    https://tinyurl.com/y7b8e5z4

    I’ll have more questions later, I’m sure.

    Regards,
    Alan

    #541054
    Leo
    Staff
    Customer Support

    Yeah that’s definitely the way to go.

    I’ll mark this topic as resolved now 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.