Search Results for 'banner'

[Regina]

Regina

#26202

IS there anyway to have something appear above the featured image in a portfolio post? I have my website set up using big image files as featured images, which show up cropped like a banner. There is a smaller version in the body of the post below that I’ve added with the text. I really like the look of this. My pages would load a lot faster if I could use a smaller image file as the featured image that would show up uncropped, and have a detail from the image as a banner above it. Is this possible?

Here is an example of the look that I’m talking about:
*Login to see link

The banner is being creaed by the feature image, which has to be huge to create a banner effect. I’d rather just create a banner in that location and upload a smaller feature image that appears just below it.

[Regina]

Regina

#26202

IS there anyway to have something appear above the featured image in a portfolio post? I have my website set up using big image files as featured images, which show up cropped like a banner. There is a smaller version in the body of the post below that I’ve added with the text. I really like the look of this. My pages would load a lot faster if I could use a smaller image file as the featured image that would show up uncropped, and have a detail from the image as a banner above it. Is this possible?

Here is an example of the look that I’m talking about:
*Login to see link

The banner is being creaed by the feature image, which has to be huge to create a banner effect. I’d rather just create a banner in that location and upload a smaller feature image that appears just below it.

[Ben Ritner]

Ben Ritner

#26161

The image menu is designed to have background images with text, it’s not set up to work like a button where the image is “contained” instead the image is supposed to cover the space. You can see an example here:
http://themes.kadencethemes.com/virtue-premium-3/

Since your images are not set up to be a background you would need to add css to force the image to stay contained and not fill all the spaces of the image menu. Add this in your theme options > advanced settings:

.infobanner {
background-size: contain !important;
}

Ben

[Jane]

Jane

#25767

OK, I’ve updated the theme. I have Attributes: Wide Parallax, Layout: Full Width, Design: Image 1200px x 800px, style: parallax and borders set to zero – I tried changing these but just got a bar of colour top and bottom. I can’t get the height of the banner to change – even putting the original 4500px x 3000px doesn’t change anything now.

[BG Anders]

BG Anders

#25678

Hi all,

o-zen.de is the site

from my first slide, i took the link from the arrow that scrolls down into the content, and put it on the whole first slide (/#kad-banner)
Unfortunately it doesn’t scroll enough, it stops an inch sooner as when clicking on the arrow…
…but they have the same link… and it’s the same anchor, still it doesn’t do the same thing.

Any ideas ?
B.

[BG Anders]

BG Anders

#25678

Hi all,

o-zen.de is the site

from my first slide, i took the link from the arrow that scrolls down into the content, and put it on the whole first slide (/#kad-banner)
Unfortunately it doesn’t scroll enough, it stops an inch sooner as when clicking on the arrow…
…but they have the same link… and it’s the same anchor, still it doesn’t do the same thing.

Any ideas ?
B.

[Ben Ritner]

Ben Ritner

#25347

Hey,
1. Well it does depend on what type of header your using.. you can try using css like this:

@media (max-width: 768px) {
div#kad-shrinkheader, #kad-banner, a.brand.logofont, .kad-header-style-basic #logo #thelogo, .nav-trigger-case .kad-navbtn, .kad-header-style-basic #nav-main ul.sf-menu > li > a {
    height: 60px !important;
    line-height: 60px !important;
}
.kad-lg {
    max-height: 60px !important;
}
}
.trans-header #pageheader {
padding-top: 60px;
}

2. You can use this css:

.light-dropshaddow {
-moz-box-shadow: 0 0 4px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4);
box-shadow: 0 0 4px rgba(0,0,0,.4);
}

Ben

[Jane]

Jane

#24898

Thanks Ben, that works fine but I’m wondering if I can adjust the opacity a little and just tone down the white banner a touch? Even better, and if it’s not an impossible ask, tone it down a little but bring it back up with a hover-over?! 🙂

I have in mind how I want it to look, if it’s not a really big ask. I love the portfolio as is but feel that a buyer may just look at each image and assume it’s the full extent of the portfolio. I want to prompt the buyer to click on the image, without making the prompt too obtrusive, so that they see the full gallery.

Thank you

[Hannah]

Hannah

#24830

Hi Glenn, Try adding this in theme options > custom css:

.stickyheader.trans-header #kad-banner {
position: fixed;
background: rgba(100,100,100,0.5);
}
.is-sticky .headerclass {
background: rgba(255,255,255,.9) !important;
border-bottom: 1px solid transparent !important;
}

