Another Free Dolphin 7.1 Template

Here's another one of my totally worthless contributions to society.  Sorry.. no demo, because I must keep my active sites confidential for now. No screen shots either, but why ruin the surprise.

I'm sure there will be a ton of questions on this, as I doubt you have seen anything quite like it before.  Please note that the zip file has the word 'beta' in it.  Don't worry... it won't make your site disappear into a black hole.  I just put this out early so that perhaps a few brave souls will check it out and report any oversights, ugliness, or bugs.

You are free to modify this in any manner you choose, and you are free to screw it up to your hearts content.  What you are not free to do, it sell it, or any derivative thereof to others.

I'd write more about it now, but I have to take a break and go to my Krav Maga class, and learn how to inflict extreme pain on would be assailants.

P.S.  Just unzip and upload the contents of the zip file to your sites root, then add ?skin=NeonGreen to the end of your sites url.

A VERY IMPORTANT NOTE: It is necessary that the 'icon' field be blank for top menu items in admin > Builders > Navigation Menu.   That's just the way it is, but that field entry is useless anyway.

There is nothing like freebies from HL, thank you good sir!

Forgive me for hijacking, but how close are you to completing the awesome drop down menu's that you were working on a while back? If Im not mistaken, I think you were working on the 2 column drop down menu?  Just thought I'd ask before those tons of questions starts pouring in.

 Perhaps you should download this template and have a look

OK... some additional notes on this template.  The first thing you will notice, is that the drop down menus are a bit different.  You will see strings like the examples below on every drop down.

_dropMenu_Content1_People

_dropMenu_Content2_People

_Bot_Left_People

These are language keys that you will need to enter to display extra content on each drop down.  Every menu drop down will have different language keys, so that the content can be customized for each top  menu item.  The divs that contain the language key _dropMenu_Content2_***** are the properly sized to embed an HD video, if desired.  Most basic html code can be added as a language string to add content.   No language keys or their associated strings are provided or installed by this template.  That is something you will have to do yourself.  I can't do it for you, because I don't know what kind of content you want to add.  I would suggest either tutorial videos pertinent to each top menu item, and a mix of text, photos and videos.  Use your imagination.  This template just gives you the tools to work with.... the rest is up to you.  Content rich drop down menus can be a useful aid in teaching new members how to use your site.

Here's a sample for the language key: _dropMenu_Content2_Videos

String:

<iframe src="http://player.vimeo.com/video/24656766?badge=0" width="100%" height="241" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Please note the width and height used in the embed code.  This will embed a video in  the drop down menu for the top menu item 'Videos'. Entering all these strings and deciding on what content to show, will require a bit of work on your part, but it could be a big help to your users.

Perhaps someone here will be kind enough to install this menu and provide a demo.  I simply can't do it, for reasons I've already mentioned. 

Wow!!!

http://mynewbeetle.net/?preview=1&skin=NeonGreen

That helps.  I see I have some work to do... that's why I called it a Beta.   I have not found a way around it, but if you don't delete the entry for 'icon' in nav menu builder for any top menu items that have an entry in this field, the top menu text won't appear for that item.  I don't think the icon is used anywhere... but I could be wrong.  Also, top menu items should have at least one sub item, else there is no drop down.  If you want a drop down for top menu items like this, just add a sub item and give it the same url as the top menu item.

 I've got it all figured out, HL this is fantastic! 

I did see in the Navigation menu some link "words" were missing e.g. "video" link.

I went to nav menu and there were words like "table" for the "picture" or "icons" once I remove the words all the text came back to the menu, I guess you have icons for menu links.

Great work!

Another little feature I have planned, is some sort of jquery method to toggle the drop menus on or off with an out of the way button.  Inexperienced user may appreciate all the content on the menus, but others may find that the big menu just gets in the way. 

Damn Newt.... you already uglied it all up with an avert on the Ads menu!  I wonder if anyone has ever put ads on a drop down menu before, and what Google would think of it.

Very nice. If I was building a gaming site, this would work well....

BTW.... If you're not viewing this template with Firefox, you won't see all the elements properly.  POS IE always has to be different.  Chrome seems promising.

Houston, I actually downloaded it first, then tried to apply to my local copy, only to find out that it is not working any more, for whatever reason.  Then I came back to the forum to post my question.  I know I'm a newbie, but I do try :)

Again, thanks a ton my friend!!

 LOL, I was experimenting... 

I did find putting those google ads there, they stopped showing on the actual page, the drop down ads made me go over my three types of ads per page.

I removed most last night/morning before bed.

You post the thing so late and I could not go to bed until I experimented..

There are endless capabilities with what you have created.

Today is clean up day to what you created, I'm sticking with it!

first thing I noticed wasnt the google ads... it was the universal login! I like! Where is it?

how easy would it be to incorporate just the 'menu' into normal 7.1 template with normal colours etc ?

The menu feature itself is pretty awesome!

background-image:      -o-linear-gradient(left, rgba(129,237,00,.5), rgba(129,237,00,.75), rgba(129,237,00,0));

 RE:

 You can give it a try.  Make a copy of your existing template, and replace the scripts/BxTmplMenu,php file with the one from this template.  Then replace css/top_menu.css with the one from this menu.   Then get to work changing all the colors in top_menu.css    Probably deleting all the text-shadow & box-shadow stuff would be a good start.  It will take some time, buy you certainly can do it..

 RE:

 Is there a question?

 No question, just saw this in the css.

 RE:

 I haven't decided what to do with IE for that particular gradient... it might have to be an actual image.  Every template design is a two step process:

1. Design template for all modern browsers.
2. Design it all over again for IE.

Talking about making a site POP!

