How can I remove banner?

  • 3
  • Question
  • Updated 7 years ago
  • Answered
It says I can change banner but I want to delete it. I know its possible because I know someone with the same template and its deleted.
Photo of Mark

Mark

  • 13 Posts
  • 0 Reply Likes
  • indifferent

Posted 9 years ago

  • 3
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Shawn here's the code and the tricks :)

Working from scratch with CSS mods:


#sys_banner {
background-image: none;
height: 308px;
left: 22px;
margin: 0 auto;
padding: 0;
position: absolute;
top: 20px;
width: 912px;
}

div#sys_background {
background-attachment: none;
background-color: #999999;
background-image: none;
background-position: center top;
background-repeat: repeat-x;
height: 0px;
position: relative;
width: 100%;
}

div.ys_banner_wrap {
background: none;
height: 346px;
margin: -10px auto 0;
padding: 0;
position: relative;
width: 956px;
}


I use Firefox as my browser for the sitebuilder with Firebug implemented. A free add-on and brilliant for this kind of stuff as it's a GUI interface and you simply click on the element which becomes highlighted in your viewer window plus the relevant code is highlighted in a separate window. You can make adjustments on the fly which then shows as the rendered page but it's only for the session. When you have it as the way you like it, just copy the modified CSS and paste it into your CSS over-rides through Notepad to keep it all together.
Photo of Shawn Browning

Shawn Browning

  • 4 Posts
  • 1 Reply Like
Thanks Gop, it worked perfectly, just as I'd hoped. The wife (aka The Boss) however missed the black section at the top, so I've disabled the CSS overrides for now, at least till I can talk her into it.

Also thanks for the heads up on Firebug. At home I run Firefox only, so it'll be a useful add-on for future tweaks. I'm slowly wrapping my head around messing with the code, so anything that helps is always appreciated.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I guess you mean the menu section? Let me know if you need help with this.

With this customisation I'm thinking it may be better to select another style. What you have now created is a very simple canvas and there are others available that would require less customisation to achieve the same thing I think. When you customise a lot you run the risk of slowing down your page load times because it first goes through the default then again through the customised. It just adds time so if you are seeing slower page loads then this may be the reason.
Photo of amegahed

amegahed

  • 10 Posts
  • 0 Reply Likes
I went through this thread and tried many things, I can remove the banner, but it still creates that gray background. I'm trying to remove the background and banner on a single page or through the whole site. Please advise.

I'm using the redplanet style.

Thanks!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello amegahed

Please add the following code to your Site CSS override box:


#splash {
display: none;
}

Please let us know if it doesn't work on your end. Happy site building!
Photo of amegahed

amegahed

  • 10 Posts
  • 0 Reply Likes
Thanks Stefan for the fast response, that worked for all pages. What if I only want to do it for one page?
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
The CSS editor applies changes to your entire website. If you only want to make changes on a single page, you need to add the code to an HTML widget on the page you wish to modify.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Pushing the envelope I see, LT
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Add this to an HTML widget and place it on the page(s) you wish to remove the red planet banner. This is called an Internal Style Sheet or an embedded style and is specifically for modifying the styling on the applied page(s) only.

<style type="text/css">
#splash {
display: none;
}
</style>
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
Hi,
I'm at this site: www.emmyella.com
I would like to remove the banner completely from the template and have that space available to put other other things in. What do I have to do to the code to make this happen?

Thanks
Emmanuel
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Emmanuel

You can remove the banner and its background image by adding this code to your Site CSS Editor:
#sys_banner {

display: none;
}

div#sys_background {
background-image: none;
height: 50px;
}

You can adjust the value for "height" in the last code snippet if needed.
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
Hey Stefan
I'm not sure if this is related but now the menu links at the top of the page don't work. And also it looks like this was done to my site without me actually doing it, should I be thanking someone from yola or did someone get unauthorized access to my site?
Thanks
Emmanuel
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Emmanuel

Hrrrm, my apologies, I tested the new CSS in your Yola account and forgot to remove my CSS edits before leaving your account. Sorry!

I have removed my edits. Unfortunately it seems that I didn't check my edits carefully enough. I have checked Gop's solution below, but it doesn't remove the banner area. The problem is that I can't change the height attribute in the div#sys_background tag. From a height of less than 270px, the menu links become unclickable.

I will bring this problem the attention of one of our HTML specialists for them to check what they can do for you.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The edits below were in addition to what had been done. There is no residual banner area that I can see. Using FF.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Emmanuel,

You need to make a couple more adjustments to remove the residual. The menu items are part of an element that shouldn't be removed. They look as if they are part of the banner setup but need to be retained.

I am not sure if you wanted the larger background removed. It can be retained while removing the banner.

