Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Solved] Mini Address Bar



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  decru

avatar
Punbb Rookie
Punbb Rookie
I don't know how to call this but. its like a mini address bar.

on my forum



I want it to be change like this


Powered by PunBB
Currently 0 users have thanked decru for this post:

2
Offline

  Guest

avatar
Guest
It's called a pun crumbs,

Put this in your CSS

Code:
[panda=css].pun-crumbs {
    background: none repeat scroll 0px 0px #EFF1F3;
    border: 1px solid #D9DBDD;
    border-radius: 5px;
    box-shadow: 0px 0px 3px rgba(109, 119, 237, 0.2);
    clear: both;
    font-size: 11px;
    margin: 0px 1px 1em;
    overflow: hidden;
    padding: 0.2em 1em;
}

PS: To move position you must move it from templates.

Powered by PunBB
Currently 0 users have thanked Guest for this post:

3
Offline

  decru

avatar
Punbb Rookie
Punbb Rookie
@Rapid wrote:It's called a pun crumbs,

Put this in your CSS

Code:
[panda=css].pun-crumbs {
    background: none repeat scroll 0px 0px #EFF1F3;
    border: 1px solid #D9DBDD;
    border-radius: 5px;
    box-shadow: 0px 0px 3px rgba(109, 119, 237, 0.2);
    clear: both;
    font-size: 11px;
    margin: 0px 1px 1em;
    overflow: hidden;
    padding: 0.2em 1em;
}


PS: To move position you must move it from templates.

thank you for active response. what particular templates do u need to edit? any idea?

Powered by PunBB
Currently 0 users have thanked decru for this post:

4
Offline

  Shadow

avatar
Administrator
Administrator
Everywhere where you get pun-crumbs at templates.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

5
Offline

  decru

avatar
Punbb Rookie
Punbb Rookie
@Shadow wrote:Everywhere where you get pun-crumbs at templates.


I have two pun-crumbs on my templates sir.

1st is at memberlist_body

Code:
[panda=css]<style>
.pun .table.memberlist tbody tr td {
    border: 0px;
    background: white!important;
    border-bottom: 1px solid #DDD;
}
.pun .table.memberlist tbody tr:nth-child(2n+2) td {
    background: rgb(250, 250, 250)!important;
}
.table.memberlist .tcl.avatar-mini .gen img {
    padding: 1px;  border: 1px solid #DDD;  box-shadow: 0px 1px 3px -1px #BEBEBE;
    width: 70px;
    height: 70px;
}
.table.memberlist .tcl.avatar-mini .gen img:hover {
    border-color: #aaa;
}
.table.memberlist .tcl.avatar-mini a {
    font-family: arial, sans-serif;  font-size: 13px;  font-style: italic;
  }
.table.memberlist #user-hoverbox {
    margin-top: 75px;
    position: absolute;
}
</style><!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
         <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
         <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
   </ul>
   <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->

<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
   <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<div class="pun-crumbs">
   <p class="crumbs">
      <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}&nbsp;&raquo;&nbsp;<strong>{PAGE_TITLE}</strong>
   </p>
</div>

<div class="main frm">

   <!-- BEGIN switch_pagination -->
   <div class="paged-head clearfix">
      <p class="paging">{PAGINATION}</p>
   </div>
   <!-- END switch_pagination -->

   <div class="main-head">
      <h1 class="page-title">MEMBER LIST</h1>
   </div>

   <div class="main-content"><fieldset class="frm-set clearfix" style="margin: 0;padding: 0;">
         <div class="frm-form" style="margin: 0;">
            <table class="table memberlist" cellspacing="0" style="border: 0px">
               <thead>
                  <tr>
                     <th class="tcl memberlist">{L_AVATAR} - {L_USERNAME}</th>
                     <!-- BEGIN switch_th_group -->
                     <th class="tc2">{L_GROUPS}</th>
                     <!-- END switch_th_group -->
                     <th class="tc3">{L_INTERESTS}</th>
                     <th class="tc2">{L_JOINED}</th>
                     <th class="tc2">{L_VISITED}</th>
                     <th class="tc3">{L_POSTS}</th>
                     <th class="tc3">{L_PM}</th>
                     <th class="tc3">{L_WEBSITE}</th>
                  </tr>
               </thead>

               <tbody>
                  <!-- BEGIN memberrow -->
                  <tr>
                     <td class="tcl avatar-mini">
                                                          <a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}&nbsp;</a><a class="gen user" href="{memberrow.U_VIEWPROFILE}"><span>{memberrow.USERNAME}</span></a></td>
                     <!-- BEGIN switch_td_group -->
                     <td class="tc2">{memberrow.GROUPS}</td>
                     <!-- END switch_td_group -->
                     <td class="tc3">{memberrow.INTERESTS}</td>
                     <td class="tc2">{memberrow.JOINED}</td>
                     <td class="tc2">{memberrow.LASTVISIT}</td>
                     <td class="tc3">{memberrow.POSTS}</td>
                     <td class="tc3">{memberrow.PM_IMG}</td>
                     <td class="tc4">{memberrow.WWW_IMG}</td>
                  </tr>
                  <!-- END memberrow -->
                  <!-- BEGIN switch_no_user -->
                  <tr>
                     <td colspan="{switch_no_user.COLSPAN_NUMBER}" class="tcr">{switch_no_user.L_NO_USER}</td>
                  </tr>
                  <!-- END switch_no_user -->
               </tbody>
            </table>
         </div>
      </fieldset>
   </div>
