Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 how to force the mini prof to the top.
#
Hello,

I'm having trouble figuring out why our mini profile on this skin that we're constructing isn't sticking/forcing itself to the top the of the space, instead of being vertically-centered to the post space. Below is our mini profile and post row html & css codes. We've tried a few tricks, but nothing seems to work. We aren't crazy css experts, so we're probably missing something obvious or made an error elsewhere, but any help is appreciated! Thanks!

MINI PROFILE HTML TEMPLATE

CODE
<div class="wmini">
<div class="wmini-av"><img src="<!-- |avatar_url| -->">

<div class="wmini-av-overlay">

<div class="wmini-play">Foggy<BR>
<span>He/Him. 19. 25 posts.<span>
</div>

<div class="wmini-alias">The Flash</div>

<div class="wmini-info">
<div class="wmini-info-pieces"><span>Age</span><BR>
35<BR><BR></div>
<div class="wmini-info-pieces"><span>Pronouns</span><BR>
He/Him<BR><BR></div>
<div class="wmini-info-pieces"><span>Residence</span><BR>
Central City<BR><BR></div>
<div class="wmini-info-pieces"><span>Occupation</span><BR>
Forensic Scientist<BR><BR></div>
<div class="wmini-info-pieces"><span>Affiliation</span><BR>
Justice League/Flashfam<BR><BR></div>
</div>


</div>

</div>
<div class="wmini-links">
<a href="#"><i class="fa fa-address-card"></i></a>
<a href="#"><i class="fa fa-cube"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
</div>
</div>

</div>


MINI PROFILE CSS

CODE
.wmini {
   border: 1px solid rgba(164,159,118, 0.8);
   height: 470px;
   margin: 0px 5px 5px 5px;
   position: relative;
   top: 0;
   width: 240px;
}


.wmini-av {
   height: 450px;
   left: 10px;
   position: relative;
   top: 10px;
   width: 220px;
}

.wmini-av img {
   height: 450px;
   width: 220px;
}


.wmini-av-overlay {
   background-color: rgba(40,40,40,0.8);
   height: 450px;
   left: 0;
   opacity: 0;
   position: absolute;
   top: 0;
   transition-ease: 0.6s ease-in-out;
   width: 220px;
}

.wmini-av:hover .wmini-av-overlay {
   opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}

.wmini-alias {
   border-bottom: 1px solid rgb(164,159,118);
   color: rgb(164,159,118);
   font: 22px 'Butler R';
   height: 20px;
   left: -25px;
   letter-spacing: 2.5px;
   overflow: hidden;
   padding: 0px 10px 5px 10px;
   position: absolute;
   text-transform: uppercase;
   top: 212px;
   transform: rotate(90deg);
   width: 430px;
}

.wmini-play {
   color: rgba(164,159,118, 0.9);
   font: 28px 'Butler EB';
   font-weight: 900;
   left: 20px;
   line-height: 28px;
   position: absolute;
   top: 20px;
   text-transform: uppercase;
}

.wmini-play span {
   color: rgba(164,159,118, 0.9);
   float: left;
   font: 10px 'Cross EL';
   font-weight: 700;
   line-height: 11px;
   text-transform: uppercase;
}

.wmini-plinks {
   clear: both;
   color: rgba(164,159,118, 0.9);
   float: left;
   font-size: 11px;
   letter-spacing: 5px;
   padding: 7px 0px 0px 3px;  
   width: 150px;
}

.wmini-plinks a {
   color: rgba(164,159,118, 0.9);
   font-size: 11px;
}


.wmini-info {
   color: rgb(164,159,118);
   display: block;
   font: 10px 'Cross EL';
   font-weight: 700;
   left: 10px;
   line-height: 16px;
   position: absolute;
   text-align: right;
   top: 205px;
   width: 165px;
}

.wmini-info-pieces span {
   color: rgba(238,238,238, 0.65);
   font: 9px 'Butler B';
   letter-spacing: 1px;
   line-height: 12px;
   margin-right: -1px;
   text-align: right;
}

