albeo blue background for each post

  • Author
    Posts
  • #262151

    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

    #262382

    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.

    #262384

    webdesignni
    Member

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

    #262385

    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)?

    #262387

    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.

    #262390

    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;

    }

    #262392

    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!

    #262393

    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 :)

    #262394

    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;
    }

    #262395

    ddoreau
    Member

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

    #262397

    ddoreau
    Member

    i tried the code, doesn’t work :(

    #262398

    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; }

    #262404

    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.

    #262409

    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;
    }

    #262411

    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 :)

    #262420

    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; }

    #262422

    webdesignni
    Member

    Your welcome.

    #262434

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

    #262508

    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 :)

    #262519

    ddoreau
    Member

    pretty please?

The topic ‘albeo blue background for each post’ is closed to new replies.