Horizontal profiles in posts _ PunBB
Ahmed.K at 13h12
04
Oct
2011
Hi,
Is it possible to make The posts in topics like Blog style ?
Thanks.
Is it possible to make The posts in topics like Blog style ?
Thanks.
1 Nera., on 04/10/2011 at 13h29
Hi Ahmed,
Do you mean like horizontal profile display in posts for punBB or what?
/t95673-condensing-the-post-profile#617645
Do you mean like horizontal profile display in posts for punBB or what?
/t95673-condensing-the-post-profile#617645
2 Ahmed.K, on 04/10/2011 at 14h28
I mean the posts in topic be like this:
3 Nera., on 04/10/2011 at 14h45
Go to your viewtopic_body template and delete this
Replace it with this
Than add this to CSS
And this is the resault
http://movingagain.forumcroatian.com/t19-horizontal-post-profile#64
Sorry just now saw it's not what you wanted, have not payed attention on the photo, will check it latter.
- Code:
<div class="postbody"{postrow.displayed.THANK_BGCOLOR}>
<div class="user">
<div class="user-ident">
<h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
<div class="user-basic-info">
{postrow.displayed.POSTER_AVATAR}
{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
</div>
</div>
<div class="user-info">
{postrow.displayed.ONLINE_IMG}
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</div>
</div>
Replace it with this
- Code:
<table width="100%" style="border-bottom: 1px solid #c3dab5;background: #fff url('YOUR IMAGE LINK HERE3') bottom repeat-x;"><tr><td width="100px;" style="margin-left: 10px;">{postrow.displayed.POSTER_AVATAR}</td>
<td><div class="user-ident">
<h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
</div>{postrow.displayed.ONLINE_IMG}<br /{postrow.displayed.POSTER_RANK_NEW}
{postrow.displayed.RANK_IMAGE}</td><td style="float: right;"><div class="user-info">
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</div></td></tr></table>
<div class="postbody"{postrow.displayed.THANK_BGCOLOR}>
Than add this to CSS
- Code:
.pun .user-ident .username {
position: relative !important;
}
.pun .postbody {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: url("YOUR IMAGE LINK HERE1");
background-origin: padding-box;
background-position: 50% 100%;
background-repeat: repeat-x;
background-size: auto;
width: 100%;
}
.pun .post {
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: rgb(195, 218, 181);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-left-color: rgb(195, 218, 181);
border-left-style: solid;
border-left-width: 2px;
border-right-color: rgb(195, 218, 181);
border-right-style: solid;
border-right-width: 2px;
border-top-color: rgb(195, 218, 181);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: solid;
border-top-width: 2px;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
}
.postfoot {
clear: both;
margin-right: 0em;
border-top: 1px solid #c3dab5;
padding: 0.5em 1em;
text-align: right;
background-color: rgb(255, 255, 255);
background-image: url("YOUR IMAGE LINK2");
background-origin: padding-box;
background-position: 50% 100%;
background-repeat: repeat-x;
}
.pun .posthead {background-color: #COLOR HERE;}
.pun .postmain {
background-color: #ecf3f7;
border-left: 1px solid #ffffff;
margin-right: 0px;
}
And this is the resault
http://movingagain.forumcroatian.com/t19-horizontal-post-profile#64
Sorry just now saw it's not what you wanted, have not payed attention on the photo, will check it latter.
4 Ahmed.K, on 04/10/2011 at 15h23
Something is wrong here, see:
- Spoiler:
5 Nera., on 04/10/2011 at 15h25
Did you add CSS? All is OK on the link I gave you. I did it the way I showed you here.
P.S. Put the profile position in messages to right in AP.
P.S. Put the profile position in messages to right in AP.
6 Ahmed.K, on 05/10/2011 at 01h13
Nice. but still there a problems
- There is a space at left.
- No default Avatar.
See:
- There is a space at left.
- No default Avatar.
See:
- Spoiler:
7 Nera., on 05/10/2011 at 08h11
I can not see what you have done Ahmed based on the photo. You need to give me a link.
DID you add CSS?
DID you add CSS?
8 Ahmed.K, on 23/10/2011 at 13h33
It works fine now with this code:
.pun .postmain {
margin-left: 0em;
}
Instead of this:
.pun .postmain {
background-color: #ecf3f7;
border-left: 1px solid #ffffff;
margin-right: 0px;
}
Thanks Nera.
.pun .postmain {
margin-left: 0em;
}
Instead of this:
.pun .postmain {
background-color: #ecf3f7;
border-left: 1px solid #ffffff;
margin-right: 0px;
}
Thanks Nera.
9 Nera., on 23/10/2011 at 16h10
Welcome.
Lock
Lock
Similar topics
I'm gonna be adding a new emoticon section with layout objects in it, to get to it click on "View more Emoticons."
Currently there isn't actually anything other than the default emoticon section but once it's added the title will be pretty
Alright,so me with Gangstar15 tried to make a template for my upcoming site version..and at the code there was a horizontal line which if i removed messed up the whole template.
Code:<hr style="margin-top: 250px; height: 1px;
I have decided to go with either phpbb2 or punBB due to both of them offering template editing and phpbb3 doesn't but I am having a hard time figuring out which one is better and which on I should use. Which one do you guys like better and why? I value al
Replies 1 to 9 on 9 for "Horizontal profiles in posts _ PunBB"
Search
See also
Informations
9 Replies For the topic :
"Horizontal profiles in posts _ PunBB"
This topic has been viewed 969 times.
Last message :
04/10/2011 at 13h12 by "Ahmed.K"
