Drupal 7 Toolbar and CiviCRM navigation bar - aesthetics question

[chiebert]

Has anyone out there given any thought to making the CiviCRM navigation bar and the various Drupal admin menu/D7 Toolbar solutions work together? I mean, they don't conflict - the Civi navigator just overlays the others until you navigate out of the Civi section of the site. But has anyone tried to keep them both in play, when necessary, or else determined that that approach isn't useful after all?

[TwoMice]

Haven't tried this with D7 yet, but in D6  I actually like having the Drupal admin menu visible all the time, instead of being overlayed by Civi menu bar on Civi pages. I haven't really come to appreciate the idea of toggling the Civi bar off and on, especially considering their similar appearance in the eyes of new users, who seem to notice that "that black bar doesn't have the right stuff on it" but can't understand why.

So I normally bump the Drupal admin menu down by 23px to make it appear directly below the CiviCRM menu.  This CSS in the theme does the trick in D6:

body.page-civicrm div#admin-menu {
  border-top:1px solid #555555;
  top:23px;
}

As I said, I have not tried this with D7, but something like this should work.

- TM

[vid]

I was just working on this yesterday and may have a d7 solution.
I added these styles to the sites/all/modules/civicrm/css/extras.css file:

.toolbar #civicrm-menu {
  height: 32px;
  line-height: 27px;
  margin-top: 0px;
  min-width:100%;
  padding-left:8em;
  position:relative;
}
/*css3*/
.toolbar #civicrm-menu {
  -moz-box-shadow: 0 0 8px #1B1B1B;
  -webkit-box-shadow: 0 0 8px #1B1B1B;
  box-shadow: 0 0 8px #1B1B1B;
}
.toolbar #civicrm-menu:before {
  content:'CiviCRM Menu: ';
  left:1em;
  position:absolute;
}

We're using the Seven theme with the Toolbar module enabled.
You'll notice above that the #civicrm-menu div is only acted on if the class .toolbar exists. So if you don't have the toolbar module enabled it shouldn't affect your styles.

The second set of declarations (/*css3*/ .toolbar #civicrm-menu) are just fluff (but I like that shadow) and were separated from the first for compatibility. Since box-shadow is CSS3 older browsers may consider these an error and stop processing styles for that div after the 'error'.

The 3rd set of declarations (.toolbar #civicrm-menu:before) prepends the menu with the text: "CiviCRM Menu: " so the user knows why there are multiple menus.

I've attached two screenshots to demonstrate how it looks with and with out the shortcuts menu open.

So far I've tested it on Mac in FF4, Opera 10, Safari 5 and Chrome 10.

[Ed van Leeuwen]

For Drupal 7 and 'Administration menu Toolbar style' enabled (part of Administration menu module), I made minor adjustments to vid's post and have the following added to sites/all/modules/civicrm/css/extras.css:

Code: [Select]

#civicrm-menu {
  height: 32px;
  line-height: 27px;
  margin-top: 0px;
  min-width:100%;
  padding-left:8em;
  position:relative;
}
/*css3*/
#civicrm-menu {
  -moz-box-shadow: 0 0 8px #1B1B1B;
  -webkit-box-shadow: 0 0 8px #1B1B1B;
  box-shadow: 0 0 8px #1B1B1B;
}
#civicrm-menu:before {
  content:'CiviCRM Menu: ';
  left:1em;
  position:absolute;
}
#civicrm-menu {
  z-index: 990;
}
I have left out .toolbar as it is not available in the Administration menu and I have added a z-index to prevent the dropdown menu items being displayed beneath the CiviCRM menu.

[pike67]

I did a few additional tweaks, for drupal 'seven', and the admin_menu module. See attachment for results. Most notably, the civicrm menu doesnt span the whole 100% - it reveals the drupal menu on the left and right hand. Therefore, the home icon stays at the left hand, and there is a switch between drupal / civicrm next to it, which stays both in drupal and in civi. The search bar is on the right hand side. At the outer right, there are the drupal 'login' items and the shortcuts foldout showing through.

 It does require tweaking your menus on both sides of the installation.

Code: [Select]

html body.page-civicrm.admin-menu { margin-top:0!important; }
html body.page-civicrm #branding { border-top:30px solid black; }
#civicrm-menu {
height: 30px; left:50px; right:200px; width:auto;
}
li.menumain { padding 3px 10px; }
#civicrm-menu li.menu-separator { margin:0;}
#civicrm-menu .crm-Drupal {}
#civicrm-menu .crm-CiviCRM a { background-color: #999; padding: 0 15px; border-radius: 15px; }
#civicrm-menu #menu-logout { display:none; }
#civicrm-menu li#crm-qsearch {
float:right; margin-right:2em;
margin-top:5px; border-right:0;
}
#civicrm-menu #crm-qsearch input {
width:178px!important;
}
.ac_results { z-index:999999; } /* seriously .. */

/*
i'm hiding the 'home' item because it is
ridiculous. added 'civicrm' and 'drupal' items myself
note, you cant (shouldnt) delete the home menu item,
it will break the menu.

*/
ul#civicrm-menu li.crm-link-home {
display:none;
}

[poster_boy]

Having an issue similar to what the Original Poster raises - except that for me - there is a conflict between the CiviCRM nav bar and the Drupal.

