ClosedNew Thread

 Custom profile
moreau
 Posted: September 21st, 2015, 07:30 AM
Quote
Newbie
Posts:2Group:New MemberJoined:September 21st, 2015
Send Message


I should preface this with I am completely new to all of this. I have gotten as far as installing Black's cfs coding but I have no idea how to go about actually writing out the HTML/coding I want for a profile.
That being said, I think I want to go fairly basic? What's a good way to learn how to code a profile? I just want the avatar to the left, then name/posts/age/played by/member group/message links to the right. Nothing too crazy, you know?
Black
 Posted: September 21st, 2015, 08:33 AM
Quote
Finally finished.
Posts:290Group:AdministratorJoined:July 14th, 2013
Send Message


What you want is not too hard, so no worries! You'll want to either use tables or, preferably, floated divs for positioning. A List Apart has a fantastic article about float positioning if it's a new concept to you, and after you master it all kinds of awesome things become possible. I'll also walk you through setting up a simple profile.

I don't offer support for the old version of the script anymore so for this I'll assume you're using the new one.

The custom profile module will automatically wrap your new profile in a div of its own so you won't need to set one of those up in your HTML output, which simplifies things. For a simple two-column layout, all you'll really need are two (three, if you don't want to do anything fancy with your CSS) divs. Ultimately we're going to be working with output like this:

CODE
<!-- This first div is the one the script automatically generates. -->
<div id="new-profile">
   <!-- Everything inside of it will be defined by us. -->
   <div class="custom-profile-left">
       <img src="(Avatar URL)" />
   </div>
   <div class="custom-profile-right">
       Other stuff!
   </div>
   <!-- This is necessary for managing your floated elements: -->
   <div style="clear: both;"></div>
   <!-- Thus ends our user-defined html. -->
</div>


For this example I'm also going to include the optional config object and redefine a default value, avatarDefault. Any user who doesn't have an avatar on their profile will use the image at the URL you assign to this configuration value instead- which is nice when you want to enforce some uniformity in your layout.

CODE
<% BOARD %>
<script>customProfile.initialize({
   config: {
       avatarDefault: 'http://placehold.it/200x200.png'
   },
   html: '<div class="custom-profile-left"><img src="{{avatar}}" /></div><div class="custom-profile-right">Other stuff!</div><div style="clear:both;"></div>'
});
</script>


If you leave this as-is, you won't see anything special. That's where the CSS floats come in. In your CSS, add something like this:

CODE
.custom-profile-left {
   float: left;
   width: 300px;
}
.custom-profile-right {
   float: right;
   width: 300px;
}


Et voila! You'll probably need to tweak some sizes and things, but this is more-or-less how I'd go about coding a two-column profile using my script.
moreau
 Posted: September 21st, 2015, 08:56 AM
Quote
Newbie
Posts:2Group:New MemberJoined:September 21st, 2015
Send Message


Thank you! This helps a lot. I'm still so new and it's kind of frustrating at times, haha. I appreciate it. smile.gif



This thread has been archived
Reason: This help request has been completed by Black. Thanks!

Topic Options ClosedNew Thread


 


 

Latest Shouts In The Shoutbox -- View The Shoutbox · Rules   


's reputation