Need help? Check out our Support site, then


albeo blue background for each post

  1. i'd like to get the same style that one can see on wordpress' anouncement of the albeo theme, the blue filled frame for each post: http://en.blog.wordpress.com/2008/09/03/albeo-theme-launch/
    the only thing i'd like to change is that i want it to have round corners, just like the widgets on the right side. i have already the .png files for the desired effect, but i'm struggling with the css-code (yep, i'm testing on an upgraded blog). help from one of the css-wizzards would be highly appreciated <3

    the images for the frame:
    http://blubberblub.files.wordpress.com/2008/09/com-top.png
    http://blubberblub.files.wordpress.com/2008/09/com-bod.png
    http://blubberblub.files.wordpress.com/2008/09/com-bot.png

    the colour code is #d7ecf3

  2. masterclasslady
    Member

    Yes, I want this blue background as well. I posted a request for it, wondering if it was eventually going to be included in the CSS, but I received no replies.

  3. what is the name of the box you want to alter?

  4. Also is this actually a frame you are trying to style (e.g. the content is actually being pulled from another website) or is this just a simple div (area on your website)?

  5. @ webdesignni
    i'm not sure if we are talking about the same thing here... i'm trying to style the background for posts on the albeo design via css. the desired look can be seen with a click on the first link. and to my knowledge one can't put other websites into a frame on a wordpress.<i>com</i> blog.

  6. Thats ok. If your box (div) was called 'post_div', you can change the background color in the css file with something like:

    .post_div{
    background-color:#d7ecf3;

    }

  7. To add the rounded corners in all browsers is quite difficult to my knowledge because you would have to add new divs into the html code which i gather you do not have access to. Some browsers support rounded corners, some dont...welcome to the world of css!

  8. i don't just want to change the colour, i want the corners of the posts frame to be rounded, as everything else in the theme. maybe i should have added the link to the css-file in my first post, too: http://chaoscantina.wordpress.com/wp-content/themes/pub/albeo/style.css

    thanks for looking into it :)

  9. Thinking about it you could easily get rounded corners at the 2 corners top of the post. You would need to create an image the width of your 'post_div' with the rounded corners on it. then you add a background color and a background image such as:

    .post_div{
    background: #d7ecf3 url('smiley.gif') no-repeat fixed top;
    }

  10. i have png-files for the background. you can find everything in the links of my first post.

  11. i tried the code, doesn't work :(

  12. Ok, thats good, you should be able to do it by creating 2 full width images for the top and bottom.

    change:
    .p-head { padding-bottom: 10px; background:url(images/post-head.png) repeat-x bottom;}
    to:
    .p-head { padding-bottom: 10px;
    background: #d7ecf3 url('full_width_image_with_2_top_rounded_corners.jpg') no-repeat fixed top; }
    ------------------------------------------------------------------
    change:
    .p-con { padding: 5px 0px;}
    to:
    .p-con { padding: 5px 0px;
    background-color: #d7ecf3; }
    ------------------------------------------------------------------
    change:
    .p-con { padding: 5px 0px; }
    to:
    .p-con { padding: 5px 0px;
    background: #d7ecf3 url('full_width_image_with_2_bottom_rounded_corners.jpg') no-repeat fixed top; }

  13. we're getting closer... check the test blog please: http://blubberblub.wordpress.com/

    i had to modify the code to get this result, otherwise it would just show a part of the box in blue. now it looks like this:

    .p-head {
    padding-bottom:5px;
    background:url('http://blubberblub.files.wordpress.com/2008/09/com-top.png') no-repeat top;
    }

    .p-con {
    background-color:#d7ecf3;
    background:url('http://blubberblub.files.wordpress.com/2008/09/com-bot.png') no-repeat bottom;
    padding:5px 0;
    }

    .p-con { padding: 5px 0px;
    background-color: #d7ecf3; }

    hm... the white fields should be blue, too... and it won't include the tags on the bottom. but that's already much more than anything i've achieved on my own! i post this so you see results so far, i'm fiddling on it, too.

  14. even closer... http://blubberblub.wordpress.com/

    .p-head {
    padding-bottom:5px;
    background:url('http://blubberblub.files.wordpress.com/2008/09/com-top.png') no-repeat top;
    }

    .p-con {
    background:url('http://blubberblub.files.wordpress.com/2008/09/com-bot.png') no-repeat bottom;
    background-color:#d7ecf3;
    padding:5px 0;
    }

    .post {
    background:#d7ecf3;
    padding:0;
    }

    .p-tag {
    display:none;
    }

  15. Wow the blue with the round corners makes that theme look
    so much better... To Bad I don't know CSS Oh well :)

  16. yay! i think it's done! thanks so much, webdesignni, without your help i'd have been lost! hugs and kisses!! :))))

    so here's the codes one needs to change to get the blue boxes:

    .p-head { background:url('address of background top') no-repeat top; padding:8px 10px; }

    .p-con { background:url('address of background bottom') no-repeat bottom; background-color:#d7ecf3; padding:0 10px; }

    .post { background:#d7ecf3; padding:0; }

    .p-det { padding:0 10px 10px; }

    the .png files for the top and bottom of the blue box with round corners as a .zip file: http://www.sendspace.com/file/5tfxjd

    i also deleted the view of categories and tags on my blog with these codes:

    .p-det .p-cat { display:none; }

    .p-tag { display:none; }

  17. Your welcome.

  18. masterclasslady
    Member

    Okay- so I will try this tonight. It looks terrific. Wish me luck http://www.timminsyouthsingers.com

  19. guess i need to cry for help once more... :(

    ok, the boxes appear just fine on the main page with regular blog posts, but they don't appear at all on the two other static pages on my blog http://chaoscantina.wordpress.com/

    how can i apply the code to these pages? again, any help is highly appreciated :)

  20. pretty please?

  21. Have you tried messing with the .post-page stuff? That's the only thing I can see that might make a difference.

  22. i'm afraid i tried everything i could with my limited css knowledge. i'll need a push in the right direction...

  23. You & I are in the same boat :( Sorry I couldn't be of help.

  24. masterclasslady
    Member

    Well, I just paid for the CSS upgrade and the Albeo design went wonky. I lost the basic graphic structure, my search box is one big blue box, my homepage link is white - it's a mess.

    And, no, I didn't even tinker with the CSS format. It just appeared this way after the upgrade. Go figure, huh?

    I emailed support, so we shall se what happens, but this design, so far, is a nightmare. A beautiful nightmare, but, yea, a nightmare.

    http://www.timminsyouthsingers.com

  25. You do know that there is no support for CSS, right? That's why they allow you to "try before you buy" so that you can work all that out in advance.

    Best thing to do for now is delete all the stuff in the CSS box, make sure you select the "Add this to the theme" box and save the stylesheet. That should get you back to square one.

  26. The other two pages seem to be in .sl

  27. masterclasslady
    Member

    I'm good now. Thanks all. I did try the customization before I purchased the CSS, but encountered the same problems.

    I purchased the CSS upgrade anyway, as I want to personalize this site. I may change themes if this one continues to be problematic for me.

  28. Hey everyone,
    The blue background in that screenshot was actually from Sticky Posts, which we just launched and announced. Sorry the style crept into the screenshot and we couldn't tell you what it was yet. Enjoy!

Topic Closed

This topic has been closed to new replies.

About this Topic