.wmini-info-pieces {
   text-transform: uppercase;
   width: auto;
}

.wmini-links {
   color: rgba(164,159,118, 0.9);
   font-size: 15px;
   height: 28px;
   left: 120px;
   letter-spacing: 6px;
   position: relative;
   text-align: center;
   top: 23px;
   width: 150px;
}

.wmini-links a {
   color: rgba(164,159,118, 0.9);
   font-size: 18px;
}


POST ROW HTML TEMPLATE

CODE
<div class="maintitle">
<span class="topic-title"><!-- |topic_text| --></span>
</div>

<div align="right" class="postlinksbar"></div>

<div id="custom_posts">

<div class="ptop">
 <div class="ptop2">
 
<div class="ptop-header"><img src="http://www.batmannews.de/wp-content/uploads/2017/09/JL_Comic_Cover.jpg"></div>
 <div class="ptop-header-cover" style="background-image: url(https://cdn.discordapp.com/attachments/345300464780312587/447510383025061898/something_6.png); background-size: 950px 180px;">

<div class="ptopicon1" style="background: url(https://78.media.tumblr.com/74336a750a789399e9b21b0d85d24faa/tumblr_p5td5nysbd1t4rhclo1_400.png) center no-repeat; background-size: 90px 90px;"></div>
<div class="ptopicon2" style="background: url(https://78.media.tumblr.com/3d7062837fd97eb3ee54f68ed7dbe579/tumblr_p5td5nysbd1t4rhclo2_400.png) center no-repeat; background-size: 90px 90px;"></div>
<div class="ptopicon3"  style="background: url(https://78.media.tumblr.com/9326ebee2770623bf6f695c4fde54153/tumblr_p5td5nysbd1t4rhclo3_400.png) center no-repeat; background-size: 90px 90px;"></div>

<div class="ptext">
<div class="ptitle" style="vertical-align: top; padding-right: 10px;">
    <a name="entry<!-- |pid| -->"></a>
    <a href="<!-- |poster_id| -->">
     <b class="<!-- |group| -->">BARRY ALLEN</a>
    </a>
   </div>
<div class="pbuttons"><!-- |quote_button| --> <!-- |edit_button| -->  <!-- |delete_button| --> <!-- |ip_address| --> <div class="pcheckbox"><!-- |mod_checkbox| --></div>
</div>
  </div>
</div>

</div>

</div>
</div>

<table>
 <tbody>
<td class="pspace"></td>
  <tr>
   <td class="ppad">
    <div id="pid_<!-- |pid| -->">
     <!-- THE POST <!-- |pid| --> -->
      <div class='postcolor'>
       <div id="pid_<!-- |pid| -->">
        <!-- THE POST <!-- |pid| --> -->
         <div class='postcolor'><!-- |post| --></div>
        <!-- THE POST -->
       </div>
      </div>
     <!-- THE POST -->
    </div>
   </td>
 
   <td class="pmini">
   
<!-- |mini_profile| -->

   </td>
  </tr>
 </tbody>
</table>

</div>


POST ROW CSS

CODE
.maintitle, .maintitle2 {
   color: rgba(40,40,40,0.7);
   font-weight: 700;
   letter-spacing: 2px; font-size: 11px;
   padding: 50px 0px .1px;
   text-align: left;
   text-decoration: none;
   text-transform: uppercase;
}

.topic-title { font-weight: 600; display: inline; }
.maintitle .topic-title {
   border-bottom: 1px solid #282828;
   color: #282828;
   font: 600 23px 'Butler EB';
   padding-bottom: 3px;
}

