Developing (v7+)

How's my code?

Permalink February 29, 2016 at 12:16 PM

I'm totally new to concrete5 but I have I inherited a client's site that was already created in it, so please bear with me! I'm trying to add a new row section to the homepage, underneath the current slideshow row and above the "Crystal Moments" row. See the homepage here:http://crystalfinco.com
Starting at the div class="SBIC" section in the code below is what I'm trying to add - all the other code is currently as it appears.

<div id="content" class="home">
     <div class="row">
        <div class="col-md-8">
           <?php 
              $a = new Area('Home Photos');
              $a->setBlockLimit(1);
              $a->display($c);
           ?>
        </div>
        <div class="col-md-4">
          <div class="home-text">
             <?php 
                $a = new Area('Home Text');
                $a->setBlockLimit(1);
                $a->display($c);

Viewing 15 lines of 99 lines. View entire code block.

 
<div id="content" class="home">
 
     <div class="row">
        <div class="col-md-8">
           <?php 
              $a = new Area('Home Photos');
              $a->setBlockLimit(1);
              $a->display($c);
           ?>
        </div>
        <div class="col-md-4">
          <div class="home-text">
             <?php 
                $a = new Area('Home Text');
                $a->setBlockLimit(1);
                $a->display($c);
             ?>
          </div>
        </div>
     </div>
 
    <div class="SBIC">
       <div class="row">
           <div class="col-md-8">
              <?php
               $a = new area('SBIC Logo');
               $a->setBlockLimit(1);
               $a->display($c);
            ?>
             </div>
            <div class="col-md-4">
             <div class="sbic-text">
                <?php 
                $a = new Area('SBIC Text');
                $a->setBlockLimit(1);
                $a->display($c);
             ?>
                </div>
          </div>
        </div>
    </div> 
 
     <div class="crystal-moments">
       <h2>Crystal Moments</h2>
       <div class="row news-items">
          <div class="col-md-4 news-item">
            <div class="row">
              <div class="col-xs-6 col-md-12">
                <?php 
                  $a = new Area('Home News 1 Image');
                  $a->setBlockLimit(1);
                  $a->display($c);
                  ?>
              </div>
              <div class="col-xs-6 col-md-12">
                <?php 
                  $a = new Area('Home News 1 Text');
                  $a->setBlockLimit(1);
                  $a->display($c);
                  ?>
              </div>
            </div>
          </div>
          <div class="col-md-4 news-item">
            <div class="row">
              <div class="col-xs-6 col-md-12">
                <?php 
                  $a = new Area('Home News 2 Image');
                  $a->setBlockLimit(1);
                  $a->display($c);
                  ?>
              </div>
              <div class="col-xs-6 col-md-12">
                <?php 
                  $a = new Area('Home News 2 Text');
                  $a->setBlockLimit(1);
                  $a->display($c);
                  ?>
              </div>
            </div>
          </div>
          <div class="col-md-4 news-item">
            <div class="row">
              <div class="col-xs-6 col-md-12">
                <?php 
                  $a = new Area('Home News 3 Image');
                  $a->setBlockLimit(1);
                  $a->display($c);
                  ?>
              </div>
              <div class="col-xs-6 col-md-12">
                <?php 
                  $a = new Area('Home News 3 Text');
                  $a->setBlockLimit(1);
                  $a->display($c);
                  ?>
              </div>
            </div>
          </div>
       </div>
     </div>
 
   </div>

What do you think - does this accomplish anything at all like what I'm trying to do?! Thanks in advance for any tips!

siton replied on Feb 29, 2016 at 7:19 pm Permalink Reply

The Q is not clear. This is a static site and you want to convert the html to C5 theme and add more content?...

Anyway its better to use semantic html5 tags (better accessibility + no "divs salad'" - readable code).
https://developer.mozilla.org/en-US/docs/Web/HTML/Element...

MrKDilkington replied on Feb 29, 2016 at 7:23 pm Permalink Reply

Hi hmistler,

After a quick look, the code you provided looks okay.

There is a problem with the site CSS though. Only a portion of the Boostrap 3 grid CSS has been included. The "sm" column class is missing and there is only one container class media query (which is incorrect). This prevents the site from being responsive.

Example:
- only xs and md columns are included
- there is one container class

@media (min-width: 569px) {
  .container {
    width: 960px;
  }
  ...
}

Your site theme uses Bootstrap 3. I recommend reviewing the Bootstrap 3 grid framework documentation. This will allow you to more confidently modify the existing site.

http://getbootstrap.com/css/#grid...

Forums

Developing (v7+)

How's my code?

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?