Search Results for 'banner'

[Pamela]

Pamela

#129494

Hello,

I replaced the default Pinnacle theme image with a custom image provided by my client. I resized the image to approximate recommended dimensions of 772 x 174 pixels. I used the Customize tool to upload the image, first to site header (didn’t work) and then to page header or title, which did.

I then republished. The resulting banner image is too large and appears fuzzy.

Please advise on how to replace the default Pinnacle theme image with a custom image.

Thank you.

Pamela

[Pamela]

Pamela

#129494

Hello,

I replaced the default Pinnacle theme image with a custom image provided by my client. I resized the image to approximate recommended dimensions of 772 x 174 pixels. I used the Customize tool to upload the image, first to site header (didn’t work) and then to page header or title, which did.

I then republished. The resulting banner image is too large and appears fuzzy.

Please advise on how to replace the default Pinnacle theme image with a custom image.

Thank you.

Pamela

[Ben Ritner]

Ben Ritner

#129399

You can, it’s not fully supported by the web yet though.

You would need this plugin: https://wordpress.org/plugins/svg-support/

Then you would need to use css to set the width and height of your image container because wordpress can’t output a width on an svg. So that would be css something like:

#kad-banner #logo .kad-standard-logo {
    width: 120px;
    height: 120px;
}

Ben

[Ben Ritner]

Ben Ritner

#129395

Ok, so you do understand that your image will not “fill” the header correct, meaning on large screens it will sit in the middle.

And you also understand that by doing this it will not work on mobile… Simply thinking about your spacing. if the mobile screen is 360px wide. And your header maintains the same height 300px becuase that height is defined by your text. Forcing the “full image” to show means your 1200px width image is now 360px making the height which was 318px now only 95px… and thus awkwardly sitting behind your text not close to filling the content…

And are you wanting this to be behind the secondary navigation? I’m going to guess not. So here is the css that I believe is going to doing what you are requesting. Just remove the logo image and add this css only.

You can use this css:

.headerclass > .container {
    background: url('http://alicenrobinson.com.s62546.gridserver.com/wp-content/uploads/2017/01/AliceRWebsite_ResponsiveBanner-10-revised-flipped-1200.jpg');
    background-repeat:no-repeat;
    background-size: contain !important;
    background-position:left center !important;
}

Ben

[Cavendish]

Cavendish

#129349

Hi Ben,

thanks for the detailed explanation. I’m not asking however for the background image to control the size of the container! And I understand the importance of responsive design. That’s what I’m trying to accomplish here. I just want this image to resize proportionally without cropping. Does that not make sense?

Do I need to use a different feature of the theme than Header Background?
Should this image be specific dimension in order not to be cropped, or do I need additional css?

Note: I just now set the image in question as the Logo rather than the Header Background. This behaves exactly how I had hoped the banner would behave. Do you understand now what I’m trying to arrive at?

The only problem with using it as a Logo is that the Site Title etc. are not overlaid, but rather appear below.

[Robert]

Robert

#129308

Hi Kadence team,

I am using Virtue Premium on a website that I am unfortunately not allowed to disclose. (Sorry for the inconvenience!)

The layout of the website is using the Virtue Demo 4 style. I am also using the Kadence slider for the big homepage picture (at the top of the page). Your tutorial of how to set up a website with the Virtue Demo Style 4 was excellent! However, I am struggeling with two minor issue that I would like to solve. Here they are:

1) I would like to achieve a change of background colors when the user is hovering over a primary menu item. Pretty much the same way you can do that on the buttons of the Kadence slider using the “background color” and “background hover color” options in the Kadence Slider menu. How can I achieve that?

2) Speaking of Kadence Slider buttons: I am using the WordPress plugin “Page to scroll to ID” as suggest by you guys various times in this forum to achieve the scrolling effect on the website when the user is clicking on any link. The only thing I cannot get to work is to use the plugin on the Kadence Slider button that I have inserted on the Kadence Slider slide. Inserting the Page to scroll to ID rel attribute in the link section of the Kadence Slider button after #kad-banner did not work (#kad-banner rel=”m_PageScroll2id”). How can I manipulate the button so that it makes use of the plugin?

