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://http://www.concrete5b.ykfp.org/... until I break it completely.
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://http://www.concrete5b.ykfp.org/... until I break it completely.
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
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?
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?
if you remove the
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
<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
Is there a better place to put the home image in this form? In the blog post header?
Are image crawls likehttp://www.wordpress.ykfp.org/ available in the market place?
Are image crawls likehttp://www.wordpress.ykfp.org/ available in the market place?
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?
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.
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.
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
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.
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.
have you added any css ?
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.
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.
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;}
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.
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.
change
to
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:
or
both have the same result.
"background" has a few property's you can set them individually like so:
or they can be set all in one statement such as:
hope that clears it up a bit
background: (images/header_bg.jpg) repeat-x top left #73880b;
to
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:
background:#73880b;
or
background-color:#73880b;
both have the same result.
"background" has a few property's you can set them individually like so:
background-image:url('images/header_bg.jpg'); background-repeat:repeat-x; background-position:top left; background-color:#73880b;
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
"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
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
what you are seeing is the background of something else.
your css has a few errors.
replace #page #header with:
that will make you header blue
the diffrent colored greens are coming from the backgrounds on
#page.sidebar-left
and
#page
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
#page.sidebar-left
and
#page
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;
Viewing 15 lines of 223 lines. View entire code block.
#page { width:800px; margin: auto; background-color:#0000FF; height: auto !important; height:100%; min-height:100%; position:relative; 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
this file should fix it, just a copy of the one you posted with a few amends.
MajorGeek, if you are ever in Kelso, say hello from me. I was an exchange student there in 1985 :)
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?
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?
