Forums

CSScrewed

Permalink
I'm trying to convert a responsive HTML5 template to concrete5 theme. It looks great... until you login. Then everything goes wrong: The edit bar doesn't stay with the screen, it's down double the height. editing blocks is practically impossible on-page. The only clickable to edit block is a sliver on the left. Once a blocks menu comes up it has no css styling, is full screen and usually doesn't function.

Is Responsive theme development supposed to be this painful? I converted a static site to a theme in 2 hrs, I've been working on this for over a week and a half (and has put me way over budget)
GundlachMarketing
 
ScottSandbakken replied on at Permalink Best Answer Reply
ScottSandbakken
Can you post a link so we can see the site?

Also, are you using a reset.css file? If so, do you have your main style sheet setup so that everything is under a wrapper tag? This keeps the template styles from interfering too much with the CMS styles.

<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
<!DOCTYPE html>
<html>
<head>
<?php Loader::element('header_required');?>
<!-- header stuff -->
</head>
<body>
<div id="wrapper">
<!-- page content -->
</div><!-- end #wrapper -->
<?php   Loader::element('footer_required'); ?>


Then your styles look like this (when applicable):

#wrapper a {}
#wrapper p {}
#wrapper ul {}
GundlachMarketing replied on at Permalink Reply
GundlachMarketing
I can't currently post a link as it's still in local development, but I can try to throw it up live today

Also, are you using a reset.css file?
Not that I'm aware of, But I haven't dissected the JavaScripts, most of the css is added through them.

If so, do you have your main style sheet setup so that everything is under a wrapper tag? This keeps the template styles from interfering too much with the CMS styles.
I don't but I will, Great Suggestion.
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
You should use css hierarchy, so that the themes css doesn't interfere with the Concrete5 styles. Also if you have any javascript files, just make it sure that it doesn't conflict with the Concrete5 js.
As Scott says, you can wrap all your html codes into a wrapper div and make it sure that you add the 
<?php Loader::element('footer_required')?>
just after the wrapper close tag.

Rony
GundlachMarketing replied on at Permalink Reply
GundlachMarketing
I've re wrapped my pages so the Loader::element('footer_required') is outside of it and made sure all of my theme's css attributes include the wrapper Id. It's fixed a lot of the problems: the edit bar is in the right spot, the blocks are now editable... now my only real Concrete5 issue is that ccm-highlighter doesnt detect the block size. The height and width attribute aren't present, so all I get are little gray slivers in the upper left hand corner. The dotted box shows up properly, but not the highlighter. Also, the popup fails. It goes fullscreen with no CSS except the element defined background.
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
Great to hear that it solves many of these problems.

Now it seems like you are using css positions in those blocks. If so, try to disable this while in edit mode.

Rony
GundlachMarketing replied on at Permalink Reply
GundlachMarketing
what do you mean by css positions?
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
like position: absolute or relative ...
GundlachMarketing replied on at Permalink Reply
GundlachMarketing
hmm, how would I disable it only in edit mode? The entire theme is responsive. Getting rid of position attributes wreaks havok on my layout.
JohntheFish replied on at Permalink Reply
JohntheFish
As long as you use a positioned overall container and your code is relative to that, you may get away with it.

The overall container will be moved by concrete5 by the edit bar and in edit mode and should take anything within it along in the move.

If you don't use a positioned overall container, then all positioning will be relative to the document and will get screwed up by edit.
GundlachMarketing replied on at Permalink Reply
GundlachMarketing
Yeah, I've got the bar figured out. (my previous wrapper was including the footer required). Now I just need to figure out ccm-highlighter and the edit-block-popup
GundlachMarketing replied on at Permalink Reply 1 Attachment
GundlachMarketing
I've tried it all, maybe there's just a spot in the js I'm missing. I did notice that when I changed the header-nav global area to a static block using 
<?php
$bt = BlockType::getByHandle('autonav');
$bt->controller->displayPages = 'top';
$bt->controller->orderBy = 'display_asc';
$bt->controller->displaySubPages = 'all';
$bt->controller->displaySubPageLevels = 'all';
$bt->render('view');
?>
when I switched into edit mode it kept its css, before it was turning into a vertical list.
gijsbertdeboer replied on at Permalink Reply
Hi GundlachMarketing,

I'm currently experiencing exactly the same problem, especially the "The only clickable to edit block is a sliver on the left. Once a blocks menu comes up it has no css styling, is full screen and usually doesn't function."-part. I was wondering, have you been able to fix these problems yet?
GundlachMarketing replied on at Permalink Reply
GundlachMarketing
My CSS was enabled through javascripts, It wasn't an issue with my css at all, If there is an instance of jQuery that you're including in your theme or if one of your add-ons has it get rid of it. The JQuery included with Concrete5 hasn't stopped me from doing anything with jQuery, but because it's customized it's really finicky and needs to be the only jQuery initialized.