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:
- 2 Columns – Right Sidebar (default.php)
- 2 Columns – Left Sidebar (left_sidebar.php)
- 3 Columns – Main Content, Sidebar, Sidebar (main_side_side.php)
- 3 Columns – Sidebar, Main Content, Sidebar (side_main_side.php)
The theme is grid-based and is built on the 960 Grid System.
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!
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!
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.
I’ll give it a shot…thanks, Chris!
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
Try adding !important to the declaration. so it should be:
.googleMapCanvas img {background: none !important;
}
That worked like a charm… thanks Chris!
Great!
Michael,
Your site (dev.shawhofstra.com) is looking great by the way! Awesome customization of this theme.
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!!
I’m trying to eliminate borders and background on images only in the right col. Using the side main side layout.
…. any ideas?
@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;
}
Thank you! Works great!
Look here
http://www.styleshout.com/templates/preview/KeepItSimple1-0/index.html
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.?
Abraamz,
You’ll have to edit the theme style sheet directly. It’s the KeepItSimple.css file located in the ‘css’ folder.
love you guys!
@davide
thanks!
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?
@dekelly,
add z-index: 1; to #header #nav on line 310
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!
dekelly,
You need to look for #header h1#logo-text a on line 241 in the KeepItSimple.css file. Change the top positioning to whatever you want it to be.
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.
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.
Thanks, Chris. What would I need to do to make it work with italics?
I would just actually remove the reference to reset.css (@import url(“reset.css”);) in screen.css. Shouldnt mess anything else up then.
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.
I love this theme, does anyone know who you would make a full width page to complement the rest?
Am i missing something or is there no download link for this theme anymore? anyone have a zip file they can send me?
Thanks
Andy,
Thanks for bringing this to my attention. Seems when I upgraded to the latest version of concrete5 it somehow messed up the code that displayed the download link. This is working now, so just go to http://c5mix.com/concrete5-themes/keep-it-simple/ to download.