Any HTML Gurus? Help Needed On Header

[Gary Lewis]

Some of you know that I "successfully" removed a gray banner that we had in our header that was taking up space.  But what you don't know is that doing so caused a problem with the Weebly editor.

Yesterday I noticed that when I used the editor to look at the home page, which has the forum embedded on it, I couldn't see the embed code if in the "desktop" mode, but could see that the code was there in the "mobile" mode.  However, even then I couldn't edit it.  So today I spent 2 hours on the phone with Weebly troubleshooting the problem.  They could replicate the problem, but after poking around they finally asked "Have you put any custom code in?"

My first thought was "No, I've not put any custom code in."  But then I realized that taking code out made the rest of the code custom, and in the end I was the culprit.  As soon as I put the code below back onto Line 39 everything started working.  

"<div id="banner"><div class="banner-content"></div></div>"

I've not published the site again with that code in place, but as soon as I do the banner will be back.  So I'd like to modify the HTML to remove the banner, but I still need to be able to see the embed code.

Are any of you HTML gurus?  Can you tell me what I did wrong and what I should do instead?  Here's a screenshot of the whole of the header code:

[ckuske]

If the banner needs to be there but you want it hidden, you can add the following to the "div" tag:

style="display: none;"

so

<div id="banner" style="display: none;">

This assumes there aren't any weird dependencies in other parts of the CSS/Javascript etc that rely on that taking real estate on the screen, but worth a shot.

[Gary Lewis]

Ok, so the code now is "<div id="banner"><div class="banner-content"></div></div>" and it would go to "<div id="banner" style="display: none;"><div class="banner-content"></div></div>".  IOW I just add "style="display: none;".  Right?  

[ckuske]

Yup, *should* be it

[ckuske]

Depending on how the page changes, you may need to move the added style tag to a child tag etc, but try the top one first as I sent to you.

[Gary Lewis]

Well, Chris, it works.  Sorta.  And I need your help understanding what is happening.

With the extra code in there the results aren't what I expected.  The editor is seemingly happy with the html as it doesn't barf.  But what I see in the editor isn't correct as the header text or logo overlays the embed code.

I created a new page I could play with, added an embed code, and with the logo turned on I initially had no embed code showing.  So I added another one and it still didn't show.  So I added another.  Nada.

Then I zoomed to 110% and got the view shown below, which means the logo is overlaying the code - when viewing in the editor.  (Note that the code itself works fine.)




So then I turned the logo off and went back to the Garysgaragemahal and got this:




And then I turned the text off and could see this:

[Gary Lewis]

Should I go ahead and publish so we can see the results on the page and not just in the editor?

[ckuske]

Sure, that's fine if you don't mind.  I can play with the HTML on my side once it is published at runtime (the F12 mode in Chrome/Edge lets you edit HTML in realtime in your browser as only local change)

[Gary Lewis]

It is published, and seems to work - save for viewing in the editor.

For the page with three embed widgets go to Bullnose Forum/New Home Page.  Won't show anything, but they are there.

[ckuske]

Without knowing the details, the editor is probably a different ball of wax.  These sites like Weebly have lots of HTML they add to what you put into the editor, and their editor may expect certain HTML to be there (they are assuming no customization of certain areas of HTML.. (at least typically)

[Gary Lewis]

Well, here's what I've found.  I played with turning the logo and text on and off and got these results:

Logo On: I can't see the embed code unless I zoom to 110%, at which point it appears.  Anything less or more and the embed code is covered up

.

Text On: The embed code is just slightly visible at 100 and 125%, and fully visible at 110%

Off: With the header off, meaning no text and no logo, I can see the embed code at any level of zoom

So it seems to me like there's a problem in the editor since it cannot see the embed code in most conditions but the html functions just fine.  Having said that, I have a workaround so I'm going to leave your html in.

Thanks!

[ckuske]

I can't help as much with Bullnose questions , but software is a different story.  Happy to help

[kramttocs]

Good job guys. Didn't think about the editor expecting (requiring?) a specific element id to be present. Setting the display is a clean solution

Might be worth seeing what happens if you modify the banner-content css class to set the display property there. Maybe the editor won't care as much then. Like Chris said - modify the child and leave the parent with the id alone.

[Gary Lewis]

kramttocs wrote

Might be worth seeing what happens if you modify the banner-content css class to set the display property there. Maybe the editor won't care as much then. Like Chris said - modify the child and leave the parent with the id alone.

Someone needs to help me understand how to "modify the banner-content css class to set the display property there".  

[ckuske]

Change:

"<div id="banner" style="display: none;"><div class="banner-content"></div></div>"

to:

"<div id="banner"><div class="banner-content" style="display: none;"></div></div>"

[kramttocs]

Chris - are you seeing the #banner div get a padding-top of 150px? That may negate the child alternative.

[Gary Lewis]

That doesn't work very well.  As shown below we got the gray banner back.  But is sorta helped on the editor.  At 110% I can see all of the Bullnose Forum text awa the embedded text.  At 110% I still have the embedded text but only a sliver of Bullnose Forum.

So the "<div id="banner" style="display: none;"><div class="banner-content"></div></div>" works better for the user and I just have to remember to turn the logo off.  Unless you have other ideas?

[ckuske]

Yeah Scott, I did see that.  That's why I mentioned to Gary that the Weebly editor is "helpful" and adds extra bits but I didn't specifically mention the padding it seemed to add after Gary tweaked it.

Agreed it may not help.  I understand why they don't let people do their own HTML necessarily, but it drives me crazy at the same time.  Sometimes you get pinned in a corner because of it...

[ckuske]

I wonder what would happen if Gary set the banner div padding explictly, then set display: none on the banner-content div?  Which padding setting will win??  Probably Weebly's, but...

[Gary Lewis]

Would it be easier for me to set one or both of you as editors?  At least for a while to play with this stuff?