Forums

add block pop up not displaying correctly in bootstrap3 test theme

Permalink
Hi,
I'm just playing around with a local copy of C5 seeing if I can get a simple bootstrap 3 theme to work. This is just a learning exercise for me, so I can feel more comfortable adding my own themes to C5.

I have a default.php page set up and I've added a few areas for blocks to be added, but I notice when I go to add a new block two problems:

1: The clickable area to access the blocks is really small, It's almost like a 1px space at the left side of the "Add to...." bar below the editable area.

2: The block pop up is garbled and unstyled and does not function. I've supplied a screenshot below to show you what I'm referring to.

Here is the code I'm using on this test page. I am using a php snippet I came across on the forums to adjust the fixed menu so it wouldn't hide the Edit bar, but that is the only customization on the page at this point. 
<!DOCTYPE html>
<html lang="en">
  <head>
   <?php Loader::element('header_required'); ?>
    <!-- Bootstrap core CSS -->
    <link href="<?php echo $this->getThemePath(); ?>/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="<?php echo $this->getStyleSheet('main.css'); ?>" rel="stylesheet">
    <link href="<?php echo $this->getStyleSheet('typography.css'); ?>" rel="stylesheet">
    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
Viewing 15 lines of 90 lines. View entire code block.


Any help would be greatly appreciated.

1 Attachment

scottM1164
 
ronyDdeveloper replied on at Permalink Best Answer Reply
ronyDdeveloper
There are few things that you need to remember while developing a theme in Concrete5.

1. You don't need to add the jquery library as it is already there into concrete5. So if you include yours, it just clash each other and stopped working. In your theme, you include
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>


Remove that script.

2. While playing with css, you need to make it sure that the site must be wrapped within a container and you need to white css hierarchically. 
<html>
........
<body>
<!-- After body tag -->
<div id="container">
<!-- Your website html -->
</div>
<!-- footer_required should be after the container tag -->
<?php Loader::element('footer_required'); ?>
</body>


Then for css, you need to follow the below rules to overcome the core style clashes
<!-- #container must be the prefix of all css -->
#container .class_name <tagname> {.......}


Hope this helps you and you will be able to produce a good theme to the marketplace shortly.

Rony
scottM1164 replied on at Permalink Reply
scottM1164
Thank you so much Rony!

Once I removed the extra link to jQuery all my problems disappeared. I thank you for your excellent advice on future theme development as well. I will do as you suggest.

Thanks again :]