Profile Tables

Hello, I was browsing some forums for ideas on re-designing my forum (not that I'd have much luck, I fail with coding) and I was wondering how forums get what looks like a table around their username, avatar, ranks, and mini-profile fields in topics.  Here are two examples:






EDIT:  I can't get the pictures to work right, so uh, I'll link them instead.
http://gyazo.com/4cac2b18e32ed499e9f83f1279658c75.png
http://gyazo.com/8c64231e5ee5b2cfe9325b664bbb0321.png


EDIT2: How do you make comments in separate boxes like they are here?


http://gyazo.com/72fdf4b6795437ff37a2aade3df509b8.png

Hi,

The separating posts can be done via CSS, however, adding a border to certain areas might require template editing, which only the following version are able to access the templates: phpBB2 and punBB

Can you please provide your forum URL and tell us which design do you wish, thank you.

Regards,
Sir Chivas.

Sir Chivas wrote:Hi,

The separating posts can be done via CSS, however, adding a border to certain areas might require template editing, which only the following version are able to access the templates: phpBB2 and punBB

Can you please provide your forum URL and tell us which design do you wish, thank you.

Regards,
Sir Chivas.

Sorry it took so long to reply to this, I'd almost completely forgotten about it with my other issue.  http://orichalcosforums.forumotion.com/

That is my forum URL, but I do not know what you mean by which design I would like.

Sir Chivas is talking about this design or .

Xnomejx wrote: Sir Chivas is talking about this design or .

Sorry, I couldnt see pictures for awhile so I had no clue on what you were talking about.  Anyways, I wouldn't prefer either, I was just hoping for the basic code that I could customize myself... unless there is no basic code shared between both of these, in which case I'd prefer this lower one, but I'll need to color edit and such.

Also:  I would like to be able to attach them to certain ranks/groups.

~Bump

EDIT:  What is the CSS you were referring to that separates posts?

Try seeing if this works separating the posts:

Code:

th.thHead, td.catHead {
font-size: 11px;
border-width: 1px 1px 0 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Sir Chivas™ wrote:Try seeing if this works separating the posts:

Code:

th.thHead, td.catHead {
font-size: 11px;
border-width: 1px 1px 0 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Sorry, this did not work... it instead changed the topic title that was displayed inside the topic, at the top.

I can provide you the steps for this only. The Blue Border one. Still get confused on the codes things, but anyways lets get coding!


First open your templates: ACP >> Display >> Templates >> General >> viewtopic_body, find

Code:

{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

Replace with:

Code:

<div class="border1">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>

Save and  

Goto your CSS Stylesheet.

Then add this into your CSS: ACP >> Display >> Colors >> CSS:

Code:

.border1 {
background: url(URLofIMG) 50% 100% no-repeat;
border: 1px solid rgb(0, 0, 0);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
border-radius: 2px;
box-shadow:
 rgba(255, 255, 255, 0.0784314) 0px 0.5px 0px inset, rgba(255, 255, 255,
 0.0196078) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.901961) 0px 0.5px
1.5px;
color: rgb(0, 40, 85);
font-weight: 700;
margin: 2px 15px;
padding: 3px 5px;
text-align: left;
}

This code can make like boxes around the profile text. You may add these to your wish.


Make sure you change URLofIMG with your own background .


Then add this again to your CSS Stylesheet.

Code:


.poster-profile {
      background:  url("URLofIMG") repeat scroll 0px 0px rgb(14, 14, 14); !important
}

    .postprofile1 {
          background:  url("URLofIMG") no-repeat scroll center bottom transparent; !important
    }

Then again, add these codes into your CSS.

Code:

   .post span.name {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgb(14, 14, 14);
    background-image: url(URLOFIMG);
    background-origin: padding-box;
    background-position: 0px 0px;
    background-repeat: repeat;
    background-size: auto;
    border-bottom-color: rgb(15, 15, 15);
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-left: 2px solid rgb(2, 123, 204);
    border-right: 2px solid rgb(2, 123, 204);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: rgba(255, 255, 255, 0.0784314) 0px 1px 0px inset, rgba(255, 255, 255, 0.0196078) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.901961) 0px 1px 3px;
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    padding: 10px 0px;
    position: static;
    text-align: center;
    z-index: 100;
    }
    .poster-profile {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgb(14, 14, 14);
    background-image: url(URLOFIMG);
    background-origin: padding-box;
    background-position: 0px 0px;
    background-repeat: repeat;
    background-size: auto;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 2px solid rgb(2, 123, 204);
    border-right: 2px solid rgb(2, 123, 204);
    box-shadow: rgba(255, 255, 255, 0.0784314) 0px 1px 0px inset, rgba(255, 255, 255, 0.0196078) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.901961) 0px 1px 3px;
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: -20px;
    padding-bottom: 10px;
    padding-top: 10px;
    position: relative;
    text-align: center;
    top: 0px;
    width: 200px;
    z-index: 99;
    }

Credits goes to Sir Chivas for helping me back in the past.

Why not try that?