As you can see from the attached screen grab the two menu bars are appearing in the same place - making it possible to select things from the Drupal menu which appears behind the CiviCRM menu. (the mouse pointer didn't appear in the screen grab - but you can see it is selecting an item from the lower Drupal menu rather than the upper CiviCRM one).

If you know about this, you can correct yourself. However, I want to open up the use of the database to more users - and it would be nice to iron out this glitch before introducing them to a new system.

From the above replies it seems that one way to sort this out is by changing drupals css.

Is this the only way - or is there something a bit easier?

And if I have to go the css route (And as I'm new to drupal) I don't know which drupal file to copy the css code to. Can this be accessed by the drupal administration menu - or will I have to use FTP?

Thanks

[pike67]

Sorry if my post was unclear. The css is added (not changed) in a file called

Code: [Select]

[your_drupal_installation]/sites/all/modules/civicrm/css/extras.css
Yes, you will need a ftp client or similar to download/edit/upload that file.

To avoid the problem you're having, it may be good enough to increase civicrm's menu height. You don't need all the fancy I built in.

*-pike

[pike67]

I find it surprising this has still not been addressed in the core. Apparently, people are not too concerned about this. In my opinion, I cant even sell a drupal/civicrm combi to a client because the navigation is, I would say, broken. I would spent more time explaining it than it takes to fix it.

This is my problem: within drupal, you have a menu that contains a link 'civicrm'. That link replaces the  menu with a different menu. The new menu contains a dropdown called 'home', where the second option is to replace the active menu with the original menu. Well .. thats ..

I will post another solution after this post.

*-pike

[pike67]

So I did this again, now for drupal 7.31 with adminimal and th adminimal menu, and civi 4.4.6.

Code: [Select]

/*
civicrm menu tweak for
adminimal, adminimal-menu
and drupal 7.31

for optimal results, disable the
drupal overlay module.

pike*201408

*/

/*
hilite the drupal civicrm menu item
while civi is active.
*/
body.page-civicrm #admin-menu li.civicrm a {
background-color: #0074bd;
color: #fff;
padding-bottom: 1em;
margin-bottom: -1em;
}

body.page-civicrm.adminimal-menu div#admin-menu {
border-bottom:1px solid #0074bd;
}

/*
shift the civi menu down below the drupal menu
*/
#civicrm-menu {
top: 29px!important;
background: #0074bd repeat-x; /* #4d8f46 */
z-index:50;
}

/*
hide the logout button, drupal has that
*/
#civicrm-menu #menu-logout {
display:none;
}

/*
hide the home menu dropdown. instead,
create a custom 'dashboard' menu item
*/
#civicrm-menu li.menumain.crm-link-home {
display:none;
}
#civicrm-menu li#crm-qsearch.menumain.crm-link-home {
display:list-item;
}

/* improve the search bar and print icon */
#civicrm-menu #crm-qsearch input {
font-size: 1.1em;
margin-top: 2px;
}

#crm-container div#printer-friendly {
margin-top:-4em;
}

In civi 4.4.6, add this to a (new) file, eg sites/all/modules/civicrm/css/drupal-override.css, and specifiy that file as 'extra' css using the adminintration menu / resource urls (civicrm/admin/setting/url)

[petednz]

nice - thanks for posting this.

oddly, i find it quite useful when explaining to clients, to say
"if you see civicrm at the far right of the admin menu, then you are on the drupal side, and if you don't then you are on the civi side" - which does seem to help them get their heads around when they are in one system or the other

but i will give this a try out and see what the response is like

[Michael McAndrew]

Hey there,

This is really nice - I wonder if we could include it in the standard civicrm install (maybe as an option?)

I suspect here would be a good place to add an option: https://github.com/civicrm/civicrm-drupal/blob/7.x-master/modules/civicrmtheme/civicrmtheme.module to turn that extra css on or off.

Might be easier than patching it each time - just a thought

[Chris Burgess]

I'm with Pike here (siding against my boss again!), I think I'd rather see the CiviCRM and Drupal menus more integrated, rather than flipping between them. The UX of that is a bit arbitrary - you should be able to predict which menu options are where.

OTOH it may be that CiviCRM's menu structure is complex enough that it can't reasonably sit at the second level.

I do find it hard to predict the structure of CiviCRM menus - eg Contact search under "Find" not "Contacts", classification of settings under Administer is opaque to me (Customize vs System Settings vs other). Even alphabetizing the items in those lists would make it easier to find items IMO. That's another story though.

[petednz]

agree that A-Z ing the menu items would help avoid the 'bouncing eyeball syndrome' as I run my eye up and down to find something

thnking of which, i find that happens a lot on 'Actions" (veering well off topic sorry). E.g. we have (in the case of Groups)

Add Contacts to Group
New Smart Group
Remove Contacts from Group

Would others find it easier if these were 'grouped' and hence 'prefaced' with the feature in question. I think my brain is better tuned to the 'main purpose' eg Activities, Group, Tags than whether it will be Add, Record, Send, Schedule eg

Activities: Record Activity for Contacts

Groups: Add Contacts
Groups: New Smart Group
Groups: Remove Contacts

Mailing: Email Contacts
Mailing: Schedule/Send Bulk Mailing

Tags: add tags
Tags: remove tags

etc??

[joanne]

I agree with you Pete, particularly as I always go looking for "Create New Smart Group", "Create Activity for Contacts" and "Delete Tag"

Perhaps we should split this off as a new topic. 

If others agree, I might even be capable of providing the PR.

[Chris Burgess]

As part of its UI Standards, Drupal is explicit in how admin menus are structured. IMO the right approach would be to
define the structure first, then rearrange to suit - rather than doing an ad-hoc cleanup which might then get back into disarray over time.

---

Pete - we worked with an organisation recently that ran testers through a review.

"Your task is to _______. Under which top-level menu would you look first?"

And so forth. It's only using one piece of information (user expectation) but it might help understand what peoples expectations are. (Note that familiar users and new users are different target groups. For adoption CiviCRM needs to consider especially new users, even though familiar users will likely have some objection to any changes proposed.)