- This topic has 59 replies, 4 voices, and was last updated 3 years, 10 months ago by
David.
-
AuthorPosts
-
April 27, 2019 at 3:09 am #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.
April 27, 2019 at 3:17 am #881267Oisin
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.
April 27, 2019 at 7:28 am #881497Tom
Lead DeveloperLead DeveloperGlad 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 🙂
April 28, 2019 at 10:36 am #882463Oisin
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.
April 28, 2019 at 2:50 pm #882565David
StaffCustomer SupportHi there,
go to Customizer > layout > Header and edit the Mobile Header Logo – add your logo there.
April 29, 2019 at 11:16 am #883553Oisin
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.
April 29, 2019 at 11:25 am #883562David
StaffCustomer SupportThe 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; }
April 30, 2019 at 5:16 am #884150Oisin
Thanks David,
That worked perfectly. The support for this theme is excellent.
Best regards,
Johnny.
April 30, 2019 at 5:19 am #884153David
StaffCustomer SupportGlad to be of help and you’re finding the service of value. Much appreciated.
April 30, 2019 at 9:27 am #884589Oisin
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.
April 30, 2019 at 9:55 am #884622Oisin
Nevermind, I see what I have to do now.
April 30, 2019 at 9:59 am #884628David
StaffCustomer SupportGlad to hear you found the solution.
April 30, 2019 at 10:39 am #884665Oisin
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?
April 30, 2019 at 10:48 am #884672David
StaffCustomer SupportIt 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 */ }
April 30, 2019 at 11:49 am #884713Oisin
Thanks David. I’m a complete noob to all this, so really appreciate the help.
-
AuthorPosts
- You must be logged in to reply to this topic.