Weebly Top Bar: The Hidden Potential
April 18, 2012 Tags: Drag & Drop Header, Persistent, Weebly Top Bar
Category: Articles, Headers & Footers, Layouts & Sidebars 41 Comments 
If I were to suggest one single most important article that every Weebly user must read, then this is it. The Top Bar area gets the maximum amount of attention from your visitors. This is also the area that brings in maximum click through revenue for your Advertisements. Check the Google Heat Map for more information on Ad Placement. Whether for advertisements or for “Call To Action” items, this is the prime area to gather your visitor’s attention. In this article, we will use the SiteShowCase Blog to illustrate how you can add a Persistent Top Bar to Weebly Blog (or) Weebly Pages (or) Both as a drag & drop area.
We will also show you how to restrict the Top Bar to a selected set of pages only. If you have seen our article about creating Flexible Footer, this goes along similar lines. If you are using a theme without a banner, this will actually work as a Drag & Drop Header. Since it expands dynamically depending on the content added, your banner height can be precise to the page need.Before going into the details, notice the following aspects of the top bar of SiteShowCase.Weebly.com/blog :
- The Top Bar has its own background and stands out from the rest of the content.
- There are multiple elements: Picture, Text, Social Icons.
- The Top Bar stays the same for Blog Pages and Blog posts. Click on a Blog post title and the top bar remains as is.
- Top Bar does not appear for other regular pages.
This can be achieved in three parts:
1) Defining the style in CSS
2) Including the element in the page layout (index.html, or landing.html, tall-header.html, short-header.html or no-header.html)
3) Dragging & Dropping the Elements into the new top bar content area.
Part 1: Defining the Style in CSS
- Upload the background image via “Edit HTML/CSS -> Add New Files“. We named this file topbar-bg.jpg
- In main-style.css we add the following style code.
#topbar{
background: url(topbar-bg.jpg);
}
#topbar p{
color: red;
font-size: 21px;
font-family: "Georgia";
font-style: italic;
}
Here we are telling the topbar to use the background image “topbar-bg.jpg” and repeat it horizontally and vertically (which is the default when “repeat” is not explicitly stated)
The “topbar p” is where we define how a paragraph within the Top Bar area should look like. Of course, you could always override it by changing the colour of paragraph element. However, if you want precise control over font-size, you better define it here. The size adjustment from paragraph element could be too big or too small.
Part 2: Include the element in page layout html file
(index.html / landing.html / tall-header.html / short-header.html / no-header.html)
This is really simple. All you need to do is to add the following line to the page lay out html file just above the div that has {content}
<div id="topbar">{topbar:content global="false"}</div>
The global=”false” is the part that states if the elements that we drag and drop into the top bar area be persistent or not. In case of SiteShowCase.weebly.com, we wanted the top bar to appear only for the blog but not for the rest of the pages. So we chose global=”false”. However, if you want the same top bar content to be persistent across each and every page, simply remove the global=”false” from the above line.
And now you are ready for the cool part, dragging & dropping !!
Note that you do not need to add it to all page layouts. You can add to the ones you like to use.
Part 3: Drag & Drop Elements into the new top bar content area
Go to the Weebly website editor and select your blog page. All you need to do is drag what ever elements you need into this area. In our case, we used the multiple columns elements to create a layout and then used pictures, paragraphs.
Top bar layout for Site Show Case Blog
For the social icons, we just used another multiple columns elements and placed images with links to our facebook page etc. If you would like to add country flags to take your visitors to a language page corresponding to it, you may drop a gallery element at the top of the top bar which makes it intuitive for your visitors.
Note that the top bar itself is available in all the pages but the content in the top bar will stay with just the page it is used in because we used global=”false”. Even though the bar may be slightly visible in the editor window for other pages, its height would be set to zero there upon publishing.
For a little advanced users, following is something you can do for multiple top bars (if you are new, you can skip the rest of the article for now):
What if you want one kind of top bar for Blog but a different persistent top bar for regular pages ? You will need to create a new page type to be used for your regular pages because your blog pages are going to use index.html as its base. You can not change the blog base. However, you have the choice of selecting any page type for your regular pages. So, create a new page type, say non-blog-top-bar.html, and copy all the content from index.html into the new page created. As usual, define a new style for new top bar in main-style.css. Then update your non-blog-top-bar page to include this second top bar without global=”false”. Now, apply the new page type for your regular pages. This will get you one kind of top bar for Blog pages and a different one for your regular pages.
Raju,
You are WONDERFUL. I have wanted to place a AdSense ad above the blog module for 6 plus months now.
Using your step 2 above, I adjusted it slightly.
For the design I use, I added your
{topbar:content global=”false”}
right above the following line (line 25 for me)
I saved that. Then I could drop any element in, which is right below my page navigation buttons. I did add a separator line first, and then a html element to drop in the AdSense code.
Again, thanks for this great posting.
Ken
I left out a line above, where it says…
div id=”content-main”
right above the following line (line 25 for me)
I had the pure text commenting setup. Will check it. That should stop the html interpretation.
I made this for a header after you posted the flexi-footer post, but this is still a good post.
awesome! Another great post! I’ve even used it on my website already! This will be an easy way to get slide shows as a header feature!
I’m afraid I don’t see where this top bar is. I see a banner where text and/or an image can be added, but it doesn’t seem to allow me to drag anything onto it and I don’t see any other options for making a top bar
This does not come in built with the weebly templates. It is some thing you need to add through the CSS and Index files (if you are comfortable editing them)
please teach us on how to install the jQuery Plugin sliding image. thanks.
Tutorial coming up early next week. Stay tuned.
Does the keyword used in the banner help in SEO and Google ranking ?
If its text, it will help. But if you are using it as part of header image and including text via ImagePerfect image editor, then the text becomes part of image and does not help as much as the direct text does.
Thank you Raju,
Is there a way to have my logo in the banner but use text ?
Hi Raju,
i had created a new top bar and a new page.
This new page is a short-header type.
I see the top bar when i drag an element, but i can’t drop it in the topbar2.
Any suggestion?
Thanks in advance and many compliments.
You mean you added two top bars and only one of them is working for you ? It works fine for me. I used multiple flexible content areas on same page.
If you want the ads just below the blog content, or between the header and the content, you can also simply paste the Google AdSense code in index.html code.
Click on DESIGN tab on the top, which will then show small link on the upper right side EDIT HTML/CSS, click on that link. Then, click on INDEX.HTML on the right side to open Index file. Place code just before tag if you want it on the bottom, just before CONTENT section if you want it to appear on top etc.
See my page at http://www.RiskyStartup.com for example.
This was exactly what I needed to know. Cheers! Got it running on my site now too – http://www.fontpanda.com.
How can I use this to edit the basic logo that comes with most of the themes and make a horizontal nav bar that is the same on all of the pages? That is, I want to have a menu on the top as well as a menu on the side. See example (not sure this site was made on Weebly) at PrintablePress.com or DownloadandPrint.com.
Hi! I would love to do this! And I can’t seem to find the index.html. All I have are tall-header.html, short-header.html, no-header html and landing. html. Is there another place I should be looking or do I have to make an index.html? I’m new to this but totally up for learning all I can and I would love to be able to have more flexibility in the top bar.
Previously, index.html was the only page type. Now there are four page types. Pick any of the page types you want to edit and follow the same instructions. Usually, tall-header.html or no-header.html would be the ones that are close to your previous index.html.
How do i add a clickable image beside the logo? example in omfactorynyc.com… i want to add the clickable “FASHION DISTRICT” beside my weebly website right beside where the logo is. Please help thanks!
You need to add it to the header section of the page type. You may also have to set appropriate ‘float’ in css for that div. Each theme is different. Unless you know how to edit html and css, there is no easy way to add extra elements to the header.
Really helpful but actually Mr. Risky Startups comment was all I needed to ad Adsense code to the top of my no-header pages.
Check it out at http://www.fontpanda.com.
Cheers!
Hi! I would love to do this! And I’m new to this but totally up for learning all I can and I would love to be able to have more flexibility in the top bar. but i can see a very small pic 940px X 223px , and i still can see the edit button 4 the header image~ Please help how to fix the topbar?
Hi Raju!
Where to place the css codes in main-style.css and I would gadly appreciate of your answer.
Thanks,
marc
You can place the css code any where. If you are not sure, just paste it all the way at the end.
Hi Raju,
Thank you for this awesome post. I have also used your flexi footer concept on my site very successfully. As a matter of fact I am using 2 custom footers and works like a charm.
No I am trying to implement the drag and drop header , but unfortunately I only appears on the home page.
I would like this second header to appear on all pages.
I have made some changes though , I have added {topbar:content global=”false”} on top of
<
div id=”topnav”> {menu}, as the drop down menus are very long and would thus obscure the drag and drop header.
Could I please request you to let me know where I went wron or what I could do to make this header appear on all pages.
I am trying to implement this on http://sasfor.com
Thank you in advance
vivi
global=false will make the content visible only on that page. Other pages will not show it. Remove it if you would like the content to be shown on other pages. The other aspect is: if you are using more than one page layout, each of the page layouts should implement the topbar.
Hello and thank you for the awesome content! So I have worked in Weebly for quite some time, but am now just starting to learn more CSS and HTML and I am beginning to play with this.
I created a Call to action in pixlr that is 900×65 (as my header is also 900) and I typed in my call to action. I simply want to create the top bar space to plop this call to action in (as an image I guess).
I added the CSS code the you instructed in step one (without all the font and color specs as I am importing image…I hope this is ok). I did import the image into my CSS files. Now I need to do step two and edit the index.html. How do I access this?
Thank you!
index.html has since been changed to four different page layouts. Thanks for letting me know. I will update this post to reflect the new changes.
This post is now updated with new page layouts.
Wonderful post: I used your tutorial to have my google adsense running on top of my website header: http://www.pngfacts.com
I used flexheader code instead of the topbar css code.
thanks for sharing.
I was able to complete the steps but when I add content to my top bar the content goes all the way to the right an it isn’t aligned with the rest of my site. How do I fix this?
I’m new to the forum and I am grateful for this group. Great stuff in here!
But I need to know is it possible to place adsense code directly underneath your blog title?
Please make a video for this.
Hi Raju,
Thanks for the great tip,
I was wondering if it would be possible to place a horizontal bar, just like the top bar and flexible footer, but in the content area, So you can also drag and drop elements there. Just like making colored boxes only with the option of dragging elements into it, therefore making it easy to put links and pics etc.
Thank you very much in advance
Greetings, Nick.
You can add it any where. To Add it in the content area, you basically split the area into regions. Flexible footer is added after content. You can add a similar thing above the content area. You can add two such areas as well. But choose appropriate styles and global settings.
top bar works for me, but only on my home page, not the others. if i remov the global:”false” attribute, it does not even work on my home page. why would that be? flexifooter works ok. i’m using all the same landing pages.
ziga
Can you please post the details of your site in the forums ? It should work smooth if you are using the same page layout. I hope you did not change the name of the content area. Post it in forums and we will take from there.
where do i put the:
topbar{
background: url(topbar-bg.jpg);
}
AND THEN:
topbar p{
color: red;
font-size: 21px;
font-family: “Georgia”;
font-style: italic;
}
in the main css style sheet – inside the heade or specific location inside the body for the main css page as well as the desired index (no header) page?
Can someone please assist me via email through these steps. I understand everything but the uploading back ground image
I would like to add a call to action on top of my website above the slideshow header. If I do these steps above will I accomplish that or where will it show up? I am not familiar with css coding at all (totally clueless) so any help I can get from you would be great.