Blog

Keep It Simple Theme for Concrete5

keepitsimple-c5theme

Demo | Theme Details & Download

We are excited to release our first free concrete5 theme today!

Keep It Simple 1.0 is a free, W3C-compliant, CSS-based website template by styleshout.com and coverted to a concrete5 theme by c5mix.com. This work is distributed under the Creative Commons Attribution 2.5 License, which means that you are free to use and modify it for any purpose. All I ask is that you include a link back to styleshout.com and c5mix.com in your credits.

Theme Features

The Keep it Simple theme has 4 different layout options:

  1. 2 Columns – Right Sidebar (default.php)
  2. 2 Columns – Left Sidebar (left_sidebar.php)
  3. 3 Columns – Main Content, Sidebar, Sidebar (main_side_side.php)
  4. 3 Columns – Sidebar, Main Content, Sidebar (side_main_side.php)

The theme is grid-based and is built on the 960 Grid System.

This entry was posted in Themes and tagged . Bookmark the permalink.

31 Responses to Keep It Simple Theme for Concrete5

  1. rkitek says:

    I’ve already posted this over at the concrete5 site, but I don’t know if it will be noticed there so here it is as well:

    It appears that all of the transparent pngs used by google maps lose transparency when using this theme. The problem could be global across all pages, but I don’t have any other transparent pngs in my site so I haven’t tested it. Can you confirm this issue?

    I’m stuck on using this great theme and can’t figure out the problem… thanks in advance!

  2. rkitek says:

    Nevermind… I found it.

    In KeepItSimple.css, I changed:

    #content-wrapper img {
    background: #FAFAFA;
    border: 1px solid #DCDCDC;
    padding: 8px;

    to

    #content-wrapper img {
    background: transparent;
    border: 1px solid #DCDCDC;
    padding: 8px;

    this piece of CSS changes the transparent parts of all your images to #FAFAFA. Seems to have corrected the transparency issues, but hopefully won’t break anything else!

    • Chris says:

      This definitely fixes it, but now all images will have a transparent background instead of the light gray background. Try adding this to KeepitSimple.css instead:


      .googleMapCanvas img {
      background: none;
      }

      This gives only the images within the Google map block no background.

  3. rkitek says:

    I’ll give it a shot…thanks, Chris!

  4. rkitek says:

    Ok…a tried inserting that snippet of code into the KeepitSimple.css before then after the “#content-wrapper img” bit. It didn’t seem to affect the transparency of the Google Map pngs either way.

    Apparently the googleMapCanvas div is still inheriting the content-wrapper div’s img decoration. So I looked a little harder at the source and I found that the map canvas div ID for my site is actually “googleMapCanvas192″ with 192 being the block ID. I dug this out of ..\concrete\blocks\google_map\view.php

    So, I did this:


    #content-wrapper img {
    background: #FAFAFA;
    border: 1px solid #444;
    padding: 0px;
    margin: 0px 5px 5px 0px;
    }
    #googleMapCanvas192 img {
    background: transparent;
    }

    It works now, however it’s definitely a hack…anyone who would want to employ this method will have to find out their unique google_map block ID first (view the source of your page). Also, should that block ID change for any reason, the hack will break.

    I really don’t know how to write code at all, so if you can think of a better way, I’m all ears!

    thanks again- Michael

  5. rkitek says:

    That worked like a charm… thanks Chris!

  6. rkitek says:

    Thanks! There’s still much left to do, but I’m sort of buried with work that pays the bills… oh well.

    Now, when I get the Google Map Premium block working right, it will be a big step in the right direction. See here if you’re interested:
    http://www.concrete5.org/community/marketplace/addons/google_map_premium/bugs/balloonbubble_conflict_-_map_vs_earth

    Anyway, thanks again for your help!!

  7. Andrew says:

    I’m trying to eliminate borders and background on images only in the right col. Using the side main side layout.

    …. any ideas?

    • Chris says:

      @Andrew,
      Try adding this to the style sheet:

      #col3 img {
      background: none !important;
      border: none !important;
      }

      If you want to get rid of backgrounds and borders on all images simply look for this declaration in the stylesheet and change it:
      #content-wrapper img {
      background:#FAFAFA none repeat scroll 0 0;
      border:1px solid #DCDCDC;
      padding:8px;
      }

  8. Andrew says:

    Thank you! Works great!

  9. abraamz says:

    Hi there (great theme)
    when i get to the dashboard and try to customize this theme i get the message
    “This theme contains no styles that can be customized.”
    how can i edit some stuff like change font size etc.?

  10. davide says:

    love you guys! ;)

  11. dekelly says:

    Hi, I’ve just applied keepitsimple and the header-image.gif is cutting off the right-hand end of the top menu and any other nav element that I add. How can I fix this?

  12. dekelly says:

    Thanks Chris! I downloaded the kiss_is_back theme which is based on keep it simple and has a couple more page layouts.
    http://www.fingersonfire.com/index.php/creations/templates/

    I want to put more space between the top of the browser and top logo/text like on the Plain Yoghurt theme top page. I changed various things in the css files to no avail. Can you point me to the right css file/line for this? Thanks!

  13. ashton says:

    I just started converting my site to c5, it’s based on the 960 grid. It says in the converting tutorial that there are only two css files in a template. How did you get around this?

    Cheers.

  14. jfuqua says:

    I’m using this template for a small site and can’t seem to be able to style the text. For example, in the editor, I can make things bold and italic and they appear to look correct. But the browser shows them not changing. I assume this is a CSS issue but I can’t pinpoint it.

    Example: http://www.omorefashion.com/designers/seniors/

    Words like “hometown” should be bolded. Thanks for any suggestions.

    • @jfuqua,
      The theme’s reset.css file (keepitsimple/css/reset.css) is styling the tag as font-weight:normal. I would add:
      strong {font-weight:bold;} to typography.css or main.css and that should fix it.

  15. jfuqua says:

    Thanks, Chris. What would I need to do to make it work with italics?

  16. jfuqua says:

    That did it! Many thanks for your time and work on this theme. This is my first attempt to work with both CSS and C5 and have enjoyed it.

  17. Paul says:

    I love this theme, does anyone know who you would make a full width page to complement the rest?

  18. Andy says:

    Am i missing something or is there no download link for this theme anymore? anyone have a zip file they can send me?

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>