You mentioned replacing this banner with a custom element. That's quite difficult/involved. Here is a beautiful site by a couple, Klaus and Valerie, using the same style as you have and it has been customised similarly. It may be closed for the time being but hopefully up and running again shortly: Reflections of Asia

div.ys_banner_wrap {
background: none;
height: 346px;
margin: -350px auto 0;
padding: 0;
position: relative;
width: 956px;
z-index: 10;
}

div.banner_overlay_shadow {
background: none;
height: 18px;
margin: 0 auto;
padding: 0;
width: 956px;
}


No-one other than Yola CS have access to your site.
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
Hey,

Thanks Stefan and Gop for your help thus far. And no worries about forgetting to remove the edits, I figured it was someone from Yola because they only changed what I had asked to be changed.

I added the code that Gop gave above but the banner is still there. Nothing it in has changed.

What I want to do is put a Jquery slider where the banner is on the home page and replace it with a smaller image on the rest of the pages. I hope explaining what I hope to do helps.

Thanks Again,
Emmanuel
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Oh sorry. I thought that you had already removed the banner as I saw in the display page. This code was just additional to remove the associated elements. There are six elements to that banner.

If you add these to the above, you will remove the banner image but not the reserved space and wall-paper background;

#sys_banner {
background-image: none;
height: 338px;
left: 6px;
margin: 0 auto;
padding: 0;
position: absolute;
top: 4px;
width: 945px;
}


div.ys_banner_wrap {
background: url("templates/VibrantCanvas/resources/images/banner-overlay.png") no-repeat scroll center top transparent;
height: 0;
margin: -350px auto 0;
padding: 0;
position: relative;
width: 956px;
z-index: 10;
}

You can now add an element above your list.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Emmanuel

I'm not sure if Gop's solution will allow you to add a jQuery slider to your banner area. As I see it, you would need to remove the reserved space for the banner area and add your jQuery slider below it within the content area of your page. But Gop may have another idea.

If you get stuck, please send us your code request via our Contact Support Form for our HTML specialists to assist you further. Please allow a couple of days for them to get back to you.

If they can help you, please share the code they give you on this thread in order to help others who wish to do the same thing with the same Style. Thanks!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You can add a slider into the banner space by using the banner div. Retain the wrapper and then substitute the banner with the slider. The slider would need to be set at the banner size and the images would need to be exactly the size of the aperture otherwise you will get a couple of images showing in the slider aperture. This depends on the slider chosen. Have a look at "easy slider" and "boxslider". "Easyslider" is the easier to set up but shorter on the fine tuning.

This is hard work I find but possible.
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
Hey Gop and Stefan,

The code Gop gave above removed the banner. Thank You!

Where would I put the code for the easyslider or bxslider?

And for other pages, can I put in a smaller picture than the banner wrap?

Thanks
Emmanuel
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Emmanuel,

You are a tenacious developer. Good on you :)

This would necessarily need to be added on the page only and not in your Site CSS as this would apply it to all pages.

<style type="text/css">#sys_banner {
slider placement code here (calls it from another file)
}</style>


You will also need to re-instate the wrapper. ie: This could be done in your Site CSS as it affects all pages deliberately.
div.ys_banner_wrap {
background: url("templates/VibrantCanvas/resources/images/banner-overlay.png") no-repeat scroll center top transparent;
height: 0;
margin: -350px auto 0;
padding: 0;
position: relative;
width: 956px;
z-index: 10;
}


Gop.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
And for other pages, can I put in a smaller picture than the banner wrap?

You can add a smaller image yes. It would be central and at approximately the same location.

This would be done with code added to your page and not Site CSS. If you need help with the code for page entry let me know
<style type="text/css">
#sys_banner {
background-image: url(your page image);
height: (up to you to fit the image) px;
left: 6px;
margin: 0 auto;
padding: 0;
position: absolute;
top: 4px;
width: (also up to you to fit the image) px;
}</style>


There is likely to be some additional tuning but you will need to add the image to see what.
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
Thank you for all your help on this!
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
Hey Gop,
I have a few more questions about putting the slider on my site.

The jquery file that is linked from google in the head of my site is
</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

But the jquery version that bxslider asks to be linked is
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

1. Does this discrepancy matter? Do I have to include an html widget in my site that calls to the later version(1.8.2)?

For the actual code of the images such as here

<ul class="bxslider">

<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>


2. Do I put this in an html widget in the site? And where do I put these images in my site directory?

Thanks,
Emmanuel
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
A2: You do put the code in an HTML widget and you store the images in a folder within your File manager called imagesand change the sources to:
<li><img src="resources/images/pic1.jpg" /></li>
.......etc


A1: The jquery script is being called from an external source so you don't have to worry about adding it as a file to your site. They are 2 versions and I would try the default called in your site head and see how that goes.
Photo of Jacob Leaf

