Share and discuss Solo Build It!'s BlockBuilder 2 strategies and tips. Get help using BlockBuilder. If you're converting pages from the old BlockBuilder, find tips to make the switch easier.

Moderators: A J from Somewhere Hot, Laura from Chautauqua

#1366045 by Davide from Serle
Sat Mar 04, 2017 2:00 pm
Hello SBlers,

I am back again in the forum asking for information I have not found after digging in the forum.

Does anyone knows how to include the search Google Tool Bar above the site Header?

My idea is to insert a code date and time along with the google tool bar just above the site header, and maybe put additional things like social icons such as Facebook and so on.

I have been trying to find a way on my own but I did not figure out how to do that, and on the forum I could not find anything related to that to help me.

Any help on achieving that it is very appreciate! Really! :roll:

For your information I am not good at coding or programming with CSS. So if I need to use some sort of CSS code, I would appreciate anyone showing me the way.

Please here it is an example of what I would like to achieve, clink on the link [Domain Private]

Thank you in advance for stopping by!
Last edited by Debs Seeber from Palm Coast on Sat Mar 04, 2017 4:13 pm, edited 1 time in total. Reason: Fixed typo in subject
#1366061 by Debs from SiteSell
Sat Mar 04, 2017 4:25 pm
Hi Davide,

I moved your post here as you need to do most of the placement/styling for above the header in BB2, not SiteDesigner.

First you need to drag a Raw HTML Block into the "top of header" area to start with. I tested and it wants to show on the header instead of above it. You may need some CSS to style the exact placement of your code higher than it might appear naturally.

I am not good with anything more than the very basic when it comes to CSS so I'm hoping one of the excellent coders here on the forums can pitch in how to do the CSS to make the Raw HTML Block appear higher than the default location (which is about 1/3 down the header image instead of just above it) as well as how to add your social buttons, etc.

Debs
#1366195 by Will from Los Ojos
Mon Mar 06, 2017 5:49 pm
Hi Davide,

Here's another way of approaching the problem.

Debs has described how any code in HTML blocks in the Header appears within the Header box, and not above it.

What I suggest is that you make a new Header image using PicMonkey or something similar, and make the top 100px or so transparent. Then, the top part of the Header will be within the range of the BB2 boxes. Then you can put the Search code etc into a Raw HTML box, and Container Block, as you would with any other code. The Container Block contains most of the commonly used positioning commands you might need, such as float:left, width, margin, padding etc.

If you do this, you need to make sure all the other boxes that live in the Header area also have zero height. This means going to the Site Designer and making sure the WebSite Name box has zero margins and padding, and the Tagline box also has zero margins and padding. Although you can't see them, because they are empty, they still take up physical space inside the Header box even though they are empty and invisible.

Will

PS. You should remove the Search box code you have added to the Head area. The Head area is only for code that is not drawn to the screen by the browser. By placing the Search box code in this area, you've closed up the Head early, and the Body now contains code that should be in the Head. It confuses the browser.
#1366696 by Davide from Serle
Sun Mar 12, 2017 3:34 pm
Thank you Debs and Will for taking the time to reply to my post.

I still did not get what I want, but at least I managed to find a way to put up the Date and Time.

However, I am still going crazy finding the right CSS code to add two different block elements on the same line.

One should be the date and time which I already included on the right hand of the header up to the top, and the second CSS code block I would like to put is the google search bar or something else, but on the left hand side on the top of the page at the same level with the date and time.

I just need some help with CSS coding which is not my strength.

This is the code I used to put the date and time on the top of the header.

<div style= "margin-top:-60px;float:left;width:180px;">Insert the script Here</div>

Your Idea Will is not doable for me because I can't and don't want to make a new header image because the new header have been made by a designer longtime ago and people got used to that brand image I have, so changing it is not a good idea.

Thanks
#1366752 by David from Oxfordshire
Mon Mar 13, 2017 1:49 pm
Davide from Serle wrote:Your Idea Will is not doable for me because I can't and don't want to make a new header image because the new header have been made by a designer longtime ago and people got used to that brand image I have, so changing it is not a good idea.

Hi Davide,

Will isn't suggesting that you make a completely different header image, just one that allows you to place the Google search box within the header area, rather than above it. One way that you could do this (and it's just an example) is to put an extra band of yellow above your current image, but still within the white border:

https://www.screencast.com/t/P4H1QV1HqUy

You'll probably want something slightly more sophisticated than this (for example, to restore the frame edges on your photos), but you get the general idea.

Hope this helps,
#1366777 by Davide from Serle
Mon Mar 13, 2017 6:41 pm
Hi David,

Thank you for stopping by on my post.

For your information, I've already thought of your suggestion and tried to implement it, but I found out difficult to find the same color as the header image. Having two different type of yellow is not really good to people's eye, at least in my view. If I don't like it people won't like it neither.