Hope that works for you!
Hannah

[Hannah]

Hannah

#24646

Try adding this:

@media (max-width: 770px) {
.boxed.stickyheader .is-sticky #kad-banner {
width: 100%;
}
}

Hannah

[Ben Ritner]

Ben Ritner

#24598

I’m guessing this only happens if you are on a desktop and you resize your screen?

You can add this css:

@media (max-width: 992px) {
    .boxed.stickyheader .is-sticky #kad-banner {
    position: static !important;
}
}

Ben

[Ben Ritner]

Ben Ritner

#24512

Hey so the sliderclass css is fine..

To fix the 1 and 3 issues remove this from your css:

#kad-banner>.container {
  height: 80px;
}

add this:

.nav-trigger-case {
position: static;
width: 100%;
display: block;
}

As for installing the Kadence slider or cyclone slider (you don’t have to do this) you can go to appearance > theme recommended plugins.

Ben

[Nathaniel]

Nathaniel

#24502

I have my new website up and running (*Login to see link but I’m having a few issues. The first issue I am having is with my mobile navigation menu being stuck behind the revolution slider on the homepage. When I originally input the slider it was going full screen so we had to make an adjustment by adding some css code. Now I think that code is forcing the slider in front of the menu:

.sliderclass {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}

So I’m not sure how to make that slider code only applicable when viewing the desktop version.

Second issue I’m having is with the mobile version of my site. I want to use a different slider for the mobile version but I’m missing the plugins for the kadence and cyclone sliders.

Third issue is also related to mobile. When my mobile menu expands it is transparent and you can barely see any menu items. I’m certain that my css is clobbering it but I can’t pick it out. Any thoughts?

/***** GLOBAL *****/
.sliderclass {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}

#kad-banner {
padding-bottom: 20px;
}

#logo {
padding-bottom: 0;
padding-top: 0;
padding-bottom: 10px;
}

#thelogo {
height: 75px;
width: 360px;
margin: 0 auto;
padding-top: 10px;
}

#topbar {
pardding-top: 20px;
padding-bottom: 0;
}

#kad-banner>.container {
height: 80px;
padding-top: 0;
margin-top: 0;
}

.page-header h1 {
font-size: 28px;
text-transform: uppercase;
color: rgb(68,68,68);
font-weight: bold;
}

.footerclass {
border-top: 2px solid #BEB6BF;
}

/***** HOMEPAGE *****/
.home_content {
margin-top: 20px;
}

.home_content h5 {
border-bottom: 1px solid #BEB6BF;
margin-bottom: 15px;
padding-bottom: 5px;
}

.home_content a {
text-decoration: none;
color: #9773F1;
}

/***** BLOG *****/
.vendor_link {
text-decoration: none;
color:#B175BD;
}

/*****INFO PAGES *****/
.info_pages h1 {
font-size: 28px;
text-transform: uppercase;
color: rgb(68,68,68);
font-weight: bold;
}

.info_pages subtitle {
text-transform: uppercase;
}

.info_page h5 {
color: #76777A;
}

/***** FAQ PAGE *****/
.faq h5:hover {
color: #000000;
cursor: pointer;
}

.faq>.question>h5 {
color: #000000;
cursor: pointer;
line-height: 30px;
}

.faq>.answer p {
font-style: italic;
}
.faq a {
text-decoration: none;
color: #9773F1;
}

/***** ABOUT *****/
#contact_info {
padding-top: 0;
}

