Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

albeo blue background for each post

  1. ddoreau
    Member

    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. webdesignni
    Member

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

  4. webdesignni
    Member

    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. ddoreau
    Member

    @ 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. webdesignni
    Member

    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. webdesignni
    Member

    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. ddoreau
    Member

    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. webdesignni
    Member

    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. ddoreau
    Member

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

  11. ddoreau
    Member

    i tried the code, doesn't work :(

  12. webdesignni
    Member

    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. ddoreau
    Member

    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. ddoreau
    Member

    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. teck07
    Member

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

  16. ddoreau
    Member

    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. webdesignni
    Member

    Your welcome.

  18. masterclasslady
    Member

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

  19. ddoreau
    Member

    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. ddoreau
    Member

    pretty please?

  21. vivianpaige
    Member

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

  22. ddoreau
    Member

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

  23. vivianpaige
    Member

    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. vivianpaige
    Member

    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. thesacredpath
    Member

    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. nickmomrik
    WordPress.com Staff

    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

Tags