Free Dolphin 7.1.4 Template: Ivory II

Nothing fancy... just a clean, uncluttered look with a different twist on the top menu, and a different style of sub menus.

If you have a problem or malfunction with this template, you are free to post it here.  If you want to ask a bunch of questions like "how do I change this" or "how do I change that", be careful not to annoy me.... I really hate spoon feeding people.  Simple css changes are something every website admin should know how to do.

This template will eventually have a mobile counterpart, but I have removed that for now.  The problem with the mobile template was with the home page outline.  The outline uses some css that is dynamically calculated using javascript that cannot be overridden with a template change.  I asked to have that js moved to the wall modules  template files, so that it can be overridden with a template change.  This will allow the mobile template to display the outline properly on mobile devices. The mobile template will also use jQuery Mobile to create a better UI. The mobile template will be completes once D 7.1.5 is released with the aforementioned js moved to template files.

 SO.... don't bitch about this template on mobile devices.  It's free.... you get what you pay for.

DEMO: http://houstonlively.com/join.php?skin=ivoryII

Download is attached

UPDATED 8/4/2015

thanks

New attachment.  Stupid fckn editing time limit should be removed from this forum

BTW: if you are outside the US, you  won't be able to access the demo.

Very Nice!!!!! Simple but effective. Looking forward to the mobile side, Thanks HL

I like it and the price matches my budget, which is $0.

 Ok I am in Thailand, how about a picture or three... many thanks!

Thank you Dr. HoustonLively.

I love this template so much. I will try and let you take look at my site, to see how beautiful it is, after I'm done migrating.

It's working like a charm, I thought there was an error but I uploaded the whole thing, I should just choose the folder in side the folder to upload.

Problem.

Once you switch to Ivory you cannot switch back and/or any other template.

I tried Chrome and Firefox both, looks like the Javascript is not working correctly.

 RE

 I love the simplicity for sites like this, a non member site.

http://floridabeachwebcams.com/

 Add this to the end of your url:

/?skin=uni

this will get you back to uni then you can pick your template from there. 

also make sure allow users to change template is enabled in the admin area....

Looks really nice, will give it a try!

This more than makes up for the Houston Texans beating the Denver Broncos this weekend ;-) ... nah!

Thanks for the freebie HL.

Now, about its mobile counter part...I do not use the outline on the homepage (or any page), so Im guessing the outline js should not be an issue for me at all.  Im also willing to remove that js to the walls module template files if need be just to be on the safe side (and not have to wait until 7.1.5 is released, whenever that may be)

With that being said, would you be willing to reconsider releasing its "mobile counterpart" for those of us who wont be affected by the outline js?

 RE:

 No

 RE:

 Thanks for the report.  I'll have a look

Thanks Houston, looks good.

@luclonely, and anyone else that must use the template switcher.

For some reason unknown to me at the moment, the template switch popup stops working when the bottom links are placed in the main menu popup.  Until I have a better solution, remove '__bottom_links__' from navigation_menu.html   ...or just replace the file with the attached version.  The existing css for the template switcher popup is a little off, so you should replace general.css with the attached version

I forgot to mention that you'll need to add a language string for the key: _mainNavMenuUlTop

I used 'Main Menu'

You may also need to add icons for the menu buttons  Look at icons.css to see how to do this,  Visit http://fortawesome.github.io/Font-Awesome/icons/  to get the unicode for the icon you want to use.  The icon classes are derived from the top menu text string as you can see below.  If you use a language other than English, you'll have to modify ALL of the existing css.  I know it's a pain in the ass, but I just don't see any  way around it.

EX:

.sys-icon.tm_Home:before {
    content: "\f015";
    color:#ffffff;
    font-size: 1.5em;
    height: 24px;
    padding: 8px 12px 8px 16px;
    width: 24px;
}

.sys-icon.tm_People:before {
    content: "\f0c0";
    color:#ffffff;
    font-size: 1.5em;
    height: 24px;
    padding: 8px 12px 8px 16px;
    width: 24px;
}

