albeo blue background for each post
-
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 <3the 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.pngthe colour code is #d7ecf3
-
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.
-
-
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)?
-
@ 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. -
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;}
-
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!
-
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 :)
-
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;
} -
i have png-files for the background. you can find everything in the links of my first post.
-
-
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; } -
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.
-
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;
} -
Wow the blue with the round corners makes that theme look
so much better… To Bad I don’t know CSS Oh well :) -
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; }
-
-
Okay- so I will try this tonight. It looks terrific. Wish me luck http://www.timminsyouthsingers.com
-
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 :)
-
- The topic ‘albeo blue background for each post’ is closed to new replies.
WordPress.com Forums 
