Header and mini profile?

Hello, i need some help. I will try to explain my problem.
I wanna make my header like this one ;

Befor;


and after i move my mouse over;


Okay i want to make it like this but i dont know how my forum is phpbb3


and the other question is how to make the profiles to look like this one

Befor :


and after i move the mouse over'



for that one i have  code, but the code dosen't work in the forum i think so becouse i try so many times to put it but it dosen't work.

this is the code : 

1;

Code:

/* MINI PROFILE BY DARREN CRISS AKA BECKY */
.sledge { width: 250px; height: 350px; position: relative; overflow: hidden; margin: auto; }
.sledgeh
 { width: 210px; padding: 20px; font-family: 'Raleway', sans-serif;
margin: auto; font-weight: 900; text-transform: uppercase; text-align:
center; line-height: 100%; font-size: 30px; color: #fff;
background-color: #222; }
.sledgeh a { font-family: 'Raleway',
sans-serif; margin: auto; font-weight: 900; text-transform: uppercase;
text-align: center; line-height: 100%; font-size: 30px; }
mmb {
font-family: 'Roboto Slab', sans-serif; font-size: 7px; text-transform:
uppercase; line-height: 100%; color: #fff; letter-spacing: 1px;
margin-top: 1px; display: block;}
mmb:before, mmb:after { content:
"//"; vertical-align: middle; font-size: 4px; margin-left: 5px;
margin-right: 5px; line-height: 100%; }
.sledge .sledge1 { width:
250px; height: 350px; position: absolute; top: 0px; left: 0px;
transition-duration: .6s; -webkit-transition-duration: .6s;
-moz-transition-duration: .6s; -ms-transition-duration: .6s;
-o-transition-duration: .6s; }
.sledge:hover .sledge1 { left: -150px;
 -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:
grayscale(100%); filter: url(grayscale.svg); filter: gray; }
.sledge
.sledge2 { width: 110px; padding: 20px; height: 310px; background-color:
 #222; position: absolute; bottom: -400px; right: 0px;
 transition-duration: .6s; -webkit-transition-duration: .6s;
-moz-transition-duration: .6s; -ms-transition-duration: .6s;
-o-transition-duration: .6s; }
.sledge:hover .sledge2 { bottom: 0px; }
.sledgei { width: 98px; padding: 5px; border: 1px solid #fff; margin-bottom: 10px;}
.sledgei img { width: 98px; height: 98px; }
.sledgehh
 { font-family: 'Roboto Slab', sans-serif; font-size: 7px;
text-transform: uppercase; line-height: 100%; color: #fff;
letter-spacing: 1px; text-align: left; margin-bottom: 5px;}
.sledgehh:after { content: "//"; }
.sledgehhi:before { content: "//"; }
.sledgehhi
 { font-family: 'Roboto Slab', sans-serif; font-size: 7px;
text-transform: uppercase; line-height: 100%; color: #fff;
letter-spacing: 1px; text-align: right; margin-bottom: 5px;}
.sledgehh
 a, .sledgehhi a {  font-family: 'Roboto Slab', sans-serif; font-size:
7px; text-transform: uppercase; line-height: 100%; color: #fff;
letter-spacing: 1px }
.hammer { border-top: 1px solid #555;
margin-top: 10px; height: 25px; overflow: hidden; font-family: 'Roboto
Slab', sans-serif; font-size: 5px; letter-spacing: 2px; line-height:
100%; text-align: justify; padding-top: 5px; color: #555;
text-transform: uppercase; }

2;

Code:

<link href='http://fonts.googleapis.com/css?family=Raleway:900'
rel='stylesheet' type='text/css'><link
href='http://fonts.googleapis.com/css?family=Roboto+Slab'
rel='stylesheet' type='text/css'><div class="sledge"><div
class="sledge1"><!-- |avatar| --></div><div
class="sledge2"><div class="sledgei"><img src="<!--
|field_1| -->"/></div><div class="sledgehh"> <!--
|field_2| --> years </div><div class="sledgehhi"> <!--
 |field_3| --></div><div class="sledgehh"> <!--
|field_4| --> </div><div class="sledgehhi"> <!--
|field_5| --></div><div class="sledgehh"> <a
href="<!-- |field_6| -->"><!-- |field_7| --></a>
</div><div class="sledgehhi"> <!-- |field_8| -->
</div><div class="sledgehh"> <!-- |field_9| -->
</div><div class="sledgehhi"> <!-- |posts| --> posts
</div><div class="sledgehh"> <!-- |field_10| --> //
<!-- |status| --> </div><div class="sledgehhi"> <a
href="<!-- |field_11| -->">application</a>
</div><div class="sledgehh"> <a href="<!-- |field_12|
-->">shipping</a> </div><div class="sledgehhi">
<a href="<!-- |field_13| -->">request</a>
</div><div class="sledgehh"> <a href="<!-- |field_14|
-->">development</a> </div><div class="hammer">
<!-- |field_15| --> </div><object
type="application/x-shockwave-flash"
data="http://flash-mp3-player.net/medias/player_mp3_mini.swf"
width="110" height="10"><param name="movie"
value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"
/><param name="bgcolor" value="#222222" /><param
name="FlashVars" value="mp3=<!-- |field_16|
-->&bgcolor=222222&slidercolor=555555&buttoncolor=ffffff"
 /></object></div></div><div
class="sledgeh"><!-- |name| --><mmb><!-- |g_title|
--></mmb></div>

Can you help me ?

sombody to help with that?

Hello @-pressure,

I can give you an example for phpbb3, as I'm not sure what you want inside the box exactly.

First we'll add some style rules for the popup module.
Go to Administration Panel > Display > Colors > CSS stylesheet

Paste the following codes and save :

Code:

.hover-box { position:relative }
.hb-content {
  background:#EEE;
  box-shadow:1px 1px 10px rgba(0,0,0,0.175);
  border:1px solid #CCC;
  border-radius:3px;
  position:absolute;
  padding:3px;
  z-index:1;
  visibility:hidden;
  opacity:0;
  -webkit-transition:300ms;
    -moz-transition:300ms;
      -o-transition:300ms;
          transition:300ms;
}
.hover-box:hover .hb-content {
  visibility:visible;
  opacity:1;
}

Next we'll install an example for the header on phpbb3. Go to Display > Templates > General and open the template overall_header

Find :

Code:

      <div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <div id="logo-desc">
            <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
            <!-- BEGIN switch_h1 -->
            <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
            <!-- END switch_h1 -->
            <!-- BEGIN switch_desc -->
            <p>{switch_desc.SITE_DESCRIPTION}</p>
            <!-- END switch_desc -->
         </div>

         <span class="corners-bottom"><span></span></span></div>
      </div>

Replace by :

Code:

      <div class="headerbar hover-box">
         <div class="inner"><span class="corners-top"><span></span></span>
                          <div class="hb-content">YOUR_CONTENT</div>

         <div id="logo-desc">
            <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
            <!-- BEGIN switch_h1 -->
            <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
            <!-- END switch_h1 -->
            <!-- BEGIN switch_desc -->
            <p>{switch_desc.SITE_DESCRIPTION}</p>
            <!-- END switch_desc -->
         </div>

         <span class="corners-bottom"><span></span></span></div>
      </div>

Basically we're adding the class .hover-box to the header, and our content box inside the header. The content box is hidden, but when we hover over the header it'll display due to the .hb-content classname. To put your own content in the box, replace YOUR_CONTENT inside this block : <div class="hb-content">YOUR_CONTENT</div>

When finished, save and publish the template.


For the profile info, you should still be in general templates so open the viewtopic_body template.

Find :

Code:

         <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
            <!-- div class="online2"></div-->
            <dl>
               <dt>
                  {postrow.displayed.POSTER_AVATAR}
                  <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
               </dt>
               <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
               <dd><br /></dd>
               <dd>
                  <!-- BEGIN profile_field -->
                  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                  <!-- END profile_field -->
                  {postrow.displayed.POSTER_RPG}
               </dd>
               <dd><br /></dd>
               <dd>
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
               </dd>
            </dl>
         </div>

Replace by :

Code:

         <div class="postprofile hover-box" id="profile{postrow.displayed.U_POST_ID}">
            <!-- div class="online2"></div-->
            <dl>
               <dt>
                  {postrow.displayed.POSTER_AVATAR}
                  <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
               </dt>
               <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
               <dd><br /></dd>
                                  <div class="hb-content">
               <dd>
                  <!-- BEGIN profile_field -->
                  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                  <!-- END profile_field -->
                  {postrow.displayed.POSTER_RPG}
               </dd>
               <dd><br /></dd>
               <dd>
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
               </dd>
                                  </div>
            </dl>
         </div>

We're using the same method mentioned before with the header, only we're wrapping a portion of the profile info with out content box. When you hover over the profiles it'll show the profile information for that member. Save and publish the template when you're finished.

okay, but why i cant find the templates?

okay, i find everything i need and i do it, it work very good.

Thaks you so much

It's solved