[Resolved] Catalyst Demo Site Query

Home Forums Support Catalyst Demo Site Query

Viewing 15 posts - 1 through 15 (of 60 total)
  • Author
    Posts
  • #881261
    Oisin

    Hi,

    I recently downloaded the Catalyst demo site but want to reduce the height of the hero image. I first had trouble figuring out where to access the hero image but later found it under appearance > elements.

    I can’t see any way to reduce the height and I’m not really a coder. Can someone tell me where I can do this?

    Thanks,

    Johnny.

    GeneratePress 2.2.2
    GP Premium 1.8.1
    #881267
    Oisin

    I figured it out. It’s the padding that I have to change. I always thought padding was the space around an image rather than the settings for image height and width.

    Does anyone know a good resource to teach myself all this stuff?

    Thanks,

    Johnny.

    #881497
    Tom
    Lead Developer
    Lead Developer

    Glad you got it figured out!

    Our documentation has tons of great information. For example: https://docs.generatepress.com/article/header-element-overview/#padding

    Let me know if you have any other questions 🙂

    #882463
    Oisin

    Hi Tom,

    Another question on the theme. My website shows the Catalyst logo on mobile. I can’t find where it’s pulling the image from as I’ve deleted all demo content from the media.

    Do you know where I go to change this to my own logo and delete whatever media ghosts are floating around my site?

    Many thanks,

    Johnny.

    #882565
    David
    Staff
    Customer Support

    Hi there,

    go to Customizer > layout > Header and edit the Mobile Header Logo – add your logo there.

    #883553
    Oisin

    Cheers David,

    Appreciate the guidance. I wonder why it’s not in “Site Identity”. Seems that would be more intuitive for people getting used to WordPress.

    I have one more question about this logo. For some reason, when the header breaks for mobile the logo is way too big. I tried adding a small logo but this didn’t help. It’s like there must be something in the code telling the logo to be bigger than it is on desktop. Website is loadlabz.com.

    Many thanks,

    Johnny.

    #883562
    David
    Staff
    Customer Support

    The mobile header is an optional feature and if you were building from scratch the position of it would be apparent, but we need to add some documentation to some of the Sites, as users installing them won’t be aware. So really appreciate the feedback.

    Logos in the mobile header are like the navigation logo and respect the menu item height. You can simple use this CSS to reduce its height without changing the menu item height:

    .site-logo.mobile-header-logo img {
        padding: 20px;
    }
    #884150
    Oisin

    Thanks David,

    That worked perfectly. The support for this theme is excellent.

    Best regards,

    Johnny.

    #884153
    David
    Staff
    Customer Support

    Glad to be of help and you’re finding the service of value. Much appreciated.

    #884589
    Oisin

    Back again with another question.

    When I use the sections option to build a page, the hero image gets pulled from “Elements” in the appearance section. All pages seem to be set to pull from the Global Header. How to do I tell a page to pull from a particular page? Or tell a header element to only appear on a specific page? The display rules don’t seem to offer an option to point it at a particular page.

    Thanks very much,

    Johnny.

    #884622
    Oisin

    Nevermind, I see what I have to do now.

    #884628
    David
    Staff
    Customer Support

    Glad to hear you found the solution.

    #884665
    Oisin

    Final question… for today at least.

    I’m using the hero image from elements. The “smooth-scroll button ghost” is pulling a turquoise colour from somewhere for hover. I can’t find an option to change it anywhere. I’ve looked through the Customise options and I’ve tried all the Home Header options to no avail. Do you know where I can change it?

    #884672
    David
    Staff
    Customer Support

    It uses this CSS that you can find in Customizer > Additional CSS:

    .button.ghost:hover,
    .button.ghost:active {
        color: #ffffff;
        background: transparent;
        border: 2px solid #08cec7; /* change the hex color here */
    }
    #884713
    Oisin

    Thanks David. I’m a complete noob to all this, so really appreciate the help.

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