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



text & table alignment in the jcink miniprofile

Discussion in 'Solved Support Topics' started by aeroglisseur, Nov 8, 2012.

  1. Offline

    aeroglisseur faster than 80% of all snakes

    Member Since:
    Nov 28, 2011
    Total Posts:
    66
    Likes Received:
    43
    Gender:
    Female
    Board Software: JCink
    Problem With: Miniprofile
    Problem: I'm having an incredibly difficult time trying to get the tables in my miniprofile to center but still have a small space between them, as well as center my text and get a background image to fill the whole miniprofile, not just behind the icon. Any help would be appreciated, I've been tweaking little things for ages and haven't quite gotten it right.
    Evidence:
    Board Link: http://kelseystester.b1.jcink.com/index.php?showtopic=1&st=0&#entry1
    Screenshot:
    [IMG]
    Miniprofile Code:
    Code: Select
    <center><div style="background-color:#ebebeb; padding:20px; background-image:url(http://i.imgur.com/ICb9O.png);"><span class='avatarSpan'><!-- |avatar| --></span></center><div class="m_big"><!-- |field_10| --></div><div class="m_left"><script>if('<!-- |field_3| -->' == 'N/A') { document.write('none');}else{ document.write('<a href="<!-- |field_6| -->">app</a>');} </script></div> <div class="m_right"><script>if('<!-- |field_7| -->' == 'N/A') { document.write('none');}else{ document.write('<a href="<!-- |field_6| -->">plot</a>');} </script></div>
    <div class="m_left"><!-- |g_title| --></div> <div class="m_right"><!-- |field_9| --></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_8| --></div>
    <div class="m_big1"><!-- |field_5| --> is <!-- |status| --></div></div>
    Miniprofile CSS:
    Code: Select
    .m_big {
    height: 50px;
    text-align: center;
    font-size: 11px;
    font-style: italic;
    vertical-align: middle;
    padding-top: 10px;
    padding-left: 25px;
    padding-right: 25px;
    width: 170px;
     
    }
     
    .m_left {
    background: #f1f1f1;
    opacity:0.7;
    width: 90px;
    float: left;
    height: 19px;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    }
     
    .m_right {
    background: #f1f1f1;
    opacity:0.7;
    width: 90px;
    float: right;
    height: 19px;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    }
     
    .m_big1 {
    height: 50px;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    vertical-align: middle;
    padding-top: 30px;
    padding-left: 25px;
    padding-right: 25px;
    width: 170px;
    }
  2. Online

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,309
    Likes Received:
    6,079
    Gender:
    Female
    Location:
    USA
    • Awards
    Instead of using a div style for the main background and image, have you tried using a bigger class to encompass all of it, such as div class=postbit or something similar? That's what I tend to use in order to give the full background image and box that would hold all the content in it.

    To create spaces between the boxes ensure you have margins set at 1 or 2 pixels, depending on how you want them to space. My recommendation is to look at say m_left and decide you need a 1px margin on the bottom and the right side, even the top if you need to separate it. Choose the sides that touch the other blocks and work from there.

    Also, where is the class element for avatarSpan or am I just not reading that right?
    aeroglisseur likes this.
  3. Offline

    aeroglisseur faster than 80% of all snakes

    Member Since:
    Nov 28, 2011
    Total Posts:
    66
    Likes Received:
    43
    Gender:
    Female
    How would I do that, the postbit? I honestly haven't done a skin by hand in years and I'm woefully behind on my coding skills.

    The margins will keep a space between the left and the right, correct? Is the only way to center them to remove the float left and float right commands? Thanks for your help.

    And you didn't miss it, I just forgot that it was a code I had in. The script for the default avatar is

    Code: Select
    <script type='text/javascript'>
    //Default avatar for JFB
    //Created by posiden5665
     
    defaultAvatarURL = "http://placehold.it/200x300";
     
    if("<!-- |input_showuser| -->".match(/[0-9]+/) != null || ("<!-- |input_act| -->" == "Profile" && "<!-- |input_MID| -->".match(/[0-9]+/) != null)){
    tables = document.getElementsByTagName("table");
    for(i=0;i<tables.length;i++){
    tablesTds = tables[i].getElementsByTagName("td");
    if(tablesTds.length == 2){
    if(tablesTds[1].getElementsByTagName("h3").length == 1 && tablesTds[1].getElementsByTagName("strong").length == 1){
    if(tablesTds[0].innerHTML == ""){
    tablesTds[0].innerHTML = "<img src='" + defaultAvatarURL + "' border='0' alt='Avatar' />";
    }}}}
    }else if("<!-- |input_showtopic| -->".match(/[0-9]+/) != null || "<!-- |input_t| -->".match(/[0-9]+/) != null){
    avaSpans = getElementsByClassName("avatarSpan", null, "span");
    for(x=0;x<avaSpans.length;x++){
    if(avaSpans[x].innerHTML == ""){
    avaSpans[x].innerHTML = "<img src='" + defaultAvatarURL + "' border='0' alt='Avatar' />";
    }}}
    </script>
  4. Online

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,309
    Likes Received:
    6,079
    Gender:
    Female
    Location:
    USA
    • Awards
    I found the default avatar never worked for me. I might have been doing it wrong or it just didn't fit in my code itself, but I'm not sure about how to get the mini-profile to work without using table and tr tags. I don't use the quickedit so it makes sense to use the <table> tags when I have the opportunity.

    As far as I know the only way to really center it is by using the postbit, I think.

    You would set it up like so:

    Code: Select
    .postbit { background-color: #######; margin-right: auto; margin-left: auto; text-align: center; font-family: NAME OF FONT; etc. etc. }
    That goes into your CSS.

    You would then change your mini-profile to look like this:

    Code: Select
    <center><div class="postbit"><span class='avatarSpan'><!-- |avatar| --></span></center><div class="m_big"><!-- |field_10| --></div><div class="m_left"><script>if('<!-- |field_3| -->' == 'N/A') { document.write('none');}else{ document.write('<a href="<!-- |field_6| -->">app</a>');} </script></div> <div class="m_right"><script>if('<!-- |field_7| -->' == 'N/A') { document.write('none');}else{ document.write('<a href="<!-- |field_6| -->">plot</a>');} </script></div> <div class="m_left"><!-- |g_title| --></div> <div class="m_right"><!-- |field_9| --></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_8| --></div> <div class="m_big1"><!-- |field_5| --> is <!-- |status| --></div></div>
    Also I noticed you stopped the <center> tag right after the avatar. Did you want the rest of the profile center-aligned as well? That might be why you aren't getting it.
  5. Offline

    aeroglisseur faster than 80% of all snakes

    Member Since:
    Nov 28, 2011
    Total Posts:
    66
    Likes Received:
    43
    Gender:
    Female
    Hmm. I tried that and then it changed the way I had the tables aligned.

    [IMG]

    Would I be better served just setting a background image for that column in my css? Or would putting an image in my postdetails style not effect the whole column?
  6. Online

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,309
    Likes Received:
    6,079
    Gender:
    Female
    Location:
    USA
    • Awards
    What did your mini-profile/css look like when you tried what I mentioned?
  7. Offline

    aeroglisseur faster than 80% of all snakes

    Member Since:
    Nov 28, 2011
    Total Posts:
    66
    Likes Received:
    43
    Gender:
    Female
    Instead of the table cells being side by side they were all off to the left like

    [IMG]
  8. Online

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,309
    Likes Received:
    6,079
    Gender:
    Female
    Location:
    USA
    • Awards
    I mean is it possible for you to quote the code itself for me to look at how you put the settings? I would like to see all the details in case something got messed up in it there.
  9. Offline

    aeroglisseur faster than 80% of all snakes

    Member Since:
    Nov 28, 2011
    Total Posts:
    66
    Likes Received:
    43
    Gender:
    Female
    Sure! Putting all of the codes seemed to be too bulky for a miniprofile code issue at first, otherwise I would have included them in the first post. Sorry for the complication.

    WRAPPER
    Code: Select
    <head>
    <title><% TITLE %></title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <% GENERATOR %>
    <% CSS %>
    <% JAVASCRIPT %>
    <link href='http://fonts.googleapis.com/css?family=Anaheim|Kelly+Slab|Unica+One' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700' rel='stylesheet' type='text/css'>
    <script type='text/javascript' src="http://youdot.s1.jcink.com/getElemsByClass.js"></script>
    <script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
    <script type='text/javascript'>
    /* code written by kismet of RPG-Directory.com */
    $(function(){ function selectTab(tab){ var i=1; while($('#tab'+i).length){ if(tab.attr('id')!=='tab'+i){ $('#tab'+i).removeClass('highlight'); $('#tab'+i+'-content').hide(); } else { tab.addClass('highlight'); $('#tab'+i+'-content').show(); } i++; }} $('#tab1').addClass('highlight'); $('.clickable').each(function(){ $(this).click(function(){ selectTab($(this)); });});});</script>
     
    <div id="sidebar">
     
    <img src="http://placehold.it/250x150"><p><p><p><P>
    <center><div style="width: 200px; text-align: justify; text-transform: uppercase;"><span class="firstletter">W</span><i>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</i></div></center><p>
    <ul id='tab-strip'>
    <li id='tab1' class='clickable'>CHAT</li>
    <li id='tab2' class='clickable'>LINKS</li>
    <li id='tab3' class='clickable'>AWARDS</li>
    <li id='tab4' class='clickable'>STAFF</li>
    <li id='tab5' class='clickable'>UPDATES</li>
    </ul>
    <div id='tab1-content' class='tab-content'>
    <p>
    <!-- BEGIN CBOX - www.cbox.ws - v001 -->
    <div id="cboxdiv" style="text-align: center; line-height: 0">
    <div><iframe frameborder="0" width="240" height="275" src="http://www7.cbox.ws/box/?boxid=627819&amp;boxtag=604nw0&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-627819" style="border:#FFFFFF 1px solid;" id="cboxmain7-627819"></iframe></div>
    <div><iframe frameborder="0" width="240" height="75" src="http://www7.cbox.ws/box/?boxid=627819&amp;boxtag=604nw0&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-627819" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform7-627819"></iframe></div>
    </div>
    <!-- END CBOX -->
    </div>
    <div id='tab2-content' class='tab-content'> links go here </div>
    <div id='tab3-content' class='tab-content'>awards go here</div>
    <div id='tab4-content' class='tab-content'>staff goes here</div>
    <div id='tab5-content' class='tab-content'>updates go here</div>
     
     
     
     
     
     
    </div><div id="mwrap">
    <% BOARD HEADER %>
    <% NAVIGATION %>
    <% BOARD %>
     
    <script type='text/javascript'>
    //Default avatar for JFB
    //Created by posiden5665
     
    defaultAvatarURL = "http://placehold.it/200x300";
     
    if("<!-- |input_showuser| -->".match(/[0-9]+/) != null || ("<!-- |input_act| -->" == "Profile" && "<!-- |input_MID| -->".match(/[0-9]+/) != null)){
    tables = document.getElementsByTagName("table");
    for(i=0;i<tables.length;i++){
    tablesTds = tables[i].getElementsByTagName("td");
    if(tablesTds.length == 2){
    if(tablesTds[1].getElementsByTagName("h3").length == 1 && tablesTds[1].getElementsByTagName("strong").length == 1){
    if(tablesTds[0].innerHTML == ""){
    tablesTds[0].innerHTML = "<img src='" + defaultAvatarURL + "' border='0' alt='Avatar' />";
    }}}}
    }else if("<!-- |input_showtopic| -->".match(/[0-9]+/) != null || "<!-- |input_t| -->".match(/[0-9]+/) != null){
    avaSpans = getElementsByClassName("avatarSpan", null, "span");
    for(x=0;x<avaSpans.length;x++){
    if(avaSpans[x].innerHTML == ""){
    avaSpans[x].innerHTML = "<img src='" + defaultAvatarURL + "' border='0' alt='Avatar' />";
    }}}
    </script>
     
    <% STATS %>
    <% AFFS %>
    <% COPYRIGHT %>
    </div>
     
    <div style="text-align:center;">Sidebar coded by <a href="http://www.rpg-directory.com/index.php?showuser=6066">Revo. @ RPG-D</a></div></div>
     
    </body>
    </html>
    CSS
    Code: Select
    /*
      ---------------------------------------------------------------
      > IPB 2.0 Alpha Default Blue
      > Skin CSS (c) Invision Power Services
      > Modified for use with JFH ( http://jcink.com )
      ----------------------------------------------------------------
    */
     
    html { overflow-x: auto; }
     
    /* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 7, 2012 */
     
     
     
    @font-face {
        font-family: 'metropolis_1920regular';
        src: url('http://kelseystester.b1.jcink.com/uploads/kelseystester/metropolis_1920_webfont.eot');
        src: url('http://kelseystester.b1.jcink.com/uploads/kelseystester/metropolis_1920_webfont.eot?#iefix') format('embedded-opentype'),
            url('http://kelseystester.b1.jcink.com/uploads/kelseystester/metropolis_1920_webfont.woff') format('woff'),
            url('http://kelseystester.b1.jcink.com/uploads/kelseystester/metropolis_1920_webfont.ttf') format('truetype'),
            url('http://kelseystester.b1.jcink.com/uploads/kelseystester/metropolis_1920_webfont.svg#metropolis_1920regular') format('svg');
        font-weight: normal;
        font-style: normal;
     
    }
     
     
    /* The body, general text color and background colors */
     
    BODY {
        font-family: Old Standard TT;
        font-size: 10px;
        color: #2b2b2b; margin:0px;
        padding:0px;
        background-image: url(http://i.imgur.com/jNtaF.png);
        background-attachment: fixed;
        text-align:center;
    }
     
    /* Tables */
     
    TABLE, TR, TD {
        font-family: Verdana, Tahoma, Arial, sans-serif;
        font-size: 10px;
        color: #000;
        border-collapse:collapse;
    }
     
    /* Board Width */
    #ipbwrapper {
        text-align:left;width:900px;margin: 5px auto 0 auto;
    }
     
    /* Link Colors */
    a:link, a:visited, a:active {
        color: #2b2b2b;
    }
    a:hover {
        color: #C29540;
       
    }
     
    /* Calendar style */
    .caldate  {
        text-align:right;font-weight:bold;font-size:11px;
        color:#777;
        background-color:#DFE6EF;
        padding:4px; margin:0px;
    }
     
    #calendarname { font-size:22px; font-weight:bold; }
    #padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px; }
     
    /* Profile stuff */
    #profilename { font-family: Old Standard TT; font-size:28px;  }
    #photowrap { padding:6px; }
    #phototitle { font-size:24px; border-bottom:1px solid black }
    #photoimg  { text-align:center; margin-top:15px }
     
     
    /* UserCP/My Controls styles */
    #ucpmenu    {
        line-height:150%;
        width:22%;
        border:1px solid #345487;
        background-color: #F5F9FD;
    }
     
    #ucpmenu a { text-decoration:none;}
    #ucpmenu a:hover { text-decoration:underline; }
    #ucpmenu p  { padding:2px 5px 6px 9px; margin:0px;  }
     
    #ucpcontent {
        background-color: #F5F9FD;
        border:1px solid #345487;
        line-height:150%; width:auto;
    }
    #ucpcontent p  { padding:10px;margin:0px; }
     
    /* Header/Logo area */
    #ipsbanner { position:absolute; top:0px;right:5%; }
    #logostrip {
        border:0px solid #345487;
        background-image:url("http://i.imgur.com/mby4K.png");
        height: 300px; padding:0px;margin:0px;
    }
     
    /* Navigation menu */
    #submenu  {
        font-family: Old Standard TT;
        font-size:8px;
        background-color: #d8d8d8;
        margin-bottom:3px;
        color:#2b2b2b;
    }
    #submenu a:link, #submenu a:visited, #submenu a:active {
        font-family: Old Standard TT;
        font-weight:bold;font-size:8px;
        text-decoration: none;
        color: #2b2b2b;
    }
    #submenu a:hover { text-decoration:underline; }
     
     
    /* User links menu (ex: Messages  / View new posts / etc ) */
    #userlinks { font-family: Old Standard TT; font-size: 9px; color: #2b2b2b text-transform: uppercase; background-color:d8d8d8; }
    #userlinks a { font-family: Old Standard TT; font-size: 9px; text-transform: uppercase; text-decoration:none; color: #2b2b2b;}
    #userlinks a:hover { font-family: Old Standard TT; font-size: 9px; text-transform: uppercase; text-decoration:underline; color: #2b2b2b;}
    #navstrip  { font-family: Old Standard TT; font-size: 9px; text-transform: uppercase; padding:6px 0px 6px 0px; letter-spacing:2px; color:#2b2b2b; text-decoration: none;}
    #navstrip a { color:#2b2b2b; text-decoration: none;  }
    #navstrip a:hover  { color:#C29540; text-decoration: none; }
     
    /* Topic and post related styles */
     
    .activeuserstrip { font-family: Old Standard TT; font-size: 10px; background-color:#715A54; padding:6px; }
     
    .normalname { font-family: Old Standard TT; font-size: 22px; color: #003; text-transform: lowercase; font-style: italic; line-height: 90%;}
    .normalname a:link, .normalname a:visited, .normalname a:active { font-family: Old Standard TT; font-size: 22px; text-transform: lowercase; font-style: italic; text-decoration: none; line-height: 90%; }
    .unreg { font-family: kelly slab; font-size: 14px; font-weight: bold; color: #900; }
     
    .post1 { font-family: Old Standard TT; font-size: 11px; color: #2b2b2b; background-color: #eaeaea; }
    .post2 { font-family: Old Standard TT; font-size: 11px; color: #2b2b2b; background-color: #e9e9e9; }
     
    .postdetails { font-size: 10px; }
    .postcolor  { font-size: 12px; line-height: 160%; }
     
    .postlinksbar {
        font-family: Old Standard TT;
        padding:3px;margin-top:1px; font-size:10px;
        border-right:1px solid #F5F9FD;
        border-left:1px solid #F5F9FD;
        background-color: #C29540
    ;
    }
     
    .signature  { font-size: 10px; color: #339; line-height:150%;  }
     
    /* Global general table/div row styles */
    .row1 { font-family: Old Standard TT; font-size: 11px; background-color: #F5F9FD; }
    .row2 { font-family: Old Standard TT; font-size: 11px; background-color: #eaeaea; }
    .row2 a {font-family: Old Standard TT; font-size: 11px; text-decoration:none; }
    .row2 a:hover { font-family: Old Standard TT; font-size: 11px; }
    .row3 { font-family: Old Standard TT; font-size: 11px; background-color: #EEF2F7; }
    .row4 { font-family: Old Standard TT; font-size: 12px; background-color: #eaeaea; vertical-align:middle; text-align: center; }
     
    .darkrow1 { font-family: Old Standard TT; font-size: 11px; background-color: #eaeaea; color:#2b2b2b; }
    th.darkrow1 { font-family: Old Standard TT; font-size: 11px; text-align:left; }
    .darkrow2 { font-family: Old Standard TT; font-size: 11px; background-color: #d8d8d8; color:#3A4F6C; font-size:1px; }
    div.darkrow2{ font-family: Old Standard TT; font-size: 11px; font-size:11px; background-color:#eaeaea; }
    .darkrow3 { font-family: Old Standard TT; font-size: 11px; background-color: #d8d8d8; color:#060606; }
     
    .hlight { background-color: #eaeaea }
    .dlight { background-color: #EEF2F7 }
     
    ::-webkit-scrollbar {width:10px;}
    ::-webkit-scrollbar-track {background-color: #eaeaea;}
    ::-webkit-scrollbar-thumb {background-color: #C29540;}
     
     
    /* Top table bars / gradient holders */
     
    .maintitle { background-image: url("");
        vertical-align: middle;
        background-color: #d8d8d8;
        text-align: center;
        text-transform: uppercase;
        font-size: 40px;
        font-family: metropolis_1920regular;
        padding:5px 0px 5px 2px;
        color:#ffffff;
    }
     
    .maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #ffffff;  }
    .maintitle a:hover { text-shadow:2px 2px 4px #C29540;    -webkit-transition: all 0.5s ease-out;
      -moz-transition:    all 0.5s ease-out;
      -ms-transition:    all 0.5s ease-out;
      -o-transition:      all 0.5s ease-out; }
     
    /* The bar directly below the maintitles */
    .titlemedium {
        font-family: Old Standard TT;
        font-size: 11px;
        text-transform: uppercase;
        text-align: center;
        color:#f1f1f1;
        padding:6px; margin:0px;
        background-color:#715A54;
    }
     
    .titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { 
        color: #d8d8d8;
    }
     
     
    /* Forum borders */
    .plainborder { border:1px solid #d8d8d8; background-color:#d8d8d8; }
     
    .tableborder {
        background-color:#fff;
        padding:0px; margin:0;
    }
    .tablefill { background-color:#d8d8d8; padding:6px; }
    .tablepad { background-color:#d8d8d8; padding:6px; }
    .tablebasic { width:100%; padding:0; margin:0px; border:0px; }
     
    .wrapmini    { float:left;line-height:1.5em;width:25% }
    .pagelinks  { float:left;line-height:1.2em;width:35% }
    .desc { font-size:10px; color:#434951 }
    .edit { font-size: 9px }
    .searchlite { font-weight:bold; color:#F00; background-color:#FF0 }
     
    /* QUOTE and CODE BBCode boxes */
     
    #QUOTE {
        white-space:normal;
        font-family: Old Standard TT;
        font-size: 11px;
        color: #C29540;
        background-color: #FAFCFE;
        border: 0px;
        padding:2px;
        border:1px solid #d8d8d8; margin-top:2px;
    }
     
    #CODE  {
        white-space:normal;
        font-family: Old Standard TT; 
        font-size: 11px;
        color: #C29540;
        background-color: #FAFCFE;
        border: 0px;
        padding:2px;
        border:1px solid #d8d8d8; margin-top:2px;
    }
     
    /* Form related styles */
     
    form      { display:inline; }
    label      { cursor:pointer; }
    fieldset.search { padding:6px; line-height:150% }
     
    .forminput, .textinput, .radiobutton, .checkbox  {
        font-size: 10px;
        font-family: Old Standard TT;
        vertical-align: middle;
        border:1px solid #d8d8d8;
        margin-top:2px;
        background-color: #fff;
        color:#3A4F6C;
    }
     
    .codebuttons  {
        font-size: 9px;
        font-family: Old Standard TT;
        vertical-align: middle;
        border:0px solid #576984;
        margin-top:2px;
        background-color: #fff;
        color:#3A4F6C;
    }
     
    .thin {
        padding:6px 0px 6px 0px; line-height:140%;
        margin:2px 0px 2px 0px;
        border-top:1px solid #FFF;
        border-bottom:1px solid #FFF;
    }
     
    .thin a { text-decoration:none; font-style: italic;}
     
    /* More form/general table styles, left/right/top pads */
     
    .pformstrip {
        background-color: #715A54;
        font-family: Old Standard TT;
        font-size: 11px;
        color:#f1f1f1;
        font-weight:bold;
        padding:5px; margin-top:1px;
    }
     
    .pformleft  {
        background-color: #F5F9FD;
        padding:6px; margin-top:1px;width:25%;
        border-top:1px solid #2b2b2b;
        border-right:1px solid #2b2b2b;
    }
    .pformleftw {
        background-color: #F5F9FD;
        padding:6px; margin-top:1px;width:40%;
        border-top:1px solid #2b2b2b;
        border-right:1px solid #2b2b2b;
    }
    .pformright {
        background-color: #F5F9FD;
        padding:6px;
        margin-top:1px;
        border-top:1px solid #2b2b2b;
    }
     
     
    /* The copyright. Removing or hiding it is against Terms of Service */
     
    .copyright { font-family: Kelly Slab; font-size: 9px; line-height: 12px; }
     
    /* General image styles */
    img        { vertical-align:middle; border:0px }
    img.attach { border:2px outset #EEF2F7;padding:2px }
     
     
     
     
     
    /* Misc */
    form div.tableborder div.pformstrip {
    border-bottom:1px solid #fff; border-top:none}
    table.tablebasic td.pformleft { border:none }
    table.tablebasic td.pformleftw { border:none }
    table.tablebasic td.pformright { border:none }
     
    .purple { color:purple;font-weight:bold }
    .red    { color:red;font-weight:bold }
    .green  { color:green;font-weight:bold }
    .blue  { color:blue;font-weight:bold }
    .orange { color:#F90;font-weight:bold }
     
    .warngood { color:green }
    .warnbad  { color:red }
     
     
     
    /* CUSTOM DESCRIPTIONS */
     
    .desc1 { margin-top: 10px; background-color: d8d8d8; font-family: Old Standard TT; font-size: 10px; color: 2b2b2b; font-style: italic; letter-spacing: 1px; line-height: 105%; padding: 10px; text-align: justify; width: 350px; border-right: 7px solid #d8d8d8; border-left: 7px solid #d8d8d8;}
     
    .postbit { background-image: url(http://i.imgur.com/ICb9O.png); margin-right: auto; margin-left: auto; text-align: center;}
     
     
    .firstletter {
    font-size : 600%;
    font-family: metropolis_1920regular;
    float : left;
    color : #2b2b2b;
    }
     
    .m_big {
    height: 50px;
    text-align: center;
    font-size: 11px;
    font-style: italic;
    vertical-align: middle;
    padding-top: 10px;
    padding-left: 30px;
    padding-right: 25px;
    width: 170px;
     
    }
     
    .m_left {
    background: #f1f1f1;
    width: 90px;
    margin-left: 10px;
    margin-bottom: 1px;
    height: 19px;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    }
     
    .m_right {
    background: #f1f1f1;
    width: 90px;
    margin-bottom: 1px;
    height: 19px;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
    }
     
    .m_big1 {
    height: 50px;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    vertical-align: middle;
    padding-top: 30px;
    padding-left: 25px;
    padding-right: 25px;
    width: 170px;
    }
     
     
    /* TAB SIDEBAR */
     
    .clickable {
    display:inline;
     
    border-bottom:0px;
    margin-right:10px;
    cursor:pointer;
    }
    .tab-content {
    background-color:#f1f1f1;
    color:#2b2b2b;
     
    display: none; /* do not remove this */
    }
    #tab1-content { display: block; } /* do not remove this */
     
    /* Active tag has highlight */
    .highlight {
    background-color:#C29540;
    }
     
    /* Clear up the list default styles */
    #tab-strip {
    list-style: none outside none;
    margin:0px;
    padding:0px;
    display:block;
    background-color:#f1f1f1;
    color:#2b2b2b;
    font-style: italic;
    text-transform: lowercase;
    font-size: 11px;
    }
    #tab-strip a { text-decoration: none; }
     
     
     
    #mwrap {width:950px; background-color: #f1f1f1; margin:0px; margin-left:290px; padding:10px; }
    #sidebar {height:100%; width:250px;background-color: #f1f1f1; padding:10px; overflow:auto;position: absolute; left: 10px; top: 0px; font-family: Old Standard TT; }
    body > div#sidebar { position: fixed; }
    MINIPROFILE
    Code: Select
    <center><div style="padding:20px; background-image:url(http://i.imgur.com/ICb9O.png);"><span class='avatarSpan'><!-- |avatar| --></span><div class="m_big"><!-- |field_10| --></div></center><div class="m_left"><script>if('<!-- |field_3| -->' == 'N/A') { document.write('none');}else{ document.write('<a href="<!-- |field_6| -->">app</a>');} </script></div> <div class="m_right"><script>if('<!-- |field_7| -->' == 'N/A') { document.write('none');}else{ document.write('<a href="<!-- |field_6| -->">plot</a>');} </script></div>
    <div class="m_left"><!-- |g_title| --></div> <div class="m_right"><!-- |field_9| --></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_8| --></div>
    <div class="m_big1"><!-- |field_5| --> is <!-- |status| --></div></div></div>
  10. Online

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,309
    Likes Received:
    6,079
    Gender:
    Female
    Location:
    USA
    • Awards
    I've been poking around in this for a bit. Sorry it's taken so long to get back to you. Did you get it figured out?
  11. Offline

    aeroglisseur faster than 80% of all snakes

    Member Since:
    Nov 28, 2011
    Total Posts:
    66
    Likes Received:
    43
    Gender:
    Female
    I have it centered, I think, but I haven't been able to get the background to work yet :confused: I'm pretty stumped
  12. Online

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,309
    Likes Received:
    6,079
    Gender:
    Female
    Location:
    USA
    • Awards
    You want the background to cover the entirety of the mini-profile and not just where the avatar is, right?
  13. Offline

    aeroglisseur faster than 80% of all snakes

    Member Since:
    Nov 28, 2011
    Total Posts:
    66
    Likes Received:
    43
    Gender:
    Female
  14. Online

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,309
    Likes Received:
    6,079
    Gender:
    Female
    Location:
    USA
    • Awards
    Try this for your mini-profile template:

    Code: Select
    <div class="postbit"><div style="padding-top: 20px;"><span class='avatarSpan'><!-- |avatar| --></span><div class="m_big"><!-- |field_10| --></div><div class="m_left"><script>if('<!-- |field_3| -->' == 'N/A') { document.write('none');}else{ document.write('<a href="<!-- |field_6| -->">app</a>');} </script></div> <div class="m_right"><script>if('<!-- |field_7| -->' == 'N/A') { document.write('none');}else{ document.write('<a href="<!-- |field_6| -->">plot</a>');} </script></div>
        <div class="m_left"><!-- |g_title| --></div> <div class="m_right"><!-- |field_9| --></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_8| --></div>
        <div class="m_big1"><!-- |field_5| --> is <!-- |status| --></div></div></div></div>
    And for the .postbit in the CSS put this instead of what you have now:

    Code: Select
    .postbit { background-image:url(http://i.imgur.com/ICb9O.png); margin-right: auto; margin-left: auto; }
    Let me know if that works. =3
  15. Offline

    aeroglisseur faster than 80% of all snakes

    Member Since:
    Nov 28, 2011
    Total Posts:
    66
    Likes Received:
    43
    Gender:
    Female
  16. Online

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,309
    Likes Received:
    6,079
    Gender:
    Female
    Location:
    USA
    • Awards
    You have everything the same in CSS and what not, right? I'll take a look at it right now to see if I can fix it.
  17. Online

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,309
    Likes Received:
    6,079
    Gender:
    Female
    Location:
    USA
    • Awards
    I went through and I think it has to do with the width of your m_left and your m_right. This is what I did.

    I changed the width of both m_left and m_right to 80px, and then I added to m_right this:

    Code: Select
    margin-right: 10px;
    That seems to have fixed the width issue.

    let me know if that helps.
  18. Offline

    aeroglisseur faster than 80% of all snakes

    Member Since:
    Nov 28, 2011
    Total Posts:
    66
    Likes Received:
    43
    Gender:
    Female
    Aha! It looks great now. Thank you so much!
  19. Online

    Will Graham ain't no rest for the wicked.

    • 'D Contributor
    Member Since:
    Jul 11, 2009
    Total Posts:
    4,309
    Likes Received:
    6,079
    Gender:
    Female
    Location:
    USA
    • Awards
    You're very welcome! Sorry it took so long. xD

Share This Page