Delete banner

  • 1
  • Question
  • Updated 6 years ago
  • Answered
Hello
Is there css or html code that allows you to remove the banner/picture area on a style?
Thanks,
Amar
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
  • confident

Posted 7 years ago

  • 1
Photo of Parthiv

Parthiv

  • 126 Posts
  • 10 Reply Likes
Hi,

You can hide banners with CSS, but the CSS can be different for different styles. So tell me what you want removed from what style, and I'll give you the code.

- Parthiv
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Amar

I viewed your page source on your site, www.frodotraveller.com, and I saw the banner ID and stuff. So I got the code below...

Just add this code to an HTML widget:

<style type="text/css">
#header {
display:none;
}
#header h1 {
display:none;
}
</style>

That should work. If it doesn't please let me know.

I hope this is helpful.

Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I got Amar's website URL by hovering over his profile picture and it shows his website there.



Nathan
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Am trying code now...
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Hi Nathan
I just had a look at my website and saw that it was a different style there. I will republish with the right one in a moment. I am guessing the code ndid not work because you saw the wrong code. Very sorry for the confusion.

Amar
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
It's ok. It might still work. Did you try it? Go ahead and see if it works and if it doesn't, please let me know.

Nathan
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
The code didn't work. Sorry for the confusion.
Amar
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
It's okay. What part do you want removed? The navy blue chat-box?

Nathan

P.S I have a thing called "Developers" on my browser and I can inspect any element to find the ID, name of it, and all of the HTML coding to make it display, Google Chrome rocks! :) Thats how I can see what the ID or Class Name of each element is.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah it is cool. And it highlights each element too! When you hover over a line of code it pin points the element, which is cool!
Photo of Parthiv

Parthiv

  • 126 Posts
  • 10 Reply Likes
There's a similar thing in Safari, and also, I believe, in Firefox.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
And Opera
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah. I use Firefox, Safari and Google Chrome. I've never used Opera, though.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Opera is very good for slow connections because it has Opera Turbo which works wonders
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
I have looked at your code and in your custom CSS you have copied and pasted your template CSS. This means that you have the banner twice.

In your Custom CSS, find where it says:

div#sys_banner { width: 978px;
height: 150px;
background: url(http://s2.yolacdn.net/V0020678/templa...) top left no-repeat;
margin:-25px 0 10px 0;
}

div.ys_banner_overlay { background:url(http://s2.yolacdn.net/V0020678/templa...) top left no-repeat;
width: 978px;
height: 150px;
}

and replace with:

div#sys_banner {
display:none;
}

div.ys_banner_overlay {
display:none;
}
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Andi, that should work!

P.S: Andi, one tip, when you copy CSS and paste it 2 times it wont duplicate the banner :) It will only make the second CSS that was copied actually work. You have to add more HTML to make it duplicate. :)
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Thanks Nathan,

What I meant was that the browser would read the last instance of the banner, meaning that it would read the second version in the css, which would revert the banner to its original state.

Andi
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Ah, I see. I was confused thats why I said that. Sorry about that. :D
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
No problem Nathan, glad you raised the issue so that no-one else got confused!
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Okay thanks Andi heaps. Your code worked. Is there any way to remove that sort of speech bubble thing from the top.
Thanks SO much,
Amar
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Amar

Just add this to your CSS code:

.ys_heading {
display:none;
}

Hope this helps!

Nathan
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Yay - it worked!! Thanks Andi and Nathan. You are both well deserved yola champs!
Amar
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Haha, no problems Amar, we are always here to help!

Andi
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem! I'm glad it worked.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
We're here to help!

Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
It looks great, Amar! I like it like that, I think it looks better without that chat box and banner!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I wish there was a way for champs to set questions as "answered".
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
I agree that we should have that function, I like having POWER! :P

Andi
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
It would be pretty awesome for champs (that help a lot) to have the ability to set the topic status.
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
We certainly appreciate the hard work you guys put in to assisting customers, though, we love to review what has been done before setting the thread to 'answered'. Thanks!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
That's fair enough, it does not really affect us too much.

Andi
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem, I understand.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
One more thing, Amar, would you like to remove that little "home" link at the top? (Since you don't have any other pages clicking that link just leads to the page you're on) If so just add this to your CSS:

.sys_navigation {
display:none;
}

Happy Site Building,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Never mind, I see you are adding links now. :) If you want to make them capital letters (like "Home" instead of "home") just go to Page > Edit Navigation and click on "Edit Labels" for the menu link that you want to edit.

Nathan
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
I tried to make them capital letters but it just doesn't do it. On the Edit Navigation page it says "Home" but on the actual page it says "home". Quite strange but it doesn't bother me that much.

Amar
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Amar,

You will need to change the following element of your CSS:

div.ys_menu a { padding: 5px 2px;
margin-left: 2.0em;
text-decoration: none;
color: #666;
font-weight: lighter;
text-transform: lowercase;
}

Change it to:

div.ys_menu a { padding: 5px 2px;
margin-left: 2.0em;
text-decoration: none;
color: #666;
font-weight: lighter;
text-transform: none;
}

Andi
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Amar,

I would recommend that you make the top part of your travel planner Transparent, you would need to download the image and remove the background (I could do this for you). Then save this image as a PNG. Upload to your Yola website. Then you would need to change the following code:

<!--
<img src="http://affiliate.travelnow.com/search..." border="0"><br>
<table cellspacing="0" cellpadding="0" border="0" width="442" class="switcheroo-border">

--->
You would need to change the img src="image link here" to the link on your files i.e. resources/travelplannertopimage.png.

Kind Regards,

Andi North
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Hi
I found the place but when I changed the image source to "www.frodotraveller.com/resources/tpto..." it did not work. Can you have a look at my page source code and see if I did anything wrong that would have caused this?

Amar
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Works perfectly for me! I can see the image correctly.

Andi
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Oh! I opened up my website a few minutes later and it was there! Strange because it is not showing up in the editor.

Amar
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
You will have to refresh the editor (next to the preview link) for changes like that to be visible in the editor.
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Thanks, I can see the bit at the top now.

Amar
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Amar, all you have to do is right click on the image and click "save" If you have a MacBook just hold CTRL and then click on the image to right-click. (Unless you have a mouse for it)
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Yola Champs at it again - thanks, guys!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Thanks Brianna,

I am glad we are helping!

Andi
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Photo of BRENT PAINE

BRENT PAINE

  • 2 Posts
  • 0 Reply Likes
I have used css code to remove banner from my site (www.firstpageprofiles.com) but I still see the banner show for a split second before it disappears...is there a way to stop this from happening?