The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Header and mini profile?

View previous topic View next topic Go down

Solved Header and mini profile?

Post by -pressure on March 15th 2015, 9:33 pm

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 ?

-pressure
New Member

Posts : 4
Reputation : 1
Language : english, bulgarian

http://forever-rpg.bulgarianforum.net

Back to top Go down

Solved Re: Header and mini profile?

Post by -pressure on March 16th 2015, 1:58 am

sombody to help with that?

-pressure
New Member

Posts : 4
Reputation : 1
Language : english, bulgarian

http://forever-rpg.bulgarianforum.net

Back to top Go down

Solved Re: Header and mini profile?

Post by Ange Tuteur on March 16th 2015, 6:22 am

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 Edit

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. Add


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

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. Add

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Header and mini profile?

Post by -pressure on March 16th 2015, 12:50 pm

okay, but why i cant find the templates?


-pressure
New Member

Posts : 4
Reputation : 1
Language : english, bulgarian

http://forever-rpg.bulgarianforum.net

Back to top Go down

Solved Re: Header and mini profile?

Post by -pressure on March 16th 2015, 3:00 pm

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

Thaks you so much :party:

It's solved

-pressure
New Member

Posts : 4
Reputation : 1
Language : english, bulgarian

http://forever-rpg.bulgarianforum.net

Back to top Go down

Solved Re: Header and mini profile?

Post by _Twisted_Mods_ on March 16th 2015, 7:27 pm

Topic solved and archived

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum