Adding Block Styling Seems to be Broken
Permalink
So I'm not sure why this is happening but in trying to convert a theme to C5, I get it to work but then when I add a block the styling for the adding a block is all messed up. I read about the styling conflicts and the suggested solution but that's a lot of work for the existing css. Frankly, I don't understand why a developer should have to do that. Why isn't c5 designed so that its styles are wrapped and can't be so easily messed up? However, that's an aside. The real reason for this post is that I want to make sure the suggested solution will fix the problem before doing the work. What I don't understand is why my theme interferes with the adding a block styling but not with the dashboard styling. The site is lighthouse-test.com if that helps.
Is it possible for you to post some code snippets to review?
So I just took 45 minutes changing the css file and it did not fix the problem. I think I read something once about c5 conflicting with a theme because of some jquery conflict so if anyone has any suggestions.
I'm not sure what you would be looking for in terms of code snippets. To test porting of the theme to C5, I have three editable columns like so:
<?php
$a = new Area('column1');
$a->display($c);
?>
That's it!
Any help would be appreciated!
I'm not sure what you would be looking for in terms of code snippets. To test porting of the theme to C5, I have three editable columns like so:
<?php
$a = new Area('column1');
$a->display($c);
?>
That's it!
Any help would be appreciated!
More FYI: So it looks like anything to do with Editing is broken but anything to do with the Dashboard is fine. So you can change the design of a page via the dashboard but not via Edit.
What section the page are you trying to change the css on? What did you put into the content editor?
Hmm... I'm not sure you are understanding my issue but maybe I'm missing something so I'll try to explain better. I have a template that I wanted to convert to c5. It's just one file right now (default.php). In that file I have 3 areas that I made editable. When I activate the theme and try to edit the home page (which is a default page type, of course), all the features associated with the EDIT functionality are broken, including Adding a Block. It looks like the styling is broken but after I took c5's suggestion on how to fix CSS conflicts, the problem still persists. I have seen posts where other people have encountered this issue. Some have even made the suggestion (which I agree with) that this is a c5 bug and that the c5 styling should be bullet proof and not so easily broken by the CSS used by a theme. But be that as it may, I have "fixed" my CSS as they suggested and it did not fix the problem of the broken EDIT functionality. Hope this clarifies things.
You are correct, I did misunderstand the problem. My apologies. Do you have the header.php and footer.php files?
Well this differs significantly from what the documentation says about making a theme work with C5. According to the documentation these are the initial steps that need to be taken:
1.Chop your site into a working HTML directory.
2.For every page type in this theme, create a "my_page_type.php" template file in the directory.
3.In the of the template before the CSS add Loader::element('header_required');and right before the closing body tag add
Loader::element('footer_required');add all JS in your theme after the footer element, and all CSS after the header element.
4.Within this template, make sure all stylesheets in your theme are referenced with $this->getStyleSheet('your_stylesheet.css');
5.Within your templates, make sure that all images and files in your theme are prefixed with $this->getThemePath();
6. If desired, add a 120x90 thumbnail graphic to this directory. This file should be named "thumbnail.png"
7.Add "description.txt" to your theme directory. The title of your theme should go on the first line, the description of it on the second.
If I need to mimic the default themes, that's what the documentation should say. Also, I have built themes with the approach they outline without experiencing this issue -- though that was some time ago. I understand the MVC approach they take, but I just wanted to do a quick demo of this using the approach c5 says will work.
I really would like to know why what I did broke the EDIT functions. It doesn't really make sense to me. Thanks for your help though. I appreciate you taking the time.
1.Chop your site into a working HTML directory.
2.For every page type in this theme, create a "my_page_type.php" template file in the directory.
3.In the of the template before the CSS add Loader::element('header_required');and right before the closing body tag add
Loader::element('footer_required');add all JS in your theme after the footer element, and all CSS after the header element.
4.Within this template, make sure all stylesheets in your theme are referenced with $this->getStyleSheet('your_stylesheet.css');
5.Within your templates, make sure that all images and files in your theme are prefixed with $this->getThemePath();
6. If desired, add a 120x90 thumbnail graphic to this directory. This file should be named "thumbnail.png"
7.Add "description.txt" to your theme directory. The title of your theme should go on the first line, the description of it on the second.
If I need to mimic the default themes, that's what the documentation should say. Also, I have built themes with the approach they outline without experiencing this issue -- though that was some time ago. I understand the MVC approach they take, but I just wanted to do a quick demo of this using the approach c5 says will work.
I really would like to know why what I did broke the EDIT functions. It doesn't really make sense to me. Thanks for your help though. I appreciate you taking the time.
So this appears to have been caused by the jquery library conflict. I removed the js and the EDIT functionality is no longer broken. I'm going to assume that I can just eliminate loading in jquery.