.activeuserstrip {
   color: #282828;
   font: 7px 'lato', sans-serif;
   letter-spacing: 1px;
   padding: 6px;
   text-align: center;
   text-transform: uppercase;
}
#ST div.activeuserstrip { padding:40px 0px 0px; }
div.activeuserstrip[align=center] { padding:0px 0px 0px!important; text-align:center; display:none; }
div.darkrow2 a, div.row2 a, div.activeuserstrip a { font-size:7px; letter-spacing:1px; color: #282828; }
.normalname { font-weight:bold; }
.normalname a {}
.unreg { font-weight:bold; }
#new-posts { padding-bottom:10px; border-bottom: 0px solid #000000; }
.post1, .post2 { padding: 35px; line-height:150%; background-color: #282828; }
#inline-pm .post1, #inline-pm .post2 { background-color: rgba(40,40,40,0.9) }
.post1 img, .post2 img { max-width:567px; }
.post1 ul, .post2 ul { display: block; list-style-type: disc; -webkit-margin-before: 1em; -webkit-margin-after: 1em;  -webkit-margin-start: 0px; -webkit-margin-end: 0px; padding: 10px 40px;}
.postdetails { text-transform:uppercase; font-size:7px; text-align:center; letter-spacing:1px; }
.postcolor { text-align:left; line-height:150%; text-transform:none; font-size:10px; }
#Post .row1 { padding:35px!important; background-color:#f9f9f9; margin-top:0px; }
#Post input[type=text] { background-color:transparent!important; padding:0px!important; }
#Post input[name='TopicTitle'], #Post input[name='TopicDesc'], #Post input[name='UserName'], #Post input[name='reg_code'] { padding: 5px!important; }
#Post td.pformstrip[align=center] { width: 100%; margin-top: 20px; border: 0px; border-top: 0px dotted #000000; }
#posting-form .pformright, #posting-form .pformleft { padding: 20px 20px 20px 20px; vertical-align: middle; }
.postlinksbar { padding: 0px 5px 62px; margin: 35px 0px 0px 0px; width: 500px; float: right; counter-reset: my-badass-counter; color: transparent; text-align: right; }
.postlinksbar strong { font-weight:300; }
.postlinksbar a { color: rgba(40,40,40, .9); font-size: 9px; text-transform: uppercase; letter-spacing: 2px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
.postlinksbar a:before { content: ''; display: inline-block; padding: 0px 11px 0px 0px; }
.postlinksbar a:nth-of-type(1) { display: none; }

#custom_posts { position: relative; padding-top: 0px; }

#custom_posts fieldset { margin: 0px; border: 1px solid #b9b9b9; border-left: 0px; border-right: 0px; padding: 0px 0px 10px; margin: 0px; letter-spacing: 150%; text-transform: None;}

#custom_posts legend { padding: 0px 0px 5px; margin-left: 0px;}

.pcheckbox { opacity: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; float: right;}

.ptop:hover .pcheckbox { opacity: 1;}

.ptext {margin-left: 450px; opacity: 1;}

.ptitle {text-transform: uppercase; text-align: right; font-size: 37px; font-weight: 900; overflow: hidden; color: #fff; margin: 20px 28px 0px 0px; padding: 0px 0px 0px 4px; letter-spacing: 2px; font: 19px 'Butler EB'; border-bottom: 1px solid #fff; z-index: 11; }

.ptitle a {letter-spacing: 2px; font: 37px 'Montserrat'; color: #fff;}

.pbuttons {text-align: right; font: 9.5px 'Cross EL'; color: #fff; font-weight: 700; margin: 2px 28px 0px 0px; text-transform: uppercase;}

.pbuttons .button-small {font: 9.5px 'Cross EL'; font-weight: 900; color: #fff;}

#custom_posts input[type=checkbox] { width: 10px; height: 10px; margin: 0px;}

.ipaddress { text-transform: uppercase; font: 8px 'Cross EB'; font-weight: 700; letter-spacing: 1.5px; color: #f9f9f9}

.ipaddress a { font-size: 8px; color: #fff; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;}

.ipaddress a:hover {color: #fff;}
.ipaddress.view4 {display: none}

.pav { float: left; overflow: hidden; width: 50px; height: 50px; background-image: url(http://imgur.com/ZxSxTd2.png); background-repeat: no-repeat; background-size: cover; background-position: center center; margin-right: 10px; border-radius: 40px}

.ppad { font-size: 11px; line-height: 150%; display: table-cell; width: 100%; vertical-align: top; background: rgba(249,249,249,0.85); padding: 55px; overflow: hidden; table-layout: fixed; text-align: justify; }

.pmini {top: 0; margin-top: 0;}

.cs-quick-edit { position: relative; overflow:; width: 100%;}

.ppad img {max-width: 539px;}

.ppad textarea {font-size: 11px!important; letter-spacing: 1px!important; text-transform: normal!important; text-align: left!important; line-height: 150%!important; vertical-align: middle!important; border: 1px solid #e4e4e4!important; margin: 2px 5px 2px 0px!important; background-color: rgba(249,249,249,0.5)!important; padding: 20px!important; width: 500px!important; }

.ppad button {font-weight: 100; display: inline-block; padding: 5px 6px 4px; margin: 2px 8px 2px 0px; font: 8px playfair display, georgia; text-transform: uppercase; letter-spacing: 1px; text-align: justify; line-height: 150%; vertical-align: middle; border: none; color: #f9f9f9; text-align: left; border: 0px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; background-color: #c0b194;}

.post2[width='20%'], .post2[width='80%'] {background-color: #282828; text-transform: uppercase; font: 8px playfair display, georgia; letter-spacing: 1px; }


.ptop { border-bottom: 1px solid rgba(40,40,40,0.9);border-top: 1px solid rgba(40,40,40,0.9); padding: 6px 0px; margin: 6px 0px;}
.ptop2 { height: 100px; padding: 40px 0px 40px 0px; letter-spacing: 2px;margin-bottom: 0px; background-color: rgba(131,127,94,0.7); position: relative; }

.ptop-header {position: absolute; top: 0; left: 350px; z-index: 1;}  
.ptop-header img {width: 600px; opacity: 0.2; float: right;}
.ptop-header-cover {width: 950px;  height: 100px; padding: 40px 0px 40px 0px; position: absolute; top: 0; z-index: 2;}

.ptopicon1 {
   background: url('https://i.imgur.com/hemdg9S.png') center no-repeat;
   background-size: 90px 90px;
   border: 0.75px solid rgba(238,238,238,8.0);
   height: 90px;
   margin: 20.5px 0px 0px 20.5px;
   padding: 6px;
   width: 90px;
   position: absolute;
   top: 20px;
   z-index: 5;
   left: 20px;
}

.ptopicon2 {
   background: url('https://i.imgur.com/hemdg9S.png') center no-repeat;
   background-size: 90px 90px;
   border: 0.75px solid rgba(238,238,238,8.0);
   height: 90px;
   margin: 20.5px 0px 0px 20.5px;
   padding: 6px;
   width: 90px;
   position: absolute;
   top: 20px;
   z-index: 5;
   left: 150px;
}

.ptopicon3 {
   background: url('https://i.imgur.com/hemdg9S.png') center no-repeat;
   background-size: 90px 90px;
   border: 0.75px solid rgba(238,238,238,8.0);
   height: 90px;
   left: 280px;
   margin: 20.5px 0px 0px 20.5px;
   padding: 6px;
   position: absolute;
   top: 20px;
   width: 90px;
   z-index: 5;
}


.ptopicon1:hover {border: 0.75px solid rgb(164,159,118);}
.ptopicon2:hover {border: 0.75px solid rgb(164,159,118);}
.ptopicon3:hover {border: 0.75px solid rgb(164,159,118);}
PM
#
In your HTML find this:

<td class="pmini">

Replace it with:

<td class="pmini" valign="top">

And that should do it for you.

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
owl, thanks! that worked!
PM
#
Glad to help. ^^

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll