using css in child theme

[davidcpa135]

I’m self taught on CSS and thus what I’m asking may not be fesible within the theme.
Current on versions of Alyeska and WordPress
Question is:
Added the following (local host copy of site) to the child’s style.css

.ribbon {padding-left:103px}
.ribbon-background {position:absolute;top:0;right:0;font-size:8px;color:#cccccc;}
.ribbon-background a {color:#cccccc;text-decoration:none;font-weight:normal;} 
.ribbon-background a:hover {color:#cccccc;text-decoration:none;font-weight:normal;} 
.theribbon{position: relative;width: 250px;font-size: 1.5em;font-weight: bold;padding: 6px 20px 6px 71px;margin: 30px 10px 10px -71px;color: #b34040;background-color: #fff2bf;text-shadow: 0px 1px 2px #bbb;-webkit-box-shadow: 0px 2px 4px #888;-moz-box-shadow: 0px 2px 4px #888;box-shadow: 0px 2px 4px #888;} .theribbon:before, .theribbon:after {content: ' ';position: absolute;width: 0;height: 0;} 
.theribbon:before{width: 30px;left: -30px;top: 12px;border-width: 20px 10px;border-style: solid;border-color: #fff2bf #fff2bf #fff2bf transparent;} 
.theribbon:after{left: 0px;top: 100%;border-width: 5px 10px;border-style: solid;border-color: #666666 #666666 transparent transparent;}

The attempted to use with a post with

<div class="ribbon">
<div class="theribbon">Announcing a new service from SCA</div>

What puzzles me is that it works fine if I just create an html document in notepad and view in browser, but doesn’t work in theme.

Tried inserting the style tags within the post but that would seem unneeded with the above.
Any help appreciated.

Topic

[Jason Bobich]

Hm, do you have a closing DIV tag for your .ribbon DIV?

<div class="ribbon">
<div class="theribbon">Announcing a new service from SCA</div>
</div>

If that’s not the issue, post a link to what you’re working on. Can’t really tell you much flying blind.

[davidcpa135]

Fair point. LInk follows below. What I found when testing it on the live site was that it worked fine (the fold of the ribbon is cutoff but that might be the amount of padding or the box layout) so maybe there’s some setup problem in Xampp that’s beyond me.

Nonetheless, the opens great design possibilities. As far as CSS goes, once your’re using a child theme should all custom css code by moved from the theme options style tab to the child’s style sheet?

Test Ribbon

[Jason Bobich]

so maybe there’s some setup problem in Xampp that’s beyond me.

Server-side factors wouldn’t have anything to do with CSS styling of your site, which is handled by the client web browser (i.e. the person viewing the website).

As far as CSS goes, once your’re using a child theme should all custom css code by moved from the theme options style tab to the child’s style sheet?

I would say this is better, yes, but it really makes no difference in the visual result you’ll get.

Anyway, first of all, you need to eliminate the hidden overflow on the content of the page.

article {
	overflow: inherit;
}

Then you need to adjust the margin of .theribbon, which is what places it. And then lessening the left padding in relation to how you’re placing it would probably look nicer, too.

See screenshot: http://www.uploadblvd.com/uploads/image_53ed3b4cd1c4c.png

That’s kind of a mess of CSS you got up there. I would take some time, and clean it up. Give it some proper spacing and indention, and put in the style.css file of your child theme. It kind of seems like you’re just pasting from somewhere but not really understanding anything it’s doing. Clean it up a little so it’s readable and you can understand what you’re applying to your site.

[Author]

Replies