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.

Post Profile

View previous topic View next topic Go down

Solved Post Profile

Post by Kaizer Lee on November 7th 2013, 5:03 pm

Hello

Okie, dokie, anyway, I know there's a neat way of doing this via Javascript but due to the amount of my current Javascript and the ones I plan to install soon, I cannot risk fondling it more Smile.

Anyway, here's my question, how do you add background colors or images or whatever to the Post Profile field via CSS?

As an example, please look here: http://www.duelingcity.net/t573-this-is-just-too-pro-xd Do you see the profile? It looks really neat.

I'd like to do that without using Javascript as much as possible so I came up with something like this:

Code:
.selector, .selector {
background-image:url('IMG LINK/BG for that matter')
max-height: 100%;
max-width: 100%;
}
Or, this:

Code:
.selector, .selector {
background-color: #141414
Other edits blablabla
}
Anyway, I really have a hard time figuring out the selectors for the profile area. Why? I don't know.

But yes, it would really help if someone can find out the selectors I can use and as much as possible, I'd like the "Name", "Background for the whole Post Profile, and the post profile's detail selectors as much as possible x.x.

It would also really help a lot if someone can correct if I'm wrong or provide another method for this one.

Lastly, if no one can figure it out and I can figure it out myself after sometime, I'll gladly share how I did it Smile.

Best Regards,
Kaizer Lee

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Post Profile

Post by Ange Tuteur on November 7th 2013, 7:47 pm

Hello Kaizer Lee,

I believe that can be done with editing of the viewtopic_body template to add your own classes.

You have to find this piece:
Code:
<strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
 <span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
Say you just want to add a border around all of those profile fields.. You would wrap the content with some tags that have a class like this: <span class="profile-border"> </span>
Code:
<span class="profile-border"><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
 <span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
Once we do that we save the template and publish it. Then we add our CSS:
Code:
.profile-border{
border:1px solid #f00;
}
You can add as much classes as you want to all the variables if you want to fully customize everything. If you have any questions let us know. Wink

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Post Profile

Post by Kaizer Lee on November 7th 2013, 9:32 pm

I know as stupid as this sounds, but I haven't really gotten much back into coding. The best I can do with the code you provided is just adding a few padding and noticing that when I exceed at least 2 or 3, the border goes beyond the page and up until the Table pics.

Is it possible if you can give me a full CSS code? I'll just add in a few stuff.

Also, if you noticed in the link I gave, the one with your "Profile-border" has a different style, It looks like it has a bit of a webkit radius or w.e. Are they different selectors?