http://tabethajadeashley.com/

 will let you all know how it goes!

 I have to say well done, this gives it quite a flair :-)

 RE:

 I see you took that screen shot with IE.  This template is not yet fully functional with IE versions <10.  To see what it's supposed to look like, view the site in FF or Chrome.

*** Don't use too much text for that bottom left language key... it's just there to fill in some blank space where available

 Yes I did..

took me a few minutes but I do see the difference but it is not much to me!

Another thing to note, is that each of the container divs for the language strings, have their own unique css class assigned.  Therefore, the styling can be different for each div of each top menu drop down.  You can inspect the drop down with firebug to find the class names.  For Example, the 'About' drop down.... add the css below to the end of top_menu.css and watch what happens.  (You can also just do this in firebug)

.bottomLeftAbout {
color:#7900ff !important;
}

/* targets images within the div */

.SubMenuMiddleCol_About img {

border:5px solid #ffffff !important;

}

.SubMenuRightCol_About {

color:#ff0079 !important;

}

Note the part of the class name that corresponds to the top menu item, that is highlighted in red.  The class names for the other drop downs will follow this same convention.

 It's amazing what you can get for free! 

Very generous of HL to say the least!!

 People, HL meant totally useful & priceless!! 

Hold the mouse over the drop down menu and use your mouse wheel to scroll the page.  Not a biggie of course.

UPDATE:

Some css fixes. Better support for IE <10, but not perfect.

Please report any problems, or elements that don't look quite right, such as bright white backgrounds, ugliness, etc.  If you are updating from the Beta1 version, you only have to re-upload the css folder... nothing else has changed.  New zip file is attached.

 Thanks

An interesting menu system; thanks for sharing.  One can not move the menu bar to the bottom of the header; if you scroll the page and move the menu up the page, the "drop-down" division is in the wrong place; since it is fixed positioned.  You can see this with the menu at the top if you scroll your page up a bit but leave enough of the menu to be able to select it, you will see the "drop-down" division is too far down the page; and may not be able to enter it as you move off the menu.  Not that much of a problem with a top menu since users will probably scroll all the way back to the top; however, it does mean you can not have the menu at the bottom of the header.

As for using this menu system, can it be used on commercial sites?

The dolphin splash shows the photo but not my FaceBook connect button

pinoystudents.net

 RE

 You are free to fix the css to suit your needs.

 RE:

 Look for this code in common.css around line 1337 and comment it out as shown below, or just delete it.

/*

.bx-splash-txt {
display:none;
}

.bx-splash-txt-bg {
display:none;
}

*/

OOPS

I missed this in top_menu.css around line 221... in case you can't wait for the next release.

Change This

table.topMenu ul.sub a.more_top_element.active,
table.topMenu ul.sub a.more_ntop_element.active {
    color: #333;
    font-weight: bold;
}

To This:

table.topMenu ul.sub a.more_top_element.active,
table.topMenu ul.sub a.more_ntop_element.active {
    color: #81eb00;
    font-weight: bold;
}

Thanks Houston :-)

Two for the price of one. 

The attached zip contains the original wide menu version, plus a version with more standard menus.  Each version contains a popup menu switcher accessed by clicking on 'Mode' in the upper left corner of the page.  This is pretty close to finished. I have cleared all the issues I was aware of, but report any problems

 There is an issue with the menu :-) I have attached the screen shots. At the novice mode. 

I thought I had a solution but it only worked in FireFox; so not a solution.  I see why you went with position fixed.  The division shifts around because it is contained in the column of the table for the menu; the normal tricks don't work; most likely because of the parent container. I am thinking the solution will lie in javascript although I might return to playing with the css when I am not so busy.

 RE:

 Let me see if I can figure out what your issue is, if all you do is tell me.   If it has to do with the missing text for the top menu items, I've already explained that, and what you have to do to correct it.  But I know that must not be it, since I called attention to it in the very first post with great big bold letters.

Thanks HL Great menu :O)

How can this be rectified sub menu in forum

It pushes the temple off the screen ..

Many thanks again

Happy thoughts

 RE:

You'd have to show me a url.  I don't have any such problems with my installation

 Nor do I.

Its not on a production site its on my box its ok.

sorry to have trouble you HL.... my pages are all in percent viewing it was a fixed width issue

which I have found ...

I do have one question for anyone that might know the answer in the language keys I made _Bot_Left_Search key {0} is not showing the site name and if I place a link <a href="{1}">{1}</a> the active link is there but only black space no text is showing ...

this is in language _PRIVACY and works but not in the menu

This Privacy Policy governs the manner in which {0} collects, uses, maintains and discloses information collected from users (each, a "User") of the <a href="{1}">{1}</a> website ("Site"). This privacy policy applies to the Site and all products and services offered by {0}.<br><br>

have a good weekend

Houston, great template.  Thanks for sharing!  Just one question:

in the /*--- Login/Join ---*/ section of top_menu.css how can I add a fb connect button in front of the standard Login button.  As in what code would I need to add to add my image url and link it to the module?

I had one previously in templates/base/login_join.html..  Tried to add the same code in the above section, but nothing shows.  Help is appreciated

 RE

 I'm afraid dynamic language keys for the top menu are not parsed in the same manner as language keys for other places, so anything enclosed in curly brackets won't be evaluated.  There may be a way to do this, but it's beyond what can be done with a template.

 RE:

 Can you post the previous code you had in login_join.html

I had this in line 2

<div style="background-image:none;background-image: url(/templates/base/images/icons/fb1.png);width:75px;height:40px;float:left;margin-right:2px;cursor:pointer;" onclick="window.open ('<bx_url_root />modules/?r=facebook_connect/login_form','_self');"></div>