Custom Header Image | PenciDesign Support

twoticketsporfavor replied

5 years ago

Customer Reply

Fantastic. Thank you so much!

Michael

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

I've fixed your site issues.

Please check.

Regards,
PenciDesign.

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

1. Almost all issues are related to the critical CSS. After you've merged the content from stagging site, you need to follow these steps:

Clear all your site cache, then temporarily disable it,
Run the Critical CSS Tool, regenerate CSS for your site again,
Enable site cache

2. I've fixed the banner/image spacing.

Please check.

Regards,
PenciDesign.

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

This is a standard size of Soledad Theme thumbnail:

Thumb Small: 263 x 175,
Thumb Square: 585 x 585,
Thumb Vertical: 263 x 175,
Standard Thumbnail: 585 x 390

All images will be hard crop default by WordPress.

Regards,
PenciDesign.

twoticketsporfavor replied

5 years ago

Customer Reply

1. Fixed. Thanks!

2. Disabling image optimization on Jetpack didn't work. What is the original ratio that Soledad uses for the images inside widgets? 4:3 or 3:2?

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

1. Please modify the CSS code:

body .penci-header-wrap #navigation.header-4 {
    border: 0 !important;
}

2. If the settings on the Widgets don't work, please temporarily disable the Images optimization feature on Jetpack settings.

Regards,
PenciDesign.

twoticketsporfavor replied

5 years ago

Customer Reply

Sorry, forgot to send the image in the previous reply.

twoticketsporfavor replied

5 years ago

Customer Reply

Hi!

1. The menu is no longer sticky but the white borders are still there. Sending a picture.

2. The change in the Penci Widgets didn't change anything. Images are still cropped.

Regards,

Michael

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

1. Please replace the previous CSS code with this code:

.penci-header-wrap {
    position: relative;
}
#navigation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    background-color: transparent;
}
body .penci-header-wrap #navigation.header-4 {
    border-top: 0 !important;
}

2. Please go to Appearance → Widgets, make sure you set Default at Featured Images Type: on Soledad Recent Posts widget.

Regards,
PenciDesign.

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Please following the instruction:

1. Go to Appearance → Customize → Logo & Header → Main Bar & Primary Menu: check to Disable Sticky Main Bar When Scroll Down option,

2. Navigate to Custom CSS, then copy/paste:

#navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    background-color: transparent;
}
#navigation.header-4 {
    border-top: 0 !important;
}

Regards,
PenciDesign.

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Please publish the customize settings similar to the screenshot. I'll check and send you a custom CSS code.

Regards,
PenciDesign.

twoticketsporfavor replied

5 years ago

Customer Reply

Thank you so much for offering to create a custom function but I don't even know the technical terms to explain it. I think it will be too much work for something that not a lot of people are interested in.

I would like help with another matter, though.

I'm interested in using a transparent header. I selected a transparent header style (number 6) but when I insert the image as background image it's not displayed correctly (it's very cropped or it doesn't show). I'm curious to why it didn't work. Maybe I have too many CSS codes related to the header image.

I then reverted to style 4 and had to load my new image as a logo, like my previous one. It's working well. I was then able to make my menu transparent, but I want it to be over the image I use for the banner, not above it. I'm sending pictures to make it easier to explain what I'm trying to achieve.

Thanks in advance,

Michael

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Unfortunately, there are no options to display a random image on the header.

But please send your request in detail, I'll try to create a custom function for you.

Regards,
PenciDesign.

twoticketsporfavor started the conversation

5 years ago

Conversation Start

Hello!

I have a question that I couldn't find an answer for while searching for public tickets. Is it possible to have a custom header image that changes randomly every time a page is loaded? Let's say I want to have 4 different headers, and every time I load the website it randomly loads one of the 4. Is it possible?

Thanks,

Michael