Also, is it possible (This is the best that my mind can come up with:

Code:
.profile-border{
  border:1px solid #f00
  }
Changed to this:

Code:
.profile-border{
  background-image:url('IMG LINK');
  }
Let's just imagine I made a sort of background picture for the name and then incorporate it into this:

Code:

.profile-border{
  background-image:url('IMG LINK');
  background-repeat: no-repeat;
  background-color:#FFF;
  border:1px solid #000;
  box-shadow:0px 0px 6px #000 inset;
  }
^ Is the above code possible? Sorry, that's the best my mind can think up of. Also, if ever, would adding -webkit-border-radius instead of border-radius or -moz-border-radius be more effective in using that or not?

Edit: LOL. Tried the code I did, I messed up good xD, please help lol :wouhou:

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Post Profile

Post by Ange Tuteur on November 7th 2013, 9:47 pm

I actually did something similar when I used phpbb2:

For the tags use this: <div class="post_profile"></div>
That should display the profile as a block and add some margin as well.

I looked through my old documents for my phpbb2 CSS and this is what I used:
Code:
div.post_profile{
border-left:1px solid #999;
border-right:1px solid #999;
border-top:4px solid #1A90D6;
border-bottom:4px solid #999;
border-radius:5px;
background:#f0f0f0;
padding:5px;
}
You can place really anything in the CSS, background images included. Wink

-webkit-, -moz-, -o-, -ms- are for browser compatibilities. I don't believe they'll be needed, so just stick with border-radius. You can check support for properties here: http://www.w3schools.com/cssref/css3_browsersupport.asp

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Post Profile

Post by Kaizer Lee on November 7th 2013, 9:54 pm

Merci, (I suck at French) lol

Anyway, thanks a lot. I guess I could just use the same selectors you gave me (Div) for the post details if I ever feel so and just make sure it blends properly with the colors.

Thanks a lot for your help, Seth Very Happy

Good luck with future endeavors,
Kaizer Lee

Edit: Last one question, what's the selector for the spackground color? Or can I just adjust it in the Color settings? Am confused so much x_x


Last edited by Kaizer Lee on November 7th 2013, 10:04 pm; edited 1 time in total

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Post Profile

Post by Ange Tuteur on November 7th 2013, 10:00 pm

You're welcome, can we consider this solved?

Thanks

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Post Profile

Post by Kaizer Lee on November 7th 2013, 10:05 pm

Sorry, you posted before I managed to:

Edit: Last one question, what's the selector for the spackground color? Or can I just adjust it in the Color settings? Am confused so much x_x

That's the one I said in the above one. I just wanna blend them right lol.

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Post Profile

Post by Ange Tuteur on November 7th 2013, 10:26 pm

Oh, the background color for the entire post or just the postprofile?

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Post Profile

Post by Kaizer Lee on November 8th 2013, 3:42 am



Actually, can you just provide me with a code for that? I finished installing the javascripts and I'd like to risk them for a bit, if not, I'll stick with the ones you provided; however, if you can provide the code in the image, that'll really help since I'm not that great with Javascript.

Am still studying the forum js after all lel

Thanks for the help in advance Very Happy

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Post Profile

Post by Ange Tuteur on November 8th 2013, 4:42 am

This shouldn't require any scripts, only some CSS and a bit of template editing.

First add this to your CSS stylesheet and submit:
Code:
.post .name {
display: block;
text-align:center;
background:#161616;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.02) inset, 0px 1px 3px rgba(0, 0, 0, 0.9);
padding:20px 0px 10px 0px;
margin:10px 10px 0px 10px;
border-radius: 5px 5px 0px 0px;
border-top: 2px solid #300;
}
.poster-profile {
display:block;
position:relative;
top:-30px;
text-align:center;
width:200px;
background:#161616;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.02) inset, 0px 1px 3px rgba(0, 0, 0, 0.9);
margin:10px 10px 15px 10px;
border-radius:0px 0px 5px 5px;
border-bottom:5px solid #300;
}
.profile_field {
text-align:left;
background:#111;
width:180px;
height:15px;
border-width:1px 2px 2px 1px;
border-style:solid;
border-color:#000;
display:block;
padding:2px 0px 2px 3px;
margin:0px 0px 2px 5px;
color:#900;
}
Then navigate to..
Display > Templates > General > open viewtopic_body

Find:
Code:
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
Replace with:
Code:
<span class="profile_field">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span>
Save, publish, and you should be good! Wink

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Post Profile

Post by Kaizer Lee on November 8th 2013, 5:33 am

Sorry for the late reply, but there's a bit of a problem:



As you can see, some of the wordings don't fit. Should I just change the Profile_field height to a bigger number?

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Post Profile

Post by Ange Tuteur on November 8th 2013, 5:40 am

Apologies, that's my mistake try using this on the height property for the profile_field.

Code:
min-height:15px;
height:auto;

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Post Profile

Post by Kaizer Lee on November 8th 2013, 5:48 am

Guess, what I did was right then o.o

This problem is officially solved.

Thanks a lot again Seth Very Happy.

I'll just tweak this to my liking some other time once I master CSS again lol :3

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Post Profile

Post by Ange Tuteur on November 8th 2013, 5:49 am

You're welcome.

Topic Solved & Archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

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