• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Mini Profile Help

lilrebelfighter

New Coder
Hello!

I was hoping I could reach out here regarding some coding help. I have used the Jcink forum and they weren't too responsive. If anyone is good with this, anything is helpful.

I am trying to place my mini profile obviously next to posts. It shows up at the bottom of the site. In order to keep this short, I'll provide my link and then the link where I got the mini profile at. Just let me know if you need more information.

I am really new to coding and tried my best to figure this out this past week myself. So help is appreciated so much. :)

My site: https://acrossthestars.jcink.net/index.php?showtopic=3
Mini profile code: http://cttw.jcink.net/index.php?showtopic=1242
 

lilrebelfighter

New Coder
Hi there, could you provide the code? If you don't have an account we are unable to view this post.

Sure! I just didn't want to post it and overwhelm with it right off the bat. :) Everything will be below:

This is what I have where (if it's not in these places it doesn't show up at all.) At the moment, the mini profile shows up at the bottom of the forum no matter what I do.


WRAPPER CODE SECTION
Code:
<div class="ncttw-mini wide">
<div class="ncttw-hover large">
   <!-- |avatar| -->
 
   <div class="ncttw-bg">
   
     <div class="ncttw-info">
       <h2><!-- |field_1| --></h2>
       <h3><!-- |status| --></h3>
       <h3><!-- |posts| --> posts</h3>
     
       <h4 style="margin-top: 30px;"><!-- |field_3| --></h4>
       <h4><!-- |field_5| --></h4>
       <h4 style="margin-bottom: 10px;"><!-- |g_title| --></h4>
     
       <h3><a href="<!-- |field_5| -->">application</a></h3>
       <h3><a href="<!-- |field_6| -->">shipper</a></h3>
     </div>
   
   </div>
 
</div>

<h1><!-- |name| --></h1>
</div>


MINI PROFILE CODE SECTION:
Code:
/****************************************
NICOLE/THUNDERSTRUCK DUSK MINI
*****************************************/

.ncttw-mini {
   width: 200px;
   height: auto;
   background-color: #fff;
   padding: 10px;
   font: normal normal normal 11px/100% arial, sans-serif;
   text-align: center;
   color: #222;
   margin: 0 auto;
   outline: 1px solid #eee;
}

.ncttw-mini br {
   display: none;
}
.ncttw-mini.wide {
   width: 250px;
}

.ncttw-mini h1 {
   margin: 5px 0 0;
   background-color: #eee;
   padding: 20px 15px;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 2.2em;
   letter-spacing: -3px;
}

.ncttw-mini .ncttw-hover.small {
   width: 200px;
   height: 300px;
   position: relative;
}

.ncttw-mini .ncttw-hover.medium {
   width: 250px;
   height: 350px;
   position: relative;
}

.ncttw-mini .ncttw-hover.large {
   width: 250px;
   height: 400px;
   position: relative;
}

.ncttw-mini .ncttw-bg {
   background-color: rgba(0,0,0,0);
   position: absolute;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   box-sizing: border-box;
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
   overflow: hidden;
   transition: all 1.2s ease 0s;
   -webkit-transition: all 1.2s ease 0s;
   -moz-transition: all 1.2s ease 0s;
   -o-transition: all 1.2s ease 0s;
}

.ncttw-mini .ncttw-info {
   background-color: #fff;
   overflow: hidden;
   position: absolute;
   padding: 2px;
   left: 10%;
   right: 10%;
   top: -50%;
   transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   text-transform: uppercase;
   transition: all 0.8s ease 0s;
   -webkit-transition: all 0.8s ease 0s;
   -moz-transition: all 0.8s ease 0s;
   -o-transition: all 0.8s ease 0s;
}

.ncttw-mini h2 {
   margin: 0 0 2px;
   background-color: #eee;
   padding: 10px;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 1.3em;
   letter-spacing: -1px;
}

.ncttw-mini h3 {
   width: 50%;
   float: left;
   background-color: #eee;
   margin: 0;
   padding: 5px 3px 3px;
   box-sizing: border-box;
   font-weight: bold;
   font-size: 8px;
   line-height: 100%;
}

.ncttw-mini h3:nth-of-type(even) {
   border-left: 1px solid #fff;
}

.ncttw-mini h3:nth-of-type(odd) {
   border-right: 1px solid #fff;
}

.ncttw-mini h4 {
   margin: 5px 0;
   font-weight: normal;
   font-style: italic;
   font-size: 0.90em;
   clear: both;
}

.ncttw-mini:hover .ncttw-bg {
   background-color: rgba(0,0,0,0.6);
   transition: all 1.2s ease 0s;
   -webkit-transition: all 1.2s ease 0s;
   -moz-transition: all 1.2s ease 0s;
   -o-transition: all 1.2s ease 0s;
}

.ncttw-mini:hover .ncttw-info {
   top: 50%;
   transition: all 0.8s ease 0s;
   -webkit-transition: all 0.8s ease 0s;
   -moz-transition: all 0.8s ease 0s;
   -o-transition: all 0.8s ease 0s;
}

.ncttw-mini a {
   color: #222;
   text-transform: uppercase;
   text-decoration: none;
}
 
Top Bottom