Keep It Simple Theme for Concrete5

rkitek  on January 26th, 2009

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!

rkitek  on January 26th, 2009

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  on January 27th, 2009

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.

rkitek  on January 27th, 2009

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

rkitek  on January 27th, 2009

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

Chris  on January 28th, 2009

Try adding !important to the declaration. so it should be:
.googleMapCanvas img {
background: none !important;
}

rkitek  on January 28th, 2009

That worked like a charm… thanks Chris!

Chris  on January 28th, 2009

Great!

Chris  on January 28th, 2009

Michael,
Your site (dev.shawhofstra.com) is looking great by the way! Awesome customization of this theme.

rkitek  on January 29th, 2009

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!!

Andrew  on April 5th, 2009

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

…. any ideas?

Chris  on April 6th, 2009

@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;
}

Andrew  on April 6th, 2009

Thank you! Works great!

Chile  on May 28th, 2009

Look here

http://www.styleshout.com/templates/preview/KeepItSimple1-0/index.html

abraamz  on June 15th, 2009

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.?

Chris Seymour  on June 16th, 2009

Abraamz,
You’ll have to edit the theme style sheet directly. It’s the KeepItSimple.css file located in the ‘css’ folder.

davide  on June 24th, 2009

love you guys!

Chris Seymour  on June 24th, 2009

@davide
thanks!

dekelly  on July 5th, 2009

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?

Chris Seymour  on July 6th, 2009

@dekelly,
add z-index: 1; to #header #nav on line 310

dekelly  on July 11th, 2009

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!

Chris Seymour  on July 13th, 2009

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.

ashton  on December 11th, 2009

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.