Dashboard overlapping edit in Edit bar
Permalink
Hi there! I am new to Concrete5 and am trying to build my first theme from an HTML site I have coded. I have followed instructions to create a Concrete5 theme from my site, but there is a problem: the Dashboard area of the edit bar, which appeared on the right of the bar using the Greek Yogurt theme, has moved left andd is now over the top of the Edit area (which I'm not able to select). I have tried searching the forums but no-one seems to have a similar problem, and I'm not using any jquery. Can anyone help? This is the code from my header.php file:
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="publishing" />
<meta name="Publisher" content="www.meltingclockdesign.co.uk" />
<link rel="shortcut icon" href="<?=$this->getThemePath()?>/images/favicon.ico" >
<meta name="description" content="Oliphant Publishing Services." />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" href="<?=$this->getThemePath()?>/main.css" />
<?php Loader::element('header_required'); ?>
</head>
<body>
<!--[if IE]> <div id="IEroot"> <![endif]-->
<!--[if lt IE 8]> <div style=' clear: both; height: 59px; padding:0 0 0 15px; margin-left: auto; margin-right: auto;'> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div> <![endif]-->
<div id="content">
<div id="header">
<div id="navbar">
<?php
$a = new Area('Header Nav');
$a->display($c);
?>
</div>
<div id="stamps">
<div id="socstamp"><img src="<?=$this->getThemePath()?>/images/twitter.png" class="twitter" alt="twitter" /></div>
<div id="socstamp"><img src="<?=$this->getThemePath()?>/images/facebook.png" class="facebook" alt="facebook" /></div>
<div id="socstamp"><img src="<?=$this->getThemePath()?>/images/linkedin.png" class="linkedin" alt="linkedin" /></div>
</div>
</div></code>
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="publishing" />
<meta name="Publisher" content="www.meltingclockdesign.co.uk" />
<link rel="shortcut icon" href="<?=$this->getThemePath()?>/images/favicon.ico" >
<meta name="description" content="Oliphant Publishing Services." />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" href="<?=$this->getThemePath()?>/main.css" />
<?php Loader::element('header_required'); ?>
</head>
<body>
<!--[if IE]> <div id="IEroot"> <![endif]-->
<!--[if lt IE 8]> <div style=' clear: both; height: 59px; padding:0 0 0 15px; margin-left: auto; margin-right: auto;'> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div> <![endif]-->
<div id="content">
<div id="header">
<div id="navbar">
<?php
$a = new Area('Header Nav');
$a->display($c);
?>
</div>
<div id="stamps">
<div id="socstamp"><img src="<?=$this->getThemePath()?>/images/twitter.png" class="twitter" alt="twitter" /></div>
<div id="socstamp"><img src="<?=$this->getThemePath()?>/images/facebook.png" class="facebook" alt="facebook" /></div>
<div id="socstamp"><img src="<?=$this->getThemePath()?>/images/linkedin.png" class="linkedin" alt="linkedin" /></div>
</div>
</div></code>
a screenshot of how it looks would be helpful but it sounds like it's probably a css issue. the css of your site probably screws the css that is used to display the toolbar. temporarily remove all the css that you've added and if it fixes the problem then the solution is in the css.
I am having the same issue. When logged in to my site the upper left corner "dashboard" overlaps the "edit" and I cannot edit pages on my site. Which css file should I change? what to change in it? thanks
I have attached a screen shot showing my issue.... which is that the dashboard header is misaligned since I updated to Concrete5.5.1. I looked at another site and the Concrete5 hand and the edit button are on the left side of the header. The Dashboard, the search and the signout are then spaced and appear on the right side. For me, everything is squished on the left with dashboard overlapping so that I cannot get to the edit button
It looks like something about your theme is conflicting with the style of the concrete5 toolbar. I would remove certain parts of your theme's stylesheet and reload the page and see if anything improves, so that you can isolate what's causing this issue.
Seems like you have not followed the tutorial properly, I believe the issue discussed in this post may be caused by the absence of this beginning line
<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
Going through and comparing the code from the themes that came pre-installed with C5 should definitely help you resolve this issue.
<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
Going through and comparing the code from the themes that came pre-installed with C5 should definitely help you resolve this issue.
Pritam, Thanks for the tip. I checked and that code is already in my header.php. So that didn't work.
I tried comparing my header.php with ones from default install of concrete5. No differences are apparent in the "dashboard" part.
I tried comparing my header.php with ones from default install of concrete5. No differences are apparent in the "dashboard" part.
You could use firebug plugin for Mozilla to see whats really happening
Pritam, that firebug tool is great. I will use that in the future for a lot of things. Thank you!
I used it to "comment" out all of the stuff from my css's. and it did not affect the nav bar that shows up when you are logged in. Thus I do not think it is in my css's. I then tried manipulating the css's that come with 5.5.1. I was only changing properties already present but nothing I did prevented the overlapping of "dashboard" on top of "edit"
Any ideas where this might come in?
I used it to "comment" out all of the stuff from my css's. and it did not affect the nav bar that shows up when you are logged in. Thus I do not think it is in my css's. I then tried manipulating the css's that come with 5.5.1. I was only changing properties already present but nothing I did prevented the overlapping of "dashboard" on top of "edit"
Any ideas where this might come in?
It looks like the "logo" and "edit" are in one list while the "dashboard", "intelligent search" and "sign out" are in a separate list. Maybe I am missing why they are in separate lists. should they be in the same list so they don't overlap? or what am I missing to separate the two lists?
I use a tweaked Atahualpa theme and finally found my issue. Somehow I missed it previously too.
It was in my style.css (main css) there was an instruction defining ul, il, and headings with the following statement
width: 100%.
that is not exact code but that is what it was. Removed that line and the dashboard overlay works fine (not overlapping the edit button) in Firefox and IE. It is still an issue in both Chrome and Opera. I have no idea why that is the case but there it is.
At least I can edit pages on my site now.
It was in my style.css (main css) there was an instruction defining ul, il, and headings with the following statement
width: 100%.
that is not exact code but that is what it was. Removed that line and the dashboard overlay works fine (not overlapping the edit button) in Firefox and IE. It is still an issue in both Chrome and Opera. I have no idea why that is the case but there it is.
At least I can edit pages on my site now.
Couple of things aren't right. You call a character set twice and they're different, you don't always need to call character set, C5 does it for you.
You say this is your header.php?
But you have a lot body parts in there?
Is the rest of the body code in a separate file and have you included a footer.php?
In the footer.php have got
Try taking out the IE crap from under the opening body tag and see what happens.
Do you open div tags?
I mean <div> but no </div> at the end?
Seriously need to double check CSS also as nerdess said.
You say this is your header.php?
But you have a lot body parts in there?
Is the rest of the body code in a separate file and have you included a footer.php?
In the footer.php have got
<?php Loader::element('footer_required'); ?>
Try taking out the IE crap from under the opening body tag and see what happens.
Do you open div tags?
I mean <div> but no </div> at the end?
Seriously need to double check CSS also as nerdess said.
