Modifying a theme - first time

Permalink 1 user found helpful
I'm giving Concrete5 a look to see if it will work for me. I'm modifying a theme. I know just enough to be dangerous.

I started out with Green Salad Theme, copied it to my own ~/themes folder, installed the copy, then started hacking away. I replaced the background image, changed the background color of the blog post by hacking main.css. However, I can't find where to find the dark green background color of the header and footer, the light green background in the Add to Header box, and the mid green fill along the left edge. Am I going about this the hard way by using an editor outside of Concrete5? Hey, I just found the advance tool bar for the C5 editor. This could help.

I inserted the header image using a file uploaded with C5s file manager and the C5 editor, but it was hit and miss getting the aspect ratio and size close to fitting. After three tries I got something close but I don't know what I'm seeing above and below the photo. A little of the same image tiled? Is there a better way of finding out from the theme what the size of the target container is for a image insert?

My current attempts can be viewed athttp:// until I break it completely.

View Replies:
mikeyt55 replied on at Permalink Reply
the header box is currently 800px x 257px if you make the images that size and an image block there it should fill the space. Im not quite sure why you have the image inside an h1
MajorGeek replied on at Permalink Reply
I tried again with Irfanview to make the image 800 x 257. Uploaded a new version with File Manager. Noticed for the first time that there's an option right in FM to edit images, so I adjusted it slightly. Inserted it on the page but it still doesn't fit well. I can still see stuff above and below. When I inspect the element with Firefox it says
position: absolute;
width: 800px;
height: 22px;
top: 496px;
left: 111.5px;
display: block;

Where did you look for the size of this container?

Is this the wrong place to put an image?
mikeyt55 replied on at Permalink Reply
if you remove the
<h1>, the <br> and the &.nbsp (or any spaces you have in there)

the image will fill the box. actually the box will adjust to the size of the image.

<h1> is for headings - such as your main heading

I also noticed you have a background image on the div with id "areaStyleHeader1" - you don't need that it is what you see repeating under the header

hope this helps
MajorGeek replied on at Permalink Reply
Is there a better place to put the home image in this form? In the blog post header?

Are image crawls like available in the market place?
mikeyt55 replied on at Permalink Reply
yes there is, there is actually already a image slider installed with concrete5. are you adding the image into the header within an image block?
MajorGeek replied on at Permalink Reply
No, I used the Editor, then the Add Image pull down, and added a photo from File Manager.

What does the Photo Block do for me? I can't find it when I'm heading this existing header block, but I see it when I try editing "Add To Header"

The yellow charts I added down below home are urls to php scripts that access MySQL tables so I used the Editor's Insert/Edit Image button.
mikeyt55 replied on at Permalink Reply
you should try just using the image block for adding just images. the content block ( that assume you are using ) sometimes adds extra html tags
MajorGeek replied on at Permalink Reply
That image looks much better in an image block.

I still need to do something about the color on the green top bar and footer within the theme. Can't hardly read the nav text in the top bar.

Will try to find out more about the slider.
mikeyt55 replied on at Permalink Reply
have you added any css ?
MajorGeek replied on at Permalink Reply
Yes, I've been hacking main.css, but I can't find where these background colors are set. But the text colors are here. I have Dreamweaver here which helps with css edits.

I got the C5 image slider installed and slapped a couple pictures into it. Looks like it will work but I'll need to figure out how to set the size of the container. I also spotted Goggle Slides and grabbed it. Looks like a handy way of doing this.
mikeyt55 replied on at Permalink Reply
this will add some styling to ur nav in the header-area
#header-area {top:1px;}
#header-area ul {list-style-type:none; text-align:right;}
#header-area ul li a {color:#fff; text-decoration:none; display:block;}
#header-area ul li a:hover { color:#ddd;}
MajorGeek replied on at Permalink Reply
Thanks, that looks nice.

I'm seeing now that I've been confused because there are two elements in that area, #header and #header-area. The background color of header seems to be coming from a thin green vertical line repeated many times, the header_bg.jpg. Changing the color #73880b has strange results. I'm not sure how this line works. Is #73880b an over color?
background: url(images/header_bg.jpg) repeat-x top left #73880b;

Having trouble figuring out a way to edit the color of that thin image header_bg.jpg.
mikeyt55 replied on at Permalink Reply
background: (images/header_bg.jpg) repeat-x top left #73880b;

background: url(images/header_bg.jpg) repeat-x top left #73880b;

You missed out the "url" part so the background is not being set.

If you want it to just have the color you can change it to:


both have the same result.
"background" has a few property's you can set them individually like so:
background-position:top left;

or they can be set all in one statement such as:
background:url('images/header_bg.jpg') repeat-x top left #73880b;

hope that clears it up a bit
MajorGeek replied on at Permalink Reply 1 Attachment
"You missed out the "url" part so the background is not being set. "
Oops, how did that happen?

However when I try to change just the background color to something blue, I get the left side of the header a little lighter green, then the rest of the header a lot lighter green. Is the color of the header-area bleeding through?

I get about the same result when I try a blue colored background image (images/header_bg_ed.jpg) repeating in #header
mikeyt55 replied on at Permalink Reply
what you are seeing is the background of something else.
your css has a few errors.

replace #page #header with:
#page #header {
position: relative;
height: 100px;
background: #0000FF;
padding: 15px;

that will make you header blue

the diffrent colored greens are coming from the backgrounds on
MajorGeek replied on at Permalink Reply
I keep trying various permutations but I can't get those greens replaced. Where is it coming from?
/* colors 
 * 73880b dark green
 * f4ffd2 light green
 * 69ab2b bright green (links & headers)
 * daf095 med green sidebar backgrounds, header nav
 * 50AAB5 blue for hovers..
/* HTML Tag Redefinition */
html, body {
   height: 100%;
   font-family:Arial, Helvetica, sans-serif;
body {
   padding: 0px;
   margin: 0px;
mikeyt55 replied on at Permalink Reply
#page {
   margin: auto;
   height: auto !important;
   background:url(images/central_columns_bg.jpg) repeat-y top left;
#page.sidebar-left {
   background:url(images/central_left_columns_bg.jpg) repeat-y top left;

that is were the two greens are.

just remove the backgrounds
mikeyt55 replied on at Permalink Reply 1 Attachment
this file should fix it, just a copy of the one you posted with a few amends.
djoniba replied on at Permalink Reply
MajorGeek, if you are ever in Kelso, say hello from me. I was an exchange student there in 1985 :)
MajorGeek replied on at Permalink Reply
Thanks. I didn't ever understand why those elements' backgrounds were set up with one pixel wide repeating images that just contained a color. Also why I was having so much trouble editing and replacing those background images.

I just had to make the header a little higher, line 45-- 130 rather than 100.

I wonder if I lost my ability to further edit the header logo and the left sidebar on the front page because of all my screwing aroung with the template, or have they always been uneditable from the edit mode?