#submit {
// background-color: #898785;
background-color: #D0CFCE; background-image: -webkit-gradient(linear, left top, left bottom, from(#D0CFCE), to(#BCBCBC));
background-image: -webkit-linear-gradient(top, #D0CFCE, #BCBCBC);
background-image: -moz-linear-gradient(top, #D0CFCE, #BCBCBC);
background-image: -ms-linear-gradient(top, #D0CFCE, #BCBCBC);
background-image: -o-linear-gradient(top, #D0CFCE, #BCBCBC);
background-image: linear-gradient(to bottom, #D0CFCE, #BCBCBC);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#D0CFCE, endColorstr=#BCBCBC);
color: #000;
}

#submit:hover {
background-color: #BBBAB9; background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBAB9), to(#A9A9A9));
background-image: -webkit-linear-gradient(top, #BBBAB9, #A9A9A9);
background-image: -moz-linear-gradient(top, #BBBAB9, #A9A9A9);
background-image: -ms-linear-gradient(top, #BBBAB9, #A9A9A9);
background-image: -o-linear-gradient(top, #BBBAB9, #A9A9A9);
background-image: linear-gradient(to bottom, #BBBAB9, #A9A9A9);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#BBBAB9, endColorstr=#A9A9A9);
}

[Nathaniel]

Nathaniel

#24502

I have my new website up and running (*Login to see link but I’m having a few issues. The first issue I am having is with my mobile navigation menu being stuck behind the revolution slider on the homepage. When I originally input the slider it was going full screen so we had to make an adjustment by adding some css code. Now I think that code is forcing the slider in front of the menu:

.sliderclass {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}

So I’m not sure how to make that slider code only applicable when viewing the desktop version.

Second issue I’m having is with the mobile version of my site. I want to use a different slider for the mobile version but I’m missing the plugins for the kadence and cyclone sliders.

Third issue is also related to mobile. When my mobile menu expands it is transparent and you can barely see any menu items. I’m certain that my css is clobbering it but I can’t pick it out. Any thoughts?

/***** GLOBAL *****/
.sliderclass {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}

#kad-banner {
padding-bottom: 20px;
}

#logo {
padding-bottom: 0;
padding-top: 0;
padding-bottom: 10px;
}

#thelogo {
height: 75px;
width: 360px;
margin: 0 auto;
padding-top: 10px;
}

#topbar {
pardding-top: 20px;
padding-bottom: 0;
}

#kad-banner>.container {
height: 80px;
padding-top: 0;
margin-top: 0;
}

.page-header h1 {
font-size: 28px;
text-transform: uppercase;
color: rgb(68,68,68);
font-weight: bold;
}

.footerclass {
border-top: 2px solid #BEB6BF;
}

/***** HOMEPAGE *****/
.home_content {
margin-top: 20px;
}

.home_content h5 {
border-bottom: 1px solid #BEB6BF;
margin-bottom: 15px;
padding-bottom: 5px;
}

.home_content a {
text-decoration: none;
color: #9773F1;
}

/***** BLOG *****/
.vendor_link {
text-decoration: none;
color:#B175BD;
}

/*****INFO PAGES *****/
.info_pages h1 {
font-size: 28px;
text-transform: uppercase;
color: rgb(68,68,68);
font-weight: bold;
}

.info_pages subtitle {
text-transform: uppercase;
}

.info_page h5 {
color: #76777A;
}

/***** FAQ PAGE *****/
.faq h5:hover {
color: #000000;
cursor: pointer;
}

.faq>.question>h5 {
color: #000000;
cursor: pointer;
line-height: 30px;
}

.faq>.answer p {
font-style: italic;
}
.faq a {
text-decoration: none;
color: #9773F1;
}

/***** ABOUT *****/
#contact_info {
padding-top: 0;
}

#submit {
// background-color: #898785;
background-color: #D0CFCE; background-image: -webkit-gradient(linear, left top, left bottom, from(#D0CFCE), to(#BCBCBC));
background-image: -webkit-linear-gradient(top, #D0CFCE, #BCBCBC);
background-image: -moz-linear-gradient(top, #D0CFCE, #BCBCBC);
background-image: -ms-linear-gradient(top, #D0CFCE, #BCBCBC);
background-image: -o-linear-gradient(top, #D0CFCE, #BCBCBC);
background-image: linear-gradient(to bottom, #D0CFCE, #BCBCBC);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#D0CFCE, endColorstr=#BCBCBC);
color: #000;
}

#submit:hover {
background-color: #BBBAB9; background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBAB9), to(#A9A9A9));
background-image: -webkit-linear-gradient(top, #BBBAB9, #A9A9A9);
background-image: -moz-linear-gradient(top, #BBBAB9, #A9A9A9);
background-image: -ms-linear-gradient(top, #BBBAB9, #A9A9A9);
background-image: -o-linear-gradient(top, #BBBAB9, #A9A9A9);
background-image: linear-gradient(to bottom, #BBBAB9, #A9A9A9);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#BBBAB9, endColorstr=#A9A9A9);
}

[Asmus]

Asmus

#24451

Thanks Ben,

Worked like a charm for site-wide banner. Still under menu, mut I gather not possible to put it above secondary menu without going into the code? (which for now I won’t)

Side by side could work for mobile view, just wonder if text to long not to get too squished. Would be fun to try some different settings. (fx exlude text, and keeping logo and image).

Thanks for css fix with site width.

Cheers,
Asmus

[Ben Ritner]

Ben Ritner

#24446

1. You can use this css:

.virtue_banner {margin: 0 -15px}
@media (max-width: 767px){
    .virtue_banner {
    margin: 0 -20px;
}
}

remove what you added.

2. You can use css.. would be:

@media (min-width: 1000px) {.container {width: 1000px;} aside.col-lg-3 {width: 33.33333333333333%;} .main.col-lg-9 {width: 66.66666666666666%;}}

940 is a natural breaking point in the css framework, which is why it’s an option,

Ben

[Asmus]

Asmus

#24444

Hi Hanna (and Ben),

That worked great. Thanks!

1. I also asked about the site-wide-banner that when shrinking the screen pops out of the boxed layout. When shrinking more it contracts. Any suggestions?
(Wonder if that could go above the secondary menu, but gather that would take more than css adjustments?)

2. I have seen that you can choose max 940px width of site, but is it possible to determine other width. Fx. 1000px. Can’t see any options for this.

Sorry lots of questions. Hope it can help others as well and I very much appreciate your answers.

Asmus

[Asmus]

Asmus

#24391

Hi there,

Would there be a possibility to include the title when using a logo and situate both the title and tagline to the right of the logo. This to keep the writing readable by search-engines (instead of incorporating into logo) and to reduce the header height (so not to stack below logo).

Also I’ve played around with the site wide banner. Firstly it would be cool to have it go to the edges (in boxed layout), so have tried a few different adjustments, but when it goes to the edges the site wide banner seems to punch through to the right when reducing screen-size.

Would be great if you’d have a plan 🙂

Cheers,
Asmus

[Asmus]

Asmus

#24391

Hi there,

Would there be a possibility to include the title when using a logo and situate both the title and tagline to the right of the logo. This to keep the writing readable by search-engines (instead of incorporating into logo) and to reduce the header height (so not to stack below logo).

Also I’ve played around with the site wide banner. Firstly it would be cool to have it go to the edges (in boxed layout), so have tried a few different adjustments, but when it goes to the edges the site wide banner seems to punch through to the right when reducing screen-size.

Would be great if you’d have a plan 🙂

Cheers,
Asmus

[lee]

lee

#23884

<div id=”kad-banner-sticky-wrapper” class=”sticky-wrapper” style=”height: 155px;”>

how can i change the height from 155px to 120px

Ive tried to add

.kad-banner-sticky-wrapper {
height:120px;
}

to theme options and style sheet but did not change the height?

cheers, lee

[lee]

lee

#23884

<div id=”kad-banner-sticky-wrapper” class=”sticky-wrapper” style=”height: 155px;”>

how can i change the height from 155px to 120px

Ive tried to add

.kad-banner-sticky-wrapper {
height:120px;
}

to theme options and style sheet but did not change the height?

cheers, lee

[Ben Ritner]

Ben Ritner

#23817

No you can’t add a class to the image menu, to be clear you can’t add classes to an image in the uploader. But more then that the image menu doesn’t use an image tag.. meaning it’s not a true html image, it’s a background which is different. and you can’t just target a background with a blur effect. So for an example of how this won’t work, try adding this css to your site.

.infobanner {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}

Or you can just move on knowing that the image can’t be blurred with css.

Ben

[Ben Ritner]

Ben Ritner

#23806

Hey,
When I look I see that it’s in a column beside your “start changing your life today” banner image?

Where are you wanting to move it?

Ben

[Nathaniel]

Nathaniel

#23528

Thanks for the replies. The problem with adding the css is that the inline style that is being generated is trumping that setting I believe? I put the css code in the style.css and that did not work. I also attempted to inject it into the homepage header but that did not work either.

Unfortunately my site is on my own server so it’s not live right now. I am indeed adding the slider through the theme options. Is there anyway to contain that darn slider?

Slider generated code:

<div class="sliderclass revslider_home_hidetop">
<!-- START REVOLUTION SLIDER 4.6.0 fullwidth mode -->

<div id="rev_slider_2_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;background-color:#ffffff;padding:0px;margin-top:0px;margin-bottom:0px;max-height:540px;">
	<div id="rev_slider_2_1" class="rev_slider fullwidthabanner" style="display:none;max-height:540px;height:540px;">

[Ben Ritner]

Ben Ritner

#23518

If you use the logo layout that adds a widget area to the right of the logo, you can then add a text widget.

There is also the banner option which you can make an image with text and upload there.

Ben