Delete banner

  • 1
  • Question
  • Updated 7 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 9 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
Or do you want those people at the top removed? (The image of those people is the banner)
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Yeah It was those people
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Yeah It was those people I wanted removed
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Did Andi's suggestion work?
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
That developer thing sounds really cool!! Google Crome is the best!!!!!!!!!!!!!
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 Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Yeah I think you should be able to set that but I have marked both you answers as "this answers the question" because they most certainly answer my question!
Amar
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Amar! I love getting stars, I'm trying to get 200! :) I'm at 136 as of right now. (My profile says 134 but it takes 24 hours to update)

Thanks again!
Nathan
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 Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
You'll need to remove the <!-switcheroo--> to make the code display right.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Thanks Nathan,

I did mean to do that but I spotted quickly!
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Andi,
I have been aware of this issue for a long time now but I was never sure how to fix it. The only thing is, the people that gave me the the search box, Expedia Affiliate, only gave me HTML code and I am not sure where the images are saved, therefore I would not be able to download the image. I hope you can make sense of what I am saying,

Amar
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Amar,

The image is here... http://affiliate.travelnow.com/search... right click and click save image as, then edit the image, upload to your Yola File Manager and change the section of the code above.

Andi
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Hi
I am not quite sure how to remove the background. I have finally downloaded it but I have absolutely no idea on how to remove the white background. Could you please guide me as to what editor to use, the method etc.

Amar
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Me or Andi could do it for you. I use PhotoShop and then I select the blue part and then invert it and delete the background out. You want me to do it for you? I'll do it really quick is you'd like.
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
I don't have PhotoShop on my computer - it costs a lot of money, doesn't it. It would be great if one of you champs could do it for me. I don't want to be intruding in to your time or anything.

Kind Regards,
Amar
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I'll do that right now! :)
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Amar,

Download this image http://www.mangopearmedia.com/resourc... and upload it to your File Manager, change the link in the code and A Voila it will be transparent.

Andi
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Awesome Andi! You're very fast...
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Thanks Nathan, I use amazing Software! (Serif DrawPlus X4). I find it better than Photoshop and it only costs £80! WOW.
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Andi,
Where you say in your reply "change the image src location", I am not quite sure where that code is to change - is it in the code for the travel planner? If so I cannot find it in there.

Amar
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
It is in the code for the Travel Planner, under a lot of JavaScript, it is just underneath the green comment: <!---Switcheroo---> . It will say <!--- <img src"link"... ---> (Without the <!--- and --->).
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?