WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » How do I make the postbody like this

View previous topic View next topic Go down  Message [Page 1 of 1]

1How do I make the postbody like this Empty How do I make the postbody like this Fri Oct 01, 2010 2:04 am

Matti

Matti
Registered Member
Registered Member
How do I make the postbody like in this screen shot:

How do I make the postbody like this This18

I already have border-radius as you can see on my Test forum but I want to make it just like in the screen shot with arrow on left.

The current code for postbody:
Code:

.postbody {
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
padding : 5px;
background : #FFF;
border : 1px solid #4073a6;
}

http://csshelp.forumotion.net/

2How do I make the postbody like this Empty Re: How do I make the postbody like this Fri Oct 01, 2010 2:08 am

blindbat1457


Registered Member
Registered Member
Can you link me to the forum with the speech bubble?

It is an image.
So you need to add:
Code:
background-image:URL('IMAGEURL');
background-repeat:no-repeat;

3How do I make the postbody like this Empty Re: How do I make the postbody like this Fri Oct 01, 2010 2:22 am

Unknown Data

Unknown Data
Registered Member
Registered Member
Also remember the padding and margin or it all will get messed up Wink

http://woops.dk

4How do I make the postbody like this Empty Re: How do I make the postbody like this Fri Oct 01, 2010 2:40 am

Emilio

Emilio
Registered Member
Registered Member
I was searching for this to...

http://www.graphilicious.forumotion.Com

5How do I make the postbody like this Empty Re: How do I make the postbody like this Fri Oct 01, 2010 3:03 pm

ankillien

ankillien
Administrator
Administrator
Hello,

I can't take images from that forum. Can someone create a speech bubble image? I will give the CSS code.

6How do I make the postbody like this Empty Re: How do I make the postbody like this Fri Oct 01, 2010 5:52 pm

Matti

Matti
Registered Member
Registered Member
Are you guys saying this will only work with an image?

blindbat1457, I have send u a pm with the link.

http://csshelp.forumotion.net/

7How do I make the postbody like this Empty Re: How do I make the postbody like this Fri Oct 01, 2010 5:59 pm

ankillien

ankillien
Administrator
Administrator
Maki wrote:Are you guys saying this will only work with an image?

Yes, we need to have an arrow/speech bubble image.

8How do I make the postbody like this Empty Re: How do I make the postbody like this Fri Oct 01, 2010 6:04 pm

Matti

Matti
Registered Member
Registered Member
Hmm... I have no idea how to make that arrow.

http://csshelp.forumotion.net/

9How do I make the postbody like this Empty Re: How do I make the postbody like this Fri Oct 01, 2010 6:07 pm

ankillien

ankillien
Administrator
Administrator
For phpBB3, this code will do most the things...

Code:
.postbody .content {
background: #FFF;
padding: 10px;
border: 1px solid blue;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

But it won't show an arrow.

10How do I make the postbody like this Empty Re: How do I make the postbody like this Fri Oct 01, 2010 11:41 pm

Emilio

Emilio
Registered Member
Registered Member
I can handle it a speech bubble arrow?...

http://www.graphilicious.forumotion.Com

11How do I make the postbody like this Empty Re: How do I make the postbody like this Sat Oct 02, 2010 1:34 am

blindbat1457


Registered Member
Registered Member
Code:
.bubble-top {
background-image:url("http://forumpromotion.net/forum/styles/FPX/theme/images/bubble-top.png");
background-repeat:no-repeat;
height:34px;
margin-right:1px;
margin-top:2px;
padding-left:25px;
padding-top:2px;
width:707px
}

Code:
.bubble-middle {
background-image:url("http://forumpromotion.net/forum/styles/FPX/theme/images/bubble-middle.png");
background-repeat:repeat-y;
color:#001B28;
font-family:Verdana,Geneva,sans-serif;
font-size:13px;
height:100%;
line-height:17px;
margin-left:15px;
min-height:265px;
padding:10px;
width:697px;
}

Code:
.bubble-bottom {
background-image:url("http://forumpromotion.net/forum/styles/FPX/theme/images/bubble-bottom.png");
background-repeat:no-repeat;
height:5px;
margin-bottom:2px;
margin-left:15px;
width:717px;
}
So what they did was create three separate div classes which is all images.
Not sure how to code that but let me test it out on my test forum and I will get back to you.

I think this will require template editing. I could be wrong but I think it will.



Last edited by blindbat1457 on Sat Oct 02, 2010 1:44 am; edited 1 time in total

12How do I make the postbody like this Empty Re: How do I make the postbody like this Sat Oct 02, 2010 1:41 am

Matti

Matti
Registered Member
Registered Member
Do I need to put all of them or I'm gonna wait for the current code.

http://csshelp.forumotion.net/

13How do I make the postbody like this Empty Re: How do I make the postbody like this Sat Oct 02, 2010 1:52 am

blindbat1457


Registered Member
Registered Member
Maki wrote:Do I need to put all of them or I'm gonna wait for the current code.

Well I am not sure what to do with phpbb for forumotion so you might have to wait till someone posts.

Because if I were to achieve this I would template edit which requires phpbb2 or punbb

14How do I make the postbody like this Empty Re: How do I make the postbody like this Sat Oct 02, 2010 9:43 am

ankillien

ankillien
Administrator
Administrator
I think it can be done without template editing. I'll try making a bubble image and give it a go in my test board.

Easier way would be to do it with template editing.

15How do I make the postbody like this Empty Re: How do I make the postbody like this Sat Oct 02, 2010 5:42 pm

Matti

Matti
Registered Member
Registered Member
Yeah but you know that phpBB3 don't have template editing. So if there is no other way to do that then we lock this topic.

http://csshelp.forumotion.net/

16How do I make the postbody like this Empty Re: How do I make the postbody like this Sun Oct 03, 2010 11:03 am

ankillien

ankillien
Administrator
Administrator
It can be done without template editing. I'll give you a solution soon.

17How do I make the postbody like this Empty Re: How do I make the postbody like this Mon Oct 04, 2010 1:13 am

Matti

Matti
Registered Member
Registered Member
ok I'm waiting for you Very Happy

http://csshelp.forumotion.net/

18How do I make the postbody like this Empty Re: How do I make the postbody like this Mon Oct 04, 2010 12:58 pm

ankillien

ankillien
Administrator
Administrator
This is the full code...

Code:
.postbody {
background: transparent url(http://c.imagehost.org/0975/bub.png) no-repeat 640px 75px;
}

.postbody .content {
background: #FFF;
padding: 10px;
margin-right: 20px;
border: 1px solid blue;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

The code is not perfect since it depends on your forums width and on which side the post profile shown up.

On this forum it looks like this...
http://c.imagehost.org/0883/p1.png
http://c.imagehost.org/0188/p2.png

19How do I make the postbody like this Empty Re: How do I make the postbody like this Tue Oct 05, 2010 12:23 am

Matti

Matti
Registered Member
Registered Member
Thank you guys this can be locked Enjoy

http://csshelp.forumotion.net/

20How do I make the postbody like this Empty Re: How do I make the postbody like this Tue Oct 05, 2010 8:33 am

ankillien

ankillien
Administrator
Administrator
Glad I could help Very Happy

Solved | Locked

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » How do I make the postbody like this

Permissions in this forum:
You cannot reply to topics in this forum