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.

Profile Tables

View previous topic View next topic Go down

Profile Tables

Post by Evilpath on January 28th 2014, 8:59 pm

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

Evilpath
Forumember

Posts : 44
Reputation : 1
Language : English

Back to top Go down

Re: Profile Tables

Post by Sir Chivas™ on January 29th 2014, 4:14 am

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. Smile

Regards,
Sir Chivas.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Re: Profile Tables

Post by Evilpath on January 29th 2014, 11:24 pm

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. Smile

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.

Evilpath
Forumember

Posts : 44
Reputation : 1
Language : English

Back to top Go down

Re: Profile Tables

Post by Kite Trojan on January 30th 2014, 1:56 am

Sir Chivas is talking about this design or .

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Re: Profile Tables

Post by Evilpath on February 2nd 2014, 9:01 am

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.

Evilpath
Forumember

Posts : 44
Reputation : 1
Language : English

Back to top Go down

Re: Profile Tables

Post by Evilpath on February 3rd 2014, 11:52 pm

~Bump

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

Evilpath
Forumember

Posts : 44
Reputation : 1
Language : English

Back to top Go down

Re: Profile Tables

Post by Sir Chivas™ on February 4th 2014, 12:55 am

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;
}



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Re: Profile Tables

Post by Evilpath on February 4th 2014, 1:13 am

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.

Evilpath
Forumember

Posts : 44
Reputation : 1
Language : English

Back to top Go down

Re: Profile Tables

Post by Kite Trojan on February 11th 2014, 5:49 am

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  Add

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 Smile.


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?

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.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