Jacob Leaf

  • 1 Post
  • 0 Reply Likes
hey guys just need your help iv made a slide show in slideful.com and got it on my site but i really need it in the banner area is there a way to do that or do i have to delete the banner altogether if so can help me with that too

cheers

jacob leaf

This reply was created from a merged topic originally titled
slideshow.
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Jacob, there's information here on removing your banner or you can choose a style without a prominent banner.
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
Hey Gop,
I am not getting a slider on my page, I'm just getting a list of images.
Here is the code I'm using:

<!-- bxSlider Javascript file --> <script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
<style type="text/css">#sys_banner {
$(document).ready(function(){
$('.bxslider').bxSlider();
});
}</style>
<ul class="bxslider">
<li><img src="resources/slider_images/sale.png" /></li>
<li><img src="resources/slider_images/review.png" /></li>
<li><img src="resources/slider_images/featured.png" /></li>
</ul>

What am I doing wrong?
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
Any help on this please?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Are you able to get bxslider to work on a trial page with the same images listed?

<script src="/js/jquery.bxslider.min.js">
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />


These two snippets above look wrong Emmanuel? The addresses are incomplete maybe taken straight from the bxslider code?

You would need to add these to your File Manager and include that address in the calls. For example if you placed the jquery.bxslider.min.js into a folder called js then the address would be resources/js/jquery.bxslider.min.js

Similarly if the stylesheet was stored in your file manager in a folder called lib then the calling address would be resources/lib/jquery.bxslider.css.

If these are being called from an external site then you will need to include the complete URL with these.

Let me know if you need help with this query.

I mentioned above trying it on a test page first. That will help isolate any problems you may have in its implementation as it is quite an involved application.
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
I see,
I didn't include the bxslider js and css into my site resources, Doh!
Thanks
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
When I try to upload the .js file I get an error message that says file extension restricted. Is there way I can get it unrestricted or another way the file could be uploaded into my site
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes. There's a problem with JS files currently that Yola are working on and no estimate of a fix time.

In the interim I would either call them from a remote site or store them on http://yourjavascript.com for free.

You should be able to store the style sheet jquery.bxslider.css. in your file manager OK.
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
Hey
I added a test page and linked the javascript file and added the css files but still I just an ul list at
emmyella.com\test-page.php

I'm sure I'm missing something any thoughts?
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
I got it to work, I kept calling the javascript inside style element instead of the script element,
Any help how I place the slider where the banner is on the index page? And center the picture?

Thanks
Emmanuel
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I'm using Chrome and your test page appears to be working for me Emmanuel. 3 slides?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I was out of synch with your posts/ Glad you got it working.

To place it go back to<style type="text/css">#sys_banner {
slider placement code here (calls it from another file)
}</style>
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
By Slider placement code do you mean the javascript or the ul?
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
Yeah, I realized(Duh!) I have call the javascript from the script element. And for the index page how can put it where the banner is and center it?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The sys_banner has been defined in location so all you should need to do is to place the

<!-- bxSlider Javascript file --> <script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
<style type="text/css">#sys_banner {
$(document).ready(function(){
$('.bxslider').bxSlider();
});
}</style>
<ul class="bxslider">
<li><img src="resources/slider_images/sale.png" /></li>
<li><img src="resources/slider_images/review.png" /></li>
<li><img src="resources/slider_images/featured.png" /></li>........


You must make sure that the sys_banner parameters will fit the slider otherwise it either won't work or it will be strange looking.

Check the addresses of the js and css
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
When I call the javascript inside the style element all I get is an unordered list on the page, the browser doesnt seem to recognize the javascript code as javascript. It's not even in the banner area.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Did you check the size parameters of the banner and the slider. The slider must fit into the reserved space of the banner. Not just the images but the whole slider effect.
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
Where are the size parameters for the slider effect? Are they in the CSS? And if they are in the CSS and the width is 100% and I change it to 940 pixels how will that effect the responsiveness of the slider?
Photo of Emmanuel Genard

Emmanuel Genard

  • 45 Posts
  • 0 Reply Likes
To clarify:
I see css selector .bx-wrapper {
position: relative;
margin: 0 0 60px;
padding: 0;
*zoom: 1;
}

.bx-wrapper img {
width: 100%;
display: block;
}

If changed the width in ".bx-wrapper img" to 940px Will that do it? Or do I add a width to ".bx-wrapper" ? Or is it not even in the CSS but somewhere in the Javascript file?
Thanks
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Change the banner wrap parameters rather than the bxslider parameters.

here are the original banner wrap parameters:
div.ys_banner_wrap {
background: none;
height: 346px;
margin: -350px auto 0;
padding: 0;
position: relative;
width: 956px;
z-index: 10;
}