CSS Arranging

Permalink 2 users found helpful
I have a website that is all concrete5 except for my WordPress blog page. I want my logo in the top left as it shows on the blog, overlapping the main content section. When I attempt this on my Concrete5 pages, however, the white background of the main content is layered on top, cutting off the bottom of my logo. How can I fix this? Thanks.


These are my two sites:

www.www.cbearsizzleproductions.com...
www.www.cbearsizzleproductions.com/blog...

bballhermit
 
tallacman replied on at Permalink Reply
tallacman
Put this in your style.css file
div.Header a img {
   margin-top: 13px;
}


I used CSSEdit on a Mac to find this selector. It makes it very easy.
bballhermit replied on at Permalink Reply
bballhermit
Thanks for the response. I have applied your code, and it returns a similar effect as if I just put a line break before the image. The logo is slid down, as I hope, but is layered behind the white background of the main content page. Notice on my blog page, how the logo is on top. How do I adjust layering? Thank you.
tallacman replied on at Permalink Reply
tallacman
That logo image needs another wrapper around it so it can be styled. Can you apply a div id to it using the design option in edit block mode?
bballhermit replied on at Permalink Reply
bballhermit
This image is added in in the theme source code header file. I could probably add it in there. So, I would just give it it's own div id, then what? Thank you so much for your help.
tallacman replied on at Permalink Reply
tallacman
On the blog page the DOM is: body > div.pageContainer > div.Header > div.HeaderSubArea> a > img

and on your c5 site it is: body > div.pageContainer > div.Header > a > img

so we lost that whole *div.HeaderSubArea*

Right now your logo is in the same div as the navigation on top. It needs an extra *handle*.

You can zip and upload the theme here and I can fix it on my end if you like.
bballhermit replied on at Permalink Reply 1 Attachment
bballhermit
Thank you so much, man! Yeah, I'm still learning CSS... Starting to pick it up, but no formal training... My theme is attached. The reference to the logo is in elements/header.php. Thanks!
bballhermit replied on at Permalink Reply
bballhermit
Hey, and while you've got my theme... This one only came with a right sidebar template (default.php) originally. I added in the full.php and left_sidebar.php files, though they are still basically identical to default. How would I go about creating a template for full width? I would need to get rid of the sidebar area, and modify the background to get rid of the blue sidebar. I don't want to take up to much of your time, but if you know of good documentation I could look at, or a place to get me started on that, I'd really appreciate it. Thanks.
tallacman replied on at Permalink Reply
tallacman
Yes on the sidebar and image background questions. I can take a look later on and see what I can do. It should be fairly simple.
tallacman replied on at Permalink Best Answer Reply 1 Attachment
tallacman
I've added a div id of logo to the image. Install this as a new theme (just in case) and activate it. I have also created a description.txt file and a proper thumbnail. You should have a view.php file too but you can just copy that out of the core *plain yogurt* theme if you want. I'll check in a few minutes and see if the new tag is in place. Let me know if you have any problems.
bballhermit replied on at Permalink Reply
bballhermit
Ok. So, I copied the default view.php into the new eos theme, but I don't notice a change, do I have to add something to the view.php? Pardon my being a newbie.
tallacman replied on at Permalink Reply
tallacman
You'll need the new style.css to see the changes.
tallacman replied on at Permalink Reply 1 Attachment
tallacman
Replace your style.css with this and you should be set. I'll take a look at the full page a left sidebar pages in the am and post a solution here.
bballhermit replied on at Permalink Reply
bballhermit
YES! THAT WORKED! Thank you so much...
tallacman replied on at Permalink Reply
tallacman
You are welcome. I have a site athttp://performancec5.com/ that is a testing ground for everything I can get my hands on concrete5-wise.
bballhermit replied on at Permalink Reply
bballhermit
ok, great, i'll check it out. thanks.
bballhermit replied on at Permalink Reply
bballhermit
If you get a chance to address my full page width issue, that would be appreciated. I checked out your website. Great Stuff! Very helpful. Thanks.