Thanks in advance for your help!

[Robert]

Robert

#129308

Hi Kadence team,

I am using Virtue Premium on a website that I am unfortunately not allowed to disclose. (Sorry for the inconvenience!)

The layout of the website is using the Virtue Demo 4 style. I am also using the Kadence slider for the big homepage picture (at the top of the page). Your tutorial of how to set up a website with the Virtue Demo Style 4 was excellent! However, I am struggeling with two minor issue that I would like to solve. Here they are:

1) I would like to achieve a change of background colors when the user is hovering over a primary menu item. Pretty much the same way you can do that on the buttons of the Kadence slider using the “background color” and “background hover color” options in the Kadence Slider menu. How can I achieve that?

2) Speaking of Kadence Slider buttons: I am using the WordPress plugin “Page to scroll to ID” as suggest by you guys various times in this forum to achieve the scrolling effect on the website when the user is clicking on any link. The only thing I cannot get to work is to use the plugin on the Kadence Slider button that I have inserted on the Kadence Slider slide. Inserting the Page to scroll to ID rel attribute in the link section of the Kadence Slider button after #kad-banner did not work (#kad-banner rel=”m_PageScroll2id”). How can I manipulate the button so that it makes use of the plugin?

Thanks in advance for your help!

[Cavendish]

Cavendish

#129242

hi folks,

the css helped! Here’s what I’ve added to custom CSS

#nav-main {background size: Contain}

However — I’m still unclear on the ideal dimensions for this file, and why it doesn’t work at the actual size:

http://alicenrobinson.com.s62546.gridserver.com/wp-content/uploads/2017/01/AliceRWebsite_ResponsiveBanner-10-revised-flipped-1200.jpg

when I set e above file to be the header, the template crops the bottom of the image. In order for the entire image to appear at the top of the page, I’m still obliged to add whitespace to the bottom and far right:

http://alicenrobinson.com.s62546.gridserver.com/wp-content/uploads/2017/01/AliceRWebsite_ResponsiveBanner-10-flipped2-cropped.png

This is the file currently being used as the header background as a workaround.

Do I need to set the height of the topbar? or resize the original image? The artist is waiting for guidelines as to what the dimensions should be for the header to

[Kevin]

Kevin

#129147

try adding this CSS:

.stickyheader #kad-banner {
    transform: none;
}

Let me know if that works for you!

-Kevin

[Ben Ritner]

Ben Ritner

#128891

.stickyheader #kad-banner {
    transform: none;
}

Try adding that ^ css.

Ben

[Joanna Lopez]

Joanna Lopez

#128883

Just to clarify, I am using the image menu through the Homepage Layout Manager.

– Pinnacle Theme is version 1.8.5

– All plugins are up to date and I deleted all but a few plugins we had installed. All that’s let for plugins is: Jetpack, Askimet, Pagebuilder by SiteOrigin, and SiteOrigin Widget Bundle.

– The only CCS in the custom box is something I just added from another Kadence support person for a different problem (which it did fix). But this image menu issue has been happening before I added that custom CSS. This is what I have:

@media only screen and (device-width: 768px) {
#kad-banner-sticky-wrapper, #kad-banner {
height: auto !important;
position: static !important;
}
}

@media (max-width: 992px) {
#kad-banner-sticky-wrapper, #kad-banner {
height: auto !important;
position: static !important;
}
}

[Ben Ritner]

Ben Ritner

#128804

just remove this:

#kad-mobile-banner i.icon-cart:before, #kad-banner i.icon-cart:before {
    content: "e0ce";
}

Ben

[Ben Ritner]

Ben Ritner

#128669

