Search Results for 'banner'

[Emily]

Emily

#201646

Good Evening,

I am looking to put a store notice on our site to advertise later opening hours and have figured out how to use a store notice in customizer.

Is there a way to customise the banner colour, font and size?

I found this CSS on the forum but it doesn’t seem to change anything when placed in the advanced settings CSS box?

p.woocommerce-store-notice.demo_store {
background: yellow;
color: blue;
font-size:18px;
}

Are you able to advise please?

Many Thanks,

Paul

[Emily]

Emily

#201646

Good Evening,

I am looking to put a store notice on our site to advertise later opening hours and have figured out how to use a store notice in customizer.

Is there a way to customise the banner colour, font and size?

I found this CSS on the forum but it doesn’t seem to change anything when placed in the advanced settings CSS box?

p.woocommerce-store-notice.demo_store {
background: yellow;
color: blue;
font-size:18px;
}

Are you able to advise please?

Many Thanks,

Paul

[Ben Ritner]

Ben Ritner

#201228

Hey,
So here is a css hack to place the banner above the menu and logo:

#kad-banner {
  display: flex;
  flex-direction: column-reverse;
}

Because of the header style you are using (menu logo menu) there isn’ going to be a sticky option for just the menu because you don’t have a “standard” header set in your theme options > main settings.

So you would either need to use a child theme and manually break the banner out of the header and output that above so it’s not part of the sticky header. Or create some custom javascript css that just target the internal container for the menu logo menu but that also brings in some other css issues you would have to address.

If you are using a child theme then the first option would be best.

[Gabriel]

Gabriel

#201199

So that would probably fix my sticky menu problem (I’ll try that this evening), but what about the position problem, how should I do to change the display order so that the banner appears at the very top of the page ( but under the topbar) ?
So if I want to modify the source code, how should I do ?

[Hannah]

Hannah

#201173

Hi Gabriel,
There isn’t a built-in function to move the menu below the sitewide banner. Are you using a child theme? I wouldn’t recommend updating the theme files unless you were doing so.
If you use the standard header (theme options > main settings) and select the third logo layout, then an option will appear to “Make the primary menu Sticky”. Would that work for you?

Hannah

[Gabriel]

Gabriel

#201170

Hi, I am designing an E-commerce website with Virtue Premium and I need to move the nav menu(s) under the sitewide banner.
I searched for a solution but everything I found was either to complicated (I’m learning php and have a medium level in css), or simply not working
Eventually, I would also need only the Menu to be sticky (as from what I understand, the sticky header option makes the entire header sticky).

Here’s the link to the website : Here

[Gabriel]

Gabriel

#201170

Hi, I am designing an E-commerce website with Virtue Premium and I need to move the nav menu(s) under the sitewide banner.
I searched for a solution but everything I found was either to complicated (I’m learning php and have a medium level in css), or simply not working
Eventually, I would also need only the Menu to be sticky (as from what I understand, the sticky header option makes the entire header sticky).

Here’s the link to the website : Here

[Hannah]

Hannah

#200580

Hey Luis,
Try using this css:

.infobanner .home-message {
    background-color: rgba(191,43,43, 0.3);
}

Just paste it into your custom css box in Theme Options > Custom CSS.
Does that work for you?

Hannah

[Lilian]

Lilian

#199888

Hi guys,

I have a slider with a video in an internal page (not homepage) and I’d like to show it only for PC.
Is it possible?

Thank you.

Lilian

[Lilian]

Lilian

#199888

Hi guys,

I have a slider with a video in an internal page (not homepage) and I’d like to show it only for PC.
Is it possible?

Thank you.

Lilian

[[email protected]]

[email protected]

#199337

I have a problem in custom-carousel-kadence_custom_carousel_widget.
The problem is on Internet Explorer 11 and old browser. I have a looping banner carousel and everything it’s fine until it arrives to the end then it starts again with the first logo. in that case the “cloned” logos have not the right size. From HTML what I noted is that the boxes of the logo doesn’t have the ID. I don’t know if it’s related.

You can browse http://www.festambiente.it with IE11 to see what I mean in pratical. The “Coop” logo and next ones are malformed when they appear the second time.

Thank you in advance

[[email protected]]

[email protected]

#199337

I have a problem in custom-carousel-kadence_custom_carousel_widget.
The problem is on Internet Explorer 11 and old browser. I have a looping banner carousel and everything it’s fine until it arrives to the end then it starts again with the first logo. in that case the “cloned” logos have not the right size. From HTML what I noted is that the boxes of the logo doesn’t have the ID. I don’t know if it’s related.

