Need HTML? Want to use CSS (cascading style sheets)? Need a touch of help with Javascript, Java, or other coding language? Whether through SBI!'s BlockBuilder 2 or your own HTML Editor, post here. Push the envelope. Learn basics (ex., how to format your text, add tables) or go as "out there" as you like. Problems? Questions? Help and be helped.

Moderators: Laura from Chautauqua, Will from Los Ojos

#1369246 by Nicola from New York
Tue Apr 18, 2017 6:36 pm
Hi all,
I have just updated my website to a new responsive template and am hoping someone can help me out with the HTML/CSS code needed to make the header display only on the home page. I have received several emails from disgruntled customers today about needing to scroll down on every page to get to the content.

Any help would be greatly appreciated.

Nicola
#1369256 by Juri from plainlight.com
Tue Apr 18, 2017 9:59 pm

Hi Nicola,

You'll need to make changes in two places.

The first has to be made in Site Designer to override your default template settings on all pages. The following will have to be placed in the Custom CSS section (click on Add Custom CSS button to edit it):

Code: Select all/* removes header image */
#PageWrapper #Header .Liner, html.mobile #PageWrapper #Header .Liner {
min-height: 0;
}
#Header .Liner {
padding-top: 58px;
}
#PageWrapper #Header .Tagline, html.mobile #PageWrapper #Header .Tagline {
display: none;
}

Don't forget to Save Style! Check how your pages look now. If anything doesn't work as intended, return to Site Designer, remove your custom changes, and Save Style again. Skip the next step -- this will leave you with the previous setup.

If the header disappeared, to restore it on your Homepage, load your index.html in BlockBuilder, click on Head button and add the following to This Page Only section:

Code: Select all<style type="text/css">
/* restores header image */
#PageWrapper #Header .Liner, html.mobile #PageWrapper #Header .Liner {
min-height: 488px;
}
#Header .Liner {
padding-top: 100px;
}
#PageWrapper #Header .Tagline, html.mobile #PageWrapper #Header .Tagline {
display: initial;
}
</style>

This can be tested in Preview without building the page. If it looks OK, Build It! If not, don't build the page, and possibly remove the changes from Site Designer as well.

Good luck!

Kind regards,
J.

PS In order not to load the header image on all pages, another change should be done in Site Designer and in index.html. However, this will make changing the image quite cumbersome. If you would like to do it, please reply in this thread.
Similar Topics Statistics Last post
Responsive Grid -- Mobile Display
by David from Port Isabel Wed Feb 21, 2018 3:19 pm
4 Replies
201 Views
by A J from Somewhere Hot
Thu Feb 22, 2018 5:32 am
Make the responsive grid follow an historical order
by Smart Kid from Mýkonos Mon Oct 16, 2017 1:43 pm
3 Replies
290 Views
by Smart Kid from Mýkonos
Tue Oct 17, 2017 8:12 am
Why can't/how can I get text to wrap left/right around my adsense responsive ad code?
by John from Midway Park Sat Aug 05, 2017 1:48 pm
2 Replies
443 Views
by John from Midway Park
Sun Aug 06, 2017 2:21 pm
Removing Header image from selected pages.
by Michael from Brisbane Sun Jan 07, 2018 7:56 am
2 Replies
262 Views
by Michael from Brisbane
Tue Jan 09, 2018 5:03 am
Centring the affiliate image link code - help!
by Georgia from Tweed Heads Mon Jan 15, 2018 12:36 am
7 Replies
504 Views
by Juri from plainlight.com
Tue Jan 16, 2018 7:13 pm

Users browsing this forum: No registered users and 1 guest