.sys-icon.tm_Search:before {
    content: "\f002";
    color:#ffffff;
    font-size: 1.5em;
    height: 24px;
    padding: 8px 12px 8px 16px;
    width: 24px;
}

 http://www.uswebproxy.com/browse.php?u=Oi8vaG91c3RvbmxpdmVseS5jb20vZm9ydW0v&b=13

or use any US proxy..

 RE

 From now on, Peyton Manning shall be known as 'Taunto'.

 Damn

 waiting for 7.1.5.... ..

 RE

 Finally, I was entering all kinds of stuff, capitalization is important on this one.

Thanks

 You should add this to the templates general.css  @ line 144 

Are you sure they are going to do that for you? I could not find a ticket on it.

 RE:

 I'm never sure whether or not Boonex will do something, but the ticket is here:

http://www.boonex.com/trac/dolphin/ticket/3407    It references this topic.  I don't know why they wouldn't do something so simple, that would allow changing the outline via templates without having to alter the core source files.

 RE

 Yes the color of the fonts; the white background box showed up and I couldn't figure it out.

I just applied the change and will clear the cache.

Your site has this css coming from somewhere.  It looks like it's hard coded somewhere.  It's overriding the template css.

body{background: url("")  ;background-attachment:; background-color:#;}

.page_block_container{filter:alpha(opacity=99); -moz-opacity:0.990; -khtml-opacity: 0.990; opacity: 0.990;}

div.sys_top_menu{filter:alpha(opacity=990); -moz-opacity:0.990; -khtml-opacity: 0.990; opacity: 0.990;} 

div.sys_main_logo {background: rgba(255, 255, 255, 0.99)}

.page_block_container {background-color:#fff;background: rgba(255, 255, 255, 0.99)}

div.dbContent{background-color:#fff;background: rgba(255, 255, 255, 0.99)}

 RE

 Ah, something I had totally forgot about.

http://www.boonex.com/forums/topic/Background-Image-how-to-.htm

I did that long ago for the UNI,ALT templates..

On my phone all the boxes have a colored background; do you see that?

[edit] I cannot trace that down!

Thanks HL, I did find it and removed.

 RE

 It's still there.  You have this code in your header:

<style>body{background: url("") ;background-attachment:; background-color:#;} .page_block_container{filter:alpha(opacity=99); -moz-opacity:0.990; -khtml-opacity: 0.990; opacity: 0.990;} div.sys_top_menu{filter:alpha(opacity=990); -moz-opacity:0.990; -khtml-opacity: 0.990; opacity: 0.990;} div.sys_main_logo {background: rgba(255, 255, 255, 0.99)} .page_block_container {background-color:#fff;background: rgba(255, 255, 255, 0.99)} div.dbContent{background-color:#fff;background: rgba(255, 255, 255, 0.99)} </style>

None of your _header.html files have that code, so I can only conclude that you are using a head injection somewhere.

Is there a way to fix my menu spacing?  I am not using all of the modules that boonex uses and right now I have spaces between my menu items.

www.sybersingles.com

Thanks for your help

 RE:

 It looks like I missed some css for some of the menu items.  I'll fix those in the next few days.

nice but where is the link to download it?

 RE

 About the third post in this topic.

Any news yet on the modifications?  I would like to complete my site this weekend if possible.  

Thanks

 RE

 Give this version a try. Clear cache after replacing files.  If you have any non-working menu items that are visible to members only, you'll have to let me know what they are.

Note to self:  The attached version adds a Font Awesome icon to the 'Help' menu button. Bottom menu items were removed from main nave menu because it breaks the template switcher.

Don't forget to add a language string for the key: _mainNavMenuUlTop

 Thanks!  it worked. 

UPDATE: 10-21-2014

Added main menu button css for groups, articles, boards, and chat  in icons.css

Upgraded Font Awesome to version 4.2

Download with above changes is attached

To update an existing installation, all you need to do is re-upload the templates css/icons.css file and the entire /fonts folder. Overwrite all existing files in the /fonts folder... this necessarily updates Font Awesome to 4.2

Demo: http://houstonlively.com/index.php?skin=ivoryII

I should note that this template is intended to display all main menu items at once, and no provisions are made for dealing with the 'More' menu.  If you are using a template that requires the use of a 'More' menu and want to switch between the two, this may not be a suitable template for you.

This template will eventually incorporate a switcher to a completely different mobile template, but that development is at a standstill, awaiting some necessary changes currently assigned to the 7.1.5 milestone.  If that milestone is completed while I am still young enough to remember my own name, the two templates will work together to provide my idea of a mobile friendly site.  At that point, perhaps other color variants of this template will appear.

Because I did not include icon css for some main menu items, it brought to light that I need to post some instructions to add your own button icon css for custom pages or third party modules that you may be using.   I cannot possibly include css for all the third party modules out there, so if you are using this template, you need to learn to do this yourself, Below is an example of how the icons are added to the main menu buttons, and how those individual buttons are targeted.

.sys-icon.tm_Chat:before {
    content: "\f086";
    color:#ffffff;
    font-size: 1.5em;
    height: 24px;
    padding: 8px 12px 8px 16px;
    width: 24px;
}

.sys-icon.tm_Groups:before {
    content: "\f0c0";
    color:#ffffff;
    font-size: 1.5em;
    height: 24px;
    padding: 8px 12px 8px 16px;
    width: 24px;
}

.sys-icon.tm_Boards:before {
    content: "\f040";
    color:#ffffff;
    font-size: 1.5em;
    height: 24px;
    padding: 8px 12px 8px 16px;
    width: 24px;
}

First note all the text highlighted in red.  This part of the css selector is derived from the top menu item text, and it IS  case sensitive.  Typically, all boonex modules are one word with the first letter capitalized.  This text appears in all caps on the buttons themselves because it is forced to all caps through the button's css.  The text in red MUST match the name and case of the top menu item.  If you use this template for a different language, you must add css for all the buttons in every language that you use. It's a bit of work, but that's the way it is.

Next, look at all the text highlighted in blue.  THis is the unicode number that selects which Font Awesome icon to use on the menu button.  You can use any of the Font Awesome icons on any button.  The complete list is shown here: http://fortawesome.github.io/Font-Awesome/icons/

To get the unicode number for any of those icons, click on any  of the icons in the list, and it will take you to the individual icon page where the unicode number is shown,  For example, the unicode number for a bicycle is f206.  So, if you had a custom page with a menu name 'Cycling', your button css might look like this:

.sys-icon.tm_Cycling:before {
    content: "\f206";
    color:#ffffff;
    font-size: 1.5em;
    height: 24px;
    padding: 8px 12px 8px 16px;
    width: 24px;
}

If you are using this template, and have any menu items that do not have an icon assigned as outlined above, it is important that you add it. Otherwise the layout of the popup menu with be disrupted, 

Finally, note the text highlighted in green above.  All menu buttons have the icon color set to white, except for the close button which is red.  The individual icon colors however, can be any color you choose, although some colors may look like black to visually impaired.

Anyone have a demo site available on the public Internet... the demo link in HL's posts do not open for me (in Canada)... I keep getting a Forbidden Access message.

 RE

 Try it again, I added CA to the allowed countries.

would i be possible to get access for Austria (AT)???

Thanks!

 RE

 I'm still using it.

http://floridabeachwebcams.com/

very good template ..is it possible to put menu items on left side like this website.. https://www.udemy.com/courses/

menu items only appear when u click on icon on top left..and whole page squeeze to right.

[insert images left as attachments instead]

You could have just posted a link instead of cluttering up my template topic with a huge screen shot that has nothing to do with this template.

In answer to your question, this template is provided as-is.  You are free to change it any way you like.

 RE:

 Thanks

Note to others: Please refrain from posting screen shots of unrelated stuff.  Unrelated stuff, is anything that ISN'T a screen shot of this template.  If you want to reference something, an attachment is enough.. do not insert it into your post.

chill bro..i was just saying..

 Sorry... I don't chill. You can say it without posting big ugly screen shots that detract from the helpfulness and clarity of this topic.... just saying