You can browse http://www.festambiente.it with IE11 to see what I mean in pratical. The “Coop” logo and next ones are malformed when they appear the second time.

Thank you in advance

[Hannah]

Hannah

#199082

Hi Mike,
Try adding this to your custom css box in Theme Options > Custom CSS:

@media (max-width: 992px)  {
.mobile-headerclass {
    margin-top: 60px;
}
#kad-mobile-banner .mobile-header-container {
    position: absolute;
    top: 0;
    width: 100%;
    background: rgba(180, 196, 188, 1);
}
}

Let me know how that works for you!

Hannah

[Kevin]

Kevin

#199081

Hello,

Try adding this CSS to Theme Options> Custom CSS:

@media (max-width: 992px) {
.mobile-top-icon-bar {
    order: 1 !important;
}

div#kad-mobile-banner {
    flex-direction: column;
    display: flex;
    }
}

Let me know if that works for you.

-Kevin

[Hannah]

Hannah

#198236

Hey Luis,
Your site is in maintenance mode so I can’t test this, but this worked on my site. Try changing Ben’s css to this

:body.trans-header div:not(.is-sticky)>.headerclass-outer div:not(.is-sticky)>.kad-header-topbar-primary-outer div:not(.is-sticky)>.headerclass, body.trans-header #kad-header-menu, body.trans-header #kad-mobile-banner {    
background: rgba(0,0,0,0.5);
background: -moz-linear-gradient(top, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.50)), color-stop(100%, rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}

Hope that helps!

Hannah

[Kevin]

Kevin

#198097

Try adding this CSS to Theme Options> Custom CSS:

@media (min-width: 580px) {
div#kad-mobile-banner {
    margin-top: 42px;
}
}
@media (max-width: 579px) {
div#kad-mobile-banner {
    margin-top: 115px;
}
}

Let me know if that works for you!

-Kevin

[Hannah]

Hannah

#197858

Hey Reva,
This css should stretch your menu full width:

#kad-banner #cat_nav .container {
    width: 100%;
    padding: 0;
}

Just paste that into your custom css box in Theme Options > Advanced Settings.

It looks like you have an empty h1 tag in your header widget area. That is creating the extra space. Do you see that from Appearance > Widgets?
You can use css like this to set a min-width for your logo:

@media (min-width: 992px) {
#logo {
    margin-right: 0px;
    min-width: 500px;
}
}

Hope that helps!

Hannah

[Ben Ritner]

Ben Ritner

#197513

ok, I turned off the transparent header, I resized your logos for the header and I set up this css:

.is-sticky .headerclass#kad-banner #logo .kad-standard-logo {
    background-image: none !important;
}
#kad-banner #logo .kad-standard-logo {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -ms-transition: background .3s ease-in-out;
    -o-transition:background .3s ease-in-out;
    transition: background .3s ease-in-out;
}
.is-sticky .headerclass#kad-banner #logo .kad-standard-logo:after {
opacity:1;
}
#kad-banner #logo .kad-standard-logo:after {
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition:opacity.3s ease-in-out;
    transition: opacity .3s ease-in-out;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(http://saintmarks.ecwwblog.org/wp-content/uploads/2018/07/Resize_STMarks_Logo_window-white-min.png) !important;
    background-size:contain;
    background-repeat:no-repeat;
    opacity:0;
}

Please try.

Ben

[info829]

info829

#197488

Clearing the cache: Chrome > Settings > Advanced > Clear Browsing Data > Clear cached images and files

I turned off the shrink header and this makes the transition less jumpy and keeps a good amount of padding.

*The problem is we’re back to the logo with text having the transparent/slider image background instead of the purple background.

The following custom CSS is present:

.is-sticky .headerclass#kad-banner #logo .kad-standard-logo {
background-image: url(“http://saintmarks.ecwwblog.org/wp-content/uploads/2018/07/STMarks_Logo_window-white.png”) !important;
}

Is there additional CSS you can add so that the background stays purple the entire time/throughout the logo transition?

Thanks!

[Hannah]

Hannah

#197290

Hi Liz,
So sorry for the delay. This feature is set up to work when using the transparent header. You’re not wanting to use the transparent header,
correct? As a workaround, set your logo to the image with text, then add this to your custom css box:

.is-sticky .headerclass#kad-banner #logo .kad-standard-logo {
    background-image: url("http://saintmarks.ecwwblog.org/wp-content/uploads/2018/07/STMarks_Logo_window-white.png") !important;
}

