Add logo to Menu in Layout

Suite and Optimus Suite 5
#1

Hi,
I added dhtmlxmenu to my dhtmlxlayout, in part because I couldn’t figure out any other way to place links at the top of my layout.

How may I add a logo or an application icon & name in the menubar?
I tried setTopText, but this places text on top right instead of top left where application name goes.

On top right I will need to place Search, Help, Logout (the usual top-right links) instead. Can I place a link directly into the menu, on right?

My menu is using loadXML. I don’t really care which method to use, but when I tried load from html and load from script, they didn’t work for me in both Firefox and IE (maybe I did it wrong). I can probably change methods if there’s a way to add in my application name at the topleft and my links at top right.

If I cannot do these things with Menu, how can I place an empty div (with no sizer bars etc) across the top of my layout so I may write this part myself?

Thanks!

#2

Hi,

there is a possibility to add header and footer:

dhtmlxLayout/samples/02_conf/inc/header_footer.html

In case of menu:

  1. you may align menu right:
    dhtmlxMenu/samples/03_features/04_align.html

  2. menu support links:
    dhtmlxMenu/samples/03_features/06_hrefs.html

#3

I have added a header, so that I may place application icon/name on left, then menu on left, then links on right.

However, I have an issue with CSS. There is, in html output, a div with no class, which places the top of my header 2px from top of browser window. This is the output as seen in Firebug, which I am using to find the CSS classes assigned to each html element.

<div style="position: absolute; top: 2px; left: 0px; width: 1440px; height: 23px;">
	<div id="my_header">

	<table style="width: 100%; padding: 0px; border: 0px none;">
	<tbody>
	<tr>
	<td>My Application Name</td>
	<td>
	<div id="topMenu" class="dir_left dhtmlxMenu_dhx_skyblue_Middle">
		<div dir="ltr" class="align_left">
			<div id="xLgNJGnu2vNofile" class="dhtmlxMenu_dhx_skyblue_TopLevel_Item_Normal">
				<div class="top_level_text">File</div>
			</div>
			<div id="xLgNJGnu2vNoedit" class="dhtmlxMenu_dhx_skyblue_TopLevel_Item_Normal">
				<div class="top_level_text">Edit</div>
			</div>
		</div>
	</div>
	</td>
	</tr>
	</tbody>
	</table>
	
</div>
</div>

2px isn’t so much, but then it adds 2px in other places also, so that my items in page will be pushed down more and more.

I see in the javascript, there are 46 occurrences of “2px” in dhtmlx.js, as well as 11 occurences of font-family. This is not good for me, because I spent hours fixing the CSS files so they do not switch between several fonts throughout application, and to use em values instead of px values for font. I don’t want to touch javascript because my windows editor breaks it, when I add paragraphs into the JS files.

Also, the CSS files do not validate in CSS Validator: validator.w3.org/

I would appreciate very much if you could make it better for me to design in the CSS.

I like the file for the Grid CSS, because each skin is contained in the dhtmlxgrid.css. This is well organized, because I don’t have to search through several files for item. But I would have liked a default skin that is applied if no other skin is applied. This one would be named default (not blue or skyblue), and would have all possible values listed in css file, as just another skin, but named “default”. This would be much clearer, because the default for each component isn’t the same, too, right?

Anyway, how can I get rid of the 2px and the height 23px? Must edit javascript?
Thanks so much!

#4

PS - Same issue below. Something is setting the collapsed layout bar to be 18px tall, and I need it to be 22px tall.

<div style="position: relative; left: 0px; top: 0px; width: 790px; height: 18px; overflow: hidden;">
	<div class="dhtmlxPolyInfoBarCollapsedHor">
		<div class="dhtmlxInfoBarLabel">Activity Name and Description</div>
			<div class="dhtmlxInfoBarButtonsFake">
				<div class="dhtmlxInfoBarButtonsFake2"></div>
			</div>
			<div title="Dock" class="dhtmlxInfoButtonDock" style="display: none;"></div>
			<div title="UnDock" style="display: none;" class="dhtmlxInfoButtonUnDock"></div>
			<div title="Expand" class="dhtmlxInfoButtonShowHide_ver dhxLayoutButton_dhx_blue_ver2b"></div>
			<div class="dhtmlxLineL"></div>
			<div class="dhtmlxLineR"></div>
		</div>
#5

And again here:

<div class="dhxcont_global_content_area" style="left: 0px; top: 34px; width: 318px; height: 709px;">

Any value I put in class dhxcont_global_content_area will be immediately overwritten by the style that comes afterwards, so that the top is actually far below my layout bar.

#6

Additional issue with header:
The header is not included in the height of my layout, so my 100% height is now off the bottom of the screen, by the height of the header. This means any layout panels that collapse downward will disappear off screen, and the bottom of any scrollbars will disappear off screen.

		var dhxLayout = new dhtmlXLayoutObject(document.body,"4H");
		dhxLayout.attachHeader("anyheader");

Have I done this wrong? Wish I hadn’t spent all this time trying to dig up the CSS for the header now.

#7

Header is placed into the absolutely positioned container with top 2px - this value is hardcoded in the dhtmlxlayout.js. You need to the desired height directly to the header container - 74pxin the sample :

dhtmlxLayout/samples/02_conf/inc/header_footer.html

We need the complete demo to reproduce problems with header.