#kad-mobile-banner i.icon-cart:before, #kad-banner i.icon-cart:before {
    content: "e0ce";
}
#kad-mobile-banner .mh-nav-trigger-case {
    left: 10px;
    right: auto;
}
#kad-mobile-banner a.menu-cart-btn.mh-menu-cart-btn {
    right: 10px;
}
#kad-mobile-banner img.kad-mobile-logo {
    margin: 0 auto;
}

#kad-mobile-banner a.mobile-logo {
    padding: 0 !important;
}

Ben

[Ben Ritner]

Ben Ritner

#128628

For a row to be fullwidth javascript has to be enabled. This is becuase it’s your javascript that is actually making that row fullwidth. Css can’t do it because it’s inside of a containing element. There is a class that you can use in a div to make that div fullwidth but it will not work unless you have javascript running.

You can use css like this to force a fullwidth row in pagebuilder to show it’s contents without js but it will not be fullwidth unless you have js enabled:

.siteorigin-panels-stretch {
    visibility: visible !important;
}

A sitewide banner is going to show on every page so ti’s nothing like a slider. You can use css like this to force it fullwidth but this will stretch your image and also not be like a slider in terms of how you control height.

.virtue_banner img {
    width: 100%;
}
.virtue_sitewide_banner {
    padding: 0;
}

Finally your using the mobile header which means your replacing the standard header (which has your banner) with a simple mobile one. You can’t have the banner from the normal header with the simple header. You need to choose one or the other.

Ben

[Pamela]

Pamela

#128537

This reply has been marked as private.

[Loren]

Loren

#128390

Thank you Hannah:

I was wrong and Ben’s suggestion of changing did work. I placed a properly sized 728×90 banner, set the topbar settings to 90, but the banner is being resized to 455×56.25. I also set the “Topbar Icon Menu” and “Show Cart total in topbar” to off.

Appreciate your help!
Loren

[Ben Ritner]

Ben Ritner

#128280

add this css and let me know if your seeing the same issue:

@media only screen and (device-width: 768px) {
#kad-banner-sticky-wrapper, #kad-banner {
    height: auto !important;
    position: static !important;
}
}
@media (max-width: 992px) {
    #kad-banner-sticky-wrapper, #kad-banner {
    height: auto !important;
    position: static !important;
}
}

Ben

[Hannah]

Hannah

#128107

Hey Jerry,
I’m seeing this in your css:

@media (max-width: 992px) {
#kad-banner, #kad-banner-sticky-wrapper {
    display: none;
}
}

Are you adding that?

Hannah

[Loren]

Loren

#128084

Hi Hannah:

Please take a look at the topbar widget placement of the leaderboard baner at http://www.redryder200.com/pacifcapaddler/

I have been experimenting with how I can place banner ads and it is going well. However in this case the widget throws the header menus and logo out of whack. Perhaps the graphic is too wide? If so, can you ID the CSS that I edit to allow for the banner placement there?

In addition, do I need to continue this discussion under the Pinnacle section of this forum?

Thank you!
Loren

[Loren]

Loren

#127958

Fabulous suggestion Hannah!

Mahalo! I have decided to use Pinnacle for the first time for this website. I’d like to place an ad banner into the header. Perhaps the top bar. In the Virtue theme options I could do that. Can you suggest a solution to do that with Pinnacle?

Thank you again for getting me to think outside the box!
-Loren

[kevin]

kevin

#127607

My menu on a iphone or ipad has a grey banner/background which I would like to change to white/transparant. I have tried doing this in the basic and advanced styling menu’s but it doesnt change no matter what I do. I wonder if you can please help me.

[kevin]

kevin

#127607

My menu on a iphone or ipad has a grey banner/background which I would like to change to white/transparant. I have tried doing this in the basic and advanced styling menu’s but it doesnt change no matter what I do. I wonder if you can please help me.

[Kevin]

Kevin

#127135

Hello Kevin,

Try adding this CSS to Theme Options> Advanced Settings:

@media (min-width: 450px) and (max-width: 767px) {
body #kad-banner #logo .kad-retina-logo {
    width: 50%;
    }
}

Let me know if that works for you.

-Kevin