Let me know how that works for you!

Hannah

[Hannah]

Hannah

#196687

Hey,
When editing the pricing tables, you can click the top of the column where it says “column 1” “column2” etc. Then if you scroll down you should see Column Options and within that, an option to enable a featured column. This is the banner you’re referencing. Then there is also an option to edit the feature text.
Hope that’s helpful!

Hannah

[Smith]

Smith

#196653

Hi everyone,

I really like the ease of configuring the pricing table plugin; however, I guess the template I chose had the middle table come with the “Popular” diagonal banner across it and that’s fine. I couldn’t figure out where it came from to edit it, so I guess that may not be available.

But I was hoping to add another diagonal banner to the blue pricing table and add “Best Value” if that’s possible.

Link: *Login to see link

Thank you!

[Smith]

Smith

#196653

Hi everyone,

I really like the ease of configuring the pricing table plugin; however, I guess the template I chose had the middle table come with the “Popular” diagonal banner across it and that’s fine. I couldn’t figure out where it came from to edit it, so I guess that may not be available.

But I was hoping to add another diagonal banner to the blue pricing table and add “Best Value” if that’s possible.

Link: *Login to see link

Thank you!

[Andy]

Andy

#196184

Hi team, have some questions about using the Virtue Split Content Widget. Very happy with this Widget.

How ever search the Forum to understand better how to get the images nicely sticked to each other (corner to corner as like your Demo version) with the text next to it aligned with the image which is 1000×500. At this moment have to much background / open space and would like to limit this as much as possible, so the image get better aligned as mentioned above.

Below fyi some CSS info:
.page-header {
border: 0;
}

.widget_virtue_calltoaction_widget .kad-btn-primary {
color:#f2d78c;
background:#f2c037;
}

.kad-btn-primary {background-color: #dd9933; }
.kad-btn-primary:hover {background-color: #cfcfcf; }

.kad-header-style-two .nav-main ul.sf-menu>li a i {
font-size: 50px;
}

.footercredits p {
font-size: 14px;
}

.footercredits {
text-align: center;
}

#containerfooter {
padding-top: 0;
}
.footercredits {
padding-top: 0;
padding-bottom: 0;
}

#containerfooter .widget {
margin-top: 0px;
}

body #kad-banner #logo .kad-retina-logo {
margin: 0 auto;
}

.home-padding {
padding-top: 0px;
}

.home-widget-box {
text-align:center;
}

.page-header {
display:none;
}

div#content {
width: 100%;
}

a.kt_imgsplit_btn.kad-btn.kad-btn-primary {
font-size: 16px;
}

Thanks in advance for your support, Andy
http://www.andylubertinaturephotography.nl

[Andy]

Andy

#196184

Hi team, have some questions about using the Virtue Split Content Widget. Very happy with this Widget.

How ever search the Forum to understand better how to get the images nicely sticked to each other (corner to corner as like your Demo version) with the text next to it aligned with the image which is 1000×500. At this moment have to much background / open space and would like to limit this as much as possible, so the image get better aligned as mentioned above.

Below fyi some CSS info:
.page-header {
border: 0;
}

.widget_virtue_calltoaction_widget .kad-btn-primary {
color:#f2d78c;
background:#f2c037;
}

.kad-btn-primary {background-color: #dd9933; }
.kad-btn-primary:hover {background-color: #cfcfcf; }

.kad-header-style-two .nav-main ul.sf-menu>li a i {
font-size: 50px;
}

.footercredits p {
font-size: 14px;
}

.footercredits {
text-align: center;
}

#containerfooter {
padding-top: 0;
}
.footercredits {
padding-top: 0;
padding-bottom: 0;
}

#containerfooter .widget {
margin-top: 0px;
}

body #kad-banner #logo .kad-retina-logo {
margin: 0 auto;
}

.home-padding {
padding-top: 0px;
}

.home-widget-box {
text-align:center;
}

.page-header {
display:none;
}

div#content {
width: 100%;
}

a.kt_imgsplit_btn.kad-btn.kad-btn-primary {
font-size: 16px;
}

Thanks in advance for your support, Andy
http://www.andylubertinaturephotography.nl

[Hannah]

Hannah

#196097

Hi Angela,
Try adding this to your custom css box in Theme Options > Advanced Settings:

div#kad-mobile-banner {
    background: #fff;
}

Hope it helps!

Hannah