<!-- BEGIN switch_pagination -->
   <div class="paged-foot clearfix">
      <p class="paging">{PAGINATION}</p>
   </div>
   <!-- END switch_pagination -->
  <br/>
  <style>.dr_frm-buttons {
    display: block;
    clear: both;
    text-align: center;
    padding-top: 25px;
}
.frm-set.multi.search dl {
    font-size: 11px;  color: #999;  display: block;  float: left;      
    padding: 0 10px;  border-right: 1px solid #ddd;  font-weight: normal;
    height: 50px;
}
.frm-set.multi.search .username_input input {
    background: #ffffff;  color: #979797;  font-size: 11px;  outline: 0;  
    border: 1px solid rgb(206, 206, 206);  padding: 0px 10px;  
    height: 30px;  
    margin-top: 7px;
    width: 285px;
}
.frm-set.multi.search .select_mode select ,.frm-set.multi.search .s_order_select select {
    height: 35px;
    width: 260px;
}
.frm-set.multi.search dl dd {
    margin: 0;
}
.frm-set.multi.search .dr_frm-buttons input {
    font-size: 11px;  color: #666;  border-radius: 2px;  cursor: pointer;  border: 1px solid #C2C2C2;  background: rgb(255,255,255);  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );  box-shadow: 0px 1px 1px rgba(204, 204, 204, 0.18);    
    width: 200px;    padding: 10px;  text-transform: uppercase;  
    font-weight: bold;
    margin: 10px auto;
    }
  
.frm-set.multi.search .dr_frm-buttons input:hover{background: #fefefe;}
.frm-set.multi.search .dr_frm-buttons input:active {
    background: rgb(238,238,238); background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */  background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */  background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */  background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(255,255,255,1) 100%); /* W3C */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */;      box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
}    
  </style>
  <div class="main-head"><h1 class="page-title">SEARCH MEMBER LIST</h1></div>
<div class="main-content"><form action="{S_MODE_ACTION}" method="get" class="form-frm">
      <fieldset class="frm-set multi search">
         <dl class="username_input"  style="border-left: 1px solid #ddd;">
         <input style="height:20px;" type="text" class="inputbox" placeholder="Username" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />
         </dl>
         <dl class="select_mode">
            
            <dd>{S_MODE_SELECT}</dd>
         </dl>
         <dl class="s_order_select">
            <dd>{S_ORDER_SELECT}</dd>
         </dl>

         <div class="dr_frm-buttons">
            {S_HIDDEN_SID}
            <input type="submit" name="submit" value="{L_SUBMIT}" />
         </div>
      </fieldset>
      </form>
  </div></div>



2nd one is Indes_box

Code:
[panda=css]<div class="pun-crumbs">
   <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="main-head mybb">
         <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
         <table cellspacing="0" class="table">
            <tbody class="statused">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
               <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                     <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                     </span>
                     <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                     <br />
                                                  <div class="desc_forum_cat_row">{catrow.forumrow.FORUM_DESC}</div>
                     <!-- BEGIN switch_moderators_links -->
                     <br />
                     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                     <!-- END switch_moderators_links -->
                     {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                     <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
                  <td class="tc2"></td>
                  <td class="tc3">
                                                  <p id="catrow"> {catrow.forumrow.TOPICS} </span> Threads</p>
                                                   <p id="catrow"> <span>{catrow.forumrow.POSTS}</span> Posts</p></td>
                  <td class="tcr">
                     <span>
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
                  </td>
               </tr>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </tbody>
         </table>
  </div><br/>
   <!-- END tablefoot -->
<!-- END catrow -->
</div>

I havent seen some values for positions. can u help me with this buddy?

Powered by PunBB
Currently 0 users have thanked decru for this post:

6
Offline

  Shadow

avatar
Administrator
Administrator
It's the basic of HTML, please learn it better and you will be able to achieve many things with that. Also move it by yourself until you find the desired location.


Powered by PunBB
Currently 0 users have thanked Shadow for this post:

7
Offline

  decru

avatar
Punbb Rookie
Punbb Rookie
@Shadow wrote:It's the basic of HTML, please learn it better and you will be able to achieve many things with that. Also move it by yourself until you find the desired location.



I guess so mate.. thanks for the help and advice

Powered by PunBB
Currently 0 users have thanked decru for this post:

8
Offline

  nanako

avatar
Punbb Guru
Punbb Guru
Solved => Locked

Powered by PunBB
Currently 0 users have thanked nanako for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

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