1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.



Jcink miniprofiles (table)

Discussion in 'IPB 1.3' started by loveley, Aug 18, 2012.

  1. Offline

    loveley awesome penguin

    Member Since:
    Sep 6, 2011
    Total Posts:
    63
    Likes Received:
    28
    Software: Jcink
    Difficulty: moderate
    Written by: loveley
    Coding help / Inspiration: ~
    Preview:
    [IMG] [IMG]
    Also: http://vieta.b1.jcink.com user: test/psw: test
    What it does: It adds table-like miniprofile to your board skin
    Installation Instructions: below
    Code: below

    Preparing:
    1. make your avatar pictures 150x200 or whatever size you want: System Settings -> User Profiles -> Maximum avatar dimensions 150x200
    2. Create custom profile fields for your needs (Users and Groups -> Custom Profile Fields), in this example I'll create: Age, Profession, App, Plot, Played by, Random field 1
    3. I'll enable reputation system as well, as I want to include it (System settings -reputation set up)
    4. I'll also enable Show online/offline status in posts? (Board Settings -> Topics, Posts and Posting)
    5. Go to your Skins & Templates -> Profile Templates and enable first three settings (Enable custom mini profile templates? , Enable use of Custom Profile Field variables in templates? Required to use <!-- |field_#| --> variables. and Override all individual skin templates with YOUR 'Default' template IF left blank?).
    Different miniprofile versions:

    Version 1 Very simple miniprofile without styles would be like this:
    Code: Select
    <!-- |avatar| -->
    <!-- |g_title| -->
    <a href="<!-- |field_3| -->">app</a> <a href="<!-- |field_4| -->">plot</a>
    <!-- |field_5| --> <!-- |status| -->
    <a href="http://BOARDNAME.b1.jcink.com/index.php?act=Search&CODE=getalluser&mid=<!-- |id| -->"><!-- |posts| --></a> <!-- |field_1| -->
    <!-- |field_6| -->
    <!-- |field_2| -->
    <!-- |rep| --> <!-- |rep_options| -->
    <!-- |title| -->
    it just displays all needed fields.

    Version 2 When I add classes to it, it looks like this:
    Code: Select
    <center><!-- |avatar| --></center><div class="m_big"><!-- |g_title| --></div><div class="m_left"><a href="<!-- |field_3| -->">app</a></div> <div class="m_right"><a href="<!-- |field_4| -->">plot</a></div>
    <div class="m_left"><!-- |field_5| --></div> <div class="m_right"><!-- |status| --></div>
    <div class="m_left"><a href="http://BOARDNAME.b1.jcink.com/index.php?act=Search&CODE=getalluser&mid=<!-- |id| -->"><!-- |posts| --></a></div> <div class="m_right"><!-- |field_1| --></div>
    <div class="m_big1"><!-- |field_6| --></div><div class="m_big"><!-- |field_2| --></div><div class="m_big"><!-- |rep| --> <!-- |rep_options| --></div><div class="m_big"><!-- |title| --></div>
    As you can see, I also removed some of "enter" spaces because jcink miniprofiles interpret "enter" as <br /> tag, making free line and I'm in no need for them. If your template looks not like mine after you edit it, then first thing - check "enter" spaces.

    Version 3 Third version of miniprofile has a little javascript in it: it displays "none" instead of "app" or "plot" if user has not edited app or plot link.
    Code: Select
    <center><!-- |avatar| --></center><div class="m_big"><!-- |g_title| --></div><div class="m_left"><script>if('<!-- |field_3| -->' == 'N/A') { document.write('none');}else{ document.write('<a href="<!-- |field_3| -->">app</a>');} </script></div> <div class="m_right"><script>if('<!-- |field_4| -->' == 'N/A') { document.write('none');}else{ document.write('<a href="<!-- |field_3| -->">plot</a>');} </script></div>
    <div class="m_left"><!-- |field_5| --></div> <div class="m_right"><!-- |status| --></div>
    <div class="m_left"><a href="http://BOARDNAME.b1.jcink.com/index.php?act=Search&CODE=getalluser&mid=<!-- |id| -->"><!-- |posts| --></a></div> <div class="m_right"><!-- |field_1| --></div>
    <div class="m_big1"><!-- |field_6| --></div><div class="m_big"><!-- |field_2| --></div><div class="m_big"><!-- |rep| --> <!-- |rep_options| --></div><div class="m_big"><!-- |title| --></div>
    Different CSS versions:
    You can use this CSS with miniprofile template Version 2 and Version 3.
    Add CSS to your skin stylesheet.

    First CSS version will give you this look:
    [IMG]

    Code: Select
    .m_big {
    background: #e0d9c6;
    height: 16px;
    vertical-align: middle;
    display: block;
    margin: 2px 3px 3px 3px;
    padding-top: 2px;
    }
     
    .m_big1 {
    background: #e0d9c6;
    height: 16px;
    vertical-align: middle;
    display: block;
    margin: 24px 3px 3px 3px;
    padding-top: 2px;
    }
     
     
    .m_left {
    background: #e0d9c6;
    width: 74px;
    float: left;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
    margin: 0px 0px 3px 2px;
    padding-top: 2px;
    }
     
    .m_right {
    background: #e0d9c6;
    width: 74px;
    float: right;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
    margin: 0px 3px 3px 0px;
    padding-top: 2px;
    }
    Second CSS version will give you this look:
    [IMG]

    Code: Select
    .m_big {
    background: #E0D9C6;
    height: 16px;
    vertical-align: middle;
    display: block;
    padding-top: 2px;
    border: 1px solid #DDCBCB;
    }
     
    .m_left {
    background: #E0D9C6;
    width: 78px;
    float: left;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
    padding-top: 2px;
    border: 1px solid #DDCBCB;
    }
     
    .m_right {
    background: #E0D9C6;
    width: 78px;
    float: right;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
    padding-top: 2px;
    border: 1px solid #DDCBCB;
    }
     
    .m_big1 {
    background: #E0D9C6;
    height: 16px;
    vertical-align: middle;
    display: block;
    margin: 21px 0px 0px 0px;
    padding-top: 2px;
    border: 1px solid #DDCBCB;
    }

    Also find .postdetails class in your CSS add add this:
    Code: Select
    .postdetails {
    text-align: center;
    }

    Tips:
    * You can edit colors, fonts, backgrounds..
    * If you add or remove boxes, make sure that after div with class ".m_right" comes div with class ".m_big1".
    * If div ".m_big1" is not right size, try editing first parameter of margin.
    Lily Lilac, gazdy and Abby like this.
  2. Offline

    beyondthexsea roosterteeth is love. roosterteeth is life.

    Member Since:
    Jan 23, 2012
    Total Posts:
    791
    Likes Received:
    563
    • Awards
    I'm trying to use this on my board, but whenever I put it up, it looks like this:

    [IMG]

    The text is pushed to the top of the boxes and then some of them overlap.
  3. Offline

    Bill the Bloody ^deluded^

    • Helpful Coder
    Member Since:
    Nov 19, 2012
    Total Posts:
    507
    Likes Received:
    94
    Gender:
    Female
    Location:
    Wales, UK
    • Awards
    i really do suck with profile codes, have tried a few different tutorials and different custom templates but i can't get anything to work right.
    example

    v3 used above and the css has been added etc... i didn't know what to for the reputation and a few of the other pieces.
    i think you should consider wording the tutorial better. step by step instruction for each of the input/fields instead of just enable.
    Also if anyone could help me i'd appreciate it.
  4. Offline

    Rue warri I woke up to see the sun shinning all around me!

    Member Since:
    Apr 12, 2013
    Total Posts:
    158
    Likes Received:
    18
    Gender:
    Female
    Location:
    NJ USA
    ;~; it didnt work for me at all.. i dont know what i did wrong..

Share This Page