If I could find a way to spread the same color of the header, which as you see it change gradually through the image from yellow to soft yellow and then white to go back yellow. To do what you suggest I can only use one color font and cannot combine different colors at the same time to get the same result as my header.

I did also thought about to shrink the photos I have on the header to leave some space, but I don't know how to do that because the image cannot be worked anymore on Photoshop unless you unlock the image, but I did try and I could not do anything about. The header image was made by a designer so I don't have any open file I could work on to make some changes.

If you pay attention to my header image I have left a sort of 50% px on the header and make it the same color of the top body background where now I put the time and date. But again, I am still looking for someone helping me with the code I should use to add the google toolbar on the top of the page but on the opposite side to the date and time.

If I have to hire a designer to do the job it will ask me 200Dollars, I already asked. At this point with this money or some extra I can make a fully new header image, which is not want I want because after 4 years people got used to that image.

The thing is as I went fully responsive I just wanted to add some little change to my design and right now I am in the process to amend my homepage too.

Still waiting for some code guy out there who could highlight my ignorance on coding and show me how to do what I would like as the last resort. Otherwise I will just give up on this and move on with something else, but you know, sometimes it is very very irritating when you have in mind to do something simple on your site, but then it turned out to be so difficult for you because of lack of skills. I spent the whole day to find out the code to put the date and bar and I guess a tech guy would have done what I did in less than 30mins.

That's when you go crazy with your online business, you want to do things out of your range of competence but you go stuck in the process and time fly and you get at the end knackered and hopeless. :(

Cheers!
#1366858 by David from Oxfordshire
Wed Mar 15, 2017 10:53 am
Davide from Serle wrote:... I found out difficult to find the same color as the header image. Having two different type of yellow is not really good to people's eye, at least in my view. If I don't like it people won't like it neither.

If I could find a way to spread the same color of the header, which as you see it change gradually through the image from yellow to soft yellow and then white to go back yellow. To do what you suggest I can only use one color font and cannot combine different colors at the same time to get the same result as my header.

Hi Davide,

I matched the colour of my top border to that of the bottom border which is a more-or-less solid yellow #ffd54c. It doesn't vary much from that, and I'm not sure that the difference is apparent to the eye. If it worries you, you could copy the bottom border to the top, which would give you those slight variations.

Obviously, restoring the corners of your photos so that they overlapped the top border would be a harder task.

Hope this helps,
#1366868 by Laura from Chautauqua
Wed Mar 15, 2017 3:38 pm
Hi Davide,

Okay, try this...

In Site Designer...

Copy and paste this CSS in "Add Custom CSS" in Site Designer...

Code: Select all#PageWrapper #Header {
padding-top:20px;
}

#PageWrapper {
margin-top:0
}



In BlockBuilder...

Cut and paste your search box from the Head to a Raw HTML Block placed in the same Sitewide Dot as your date/time code.

Change the opening div for the search box to this...

Code: Select all<div style="width:50%;position:absolute;top:5px;margin-top:-25px;">


Change the opening div for the date/time code to this...

Code: Select all<div style="width:50%;position:absolute;top:5px;right:5px;margin-top:-25px;text-align:right;color: #171717;font-family: Open Sans, sans-serif;font-weight:bold; font-size:80%;">


Please let me know if you have any issues.

I hope that helps,
Laura
#1367321 by Davide from Serle
Mon Mar 20, 2017 10:07 pm
Thank you Laura for stopping by.

I have not tried your coding so far as i have been working on something else.

For now I decided to leave things are they are as I don't want to go mad with the coding, but I will give it a try soon.

Thank you for your help!
Similar Topics Statistics Last post
Content in Top of Header SW Dot appears under Bottom of Header
by Susan from Nolan Thu Aug 18, 2016 4:11 pm
2 Replies
264 Views
by Susan from Nolan
Fri Aug 19, 2016 1:53 am
Above Header Site Wide Dot
by Kathy from Mintaro Sun Mar 26, 2017 9:20 am
2 Replies
278 Views
by Laura from Chautauqua
Sun Mar 26, 2017 1:43 pm
How to add a search box to the site?
by Devendra from Krishnagiri Fri Jun 09, 2017 5:20 pm
12 Replies
449 Views
by Laura from Golden
Mon Jun 12, 2017 2:33 pm
Building New Site: Can I Copy BB2 from Old Site
by Mike from Mount Dora, Florida Fri Jul 07, 2017 5:32 pm
5 Replies
246 Views
by Mike from Mount Dora, Florida
Mon Jul 10, 2017 6:29 pm
How to add previous(old) articles of my site on side bar group by month and year?
by Devendra from Krishnagiri Fri Jun 09, 2017 5:24 pm
2 Replies
146 Views
by Devendra from Krishnagiri
Fri Jun 09, 2017 11:55 pm

Users browsing this forum: No registered users and 2 guests