The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Horizontal profiles in posts _ PunBB

View previous topic View next topic Go down

Solved Horizontal profiles in posts _ PunBB

Post by Ahmed.K on October 4th 2011, 1:12 pm

Hi,
Is it possible to make The posts in topics like Blog style ?
Thanks.

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

Solved Re: Horizontal profiles in posts _ PunBB

Post by Nera. on October 4th 2011, 1:29 pm

Hi Ahmed,

Do you mean like horizontal profile display in posts for punBB or what?
http://help.forumotion.com/t95673-condensing-the-post-profile#617645

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Horizontal profiles in posts _ PunBB

Post by Ahmed.K on October 4th 2011, 2:28 pm

I mean the posts in topic be like this:


Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

Solved Re: Horizontal profiles in posts _ PunBB

Post by Nera. on October 4th 2011, 2:45 pm

Go to your viewtopic_body template and delete this

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.


Last edited by Nera. on March 25th 2012, 10:21 am; edited 1 time in total

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Horizontal profiles in posts _ PunBB

Post by Ahmed.K on October 4th 2011, 3:23 pm

Something is wrong here, see:
Spoiler:

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

Solved Re: Horizontal profiles in posts _ PunBB

Post by Nera. on October 4th 2011, 3:25 pm

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.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Horizontal profiles in posts _ PunBB

Post by Ahmed.K on October 5th 2011, 1:13 am

Nice. but still there a problems
- There is a space at left.
- No default Avatar.
See:
Spoiler:

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

Solved Re: Horizontal profiles in posts _ PunBB

Post by Nera. on October 5th 2011, 8:11 am

I can not see what you have done Ahmed based on the photo. You need to give me a link.

DID you add CSS?

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Horizontal profiles in posts _ PunBB

Post by Ahmed.K on October 23rd 2011, 1:33 pm

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.

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

Solved Re: Horizontal profiles in posts _ PunBB

Post by Nera. on October 23rd 2011, 4:10 pm

Welcome.

Lock

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


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