Logo
Graphic Balloon

Graphic Design Help Forum


You are not connected. Please login or register

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

10spetter10
#1

on Tue Apr 05, 2016 5:12 pm

Technician
Technician
avatar
View user profile
GB Coins : 2142
Level : Amateur
Program : Photoshop CS5
Behaves well.
Posts : 113
Likes : 88
I think it would be oke if I post the template-edits I made as requests on the Dutch support-forum.

The first one is an edit of the categorylist.

Preview:


template - index_box

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
    <tr>
        <td valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <span class="gensmall">{LAST_VISIT_DATE}<br />
            {CURRENT_TIME}<br />
            </span>
            <!-- END switch_user_logged_in -->
            <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
        </td>
        <td class="gensmall" align="right" valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
            <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
            <!-- END switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
        </td>
    </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<table class="cattable">
    <tr>
        <th nowrap="nowrap" class="secondarytitle">{catrow.tablehead.L_FORUM}</th>
    </tr>
    <!-- END tablehead -->
    <!-- BEGIN forumrow -->
    <tr>
        <td>
            <table class="forumtable">
                <tr>
                    <td>
                        <h{catrow.forumrow.LEVEL} class="hierarchy">
                        <span class="forumlink">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                        </span>
                        </h{catrow.forumrow.LEVEL}>
                    </td>
                    <td class="forumdesc" rowspan="3">
                        <table>
                            <tr>
                                <td>
                                    <div class="genmed">{catrow.forumrow.FORUM_DESC}</div>
                                </td>
                            </tr>
                            <!-- BEGIN switch_moderators_links -->
                            <tr>
                                <td>
                                    <span class="gensmall">
                                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                    </span>
                                </td>
                            </tr>
                            <!-- END switch_moderators_links -->
                        </table>
                    </td>
                    <td class="lastpost-title-cont">
                    </td>
                </tr>
                <tr>
                    <td class="newpost">
                        <img src="{catrow.forumrow.FORUM_FOLDER_IMG}"/>
                    </td>
                    <td class="newpost">
                        <img src="{catrow.forumrow.FORUM_FOLDER_IMG}"/>
                    </td>
                </tr>
                <tr>
                    <td class="lastpost-avatar-cont">
                        <!-- BEGIN avatar -->
                        <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                        <!-- END avatar -->
                    </td>
                    <td class="lastpost-cont">
                        <span class="gensmall lastpost-data">{catrow.forumrow.LAST_POST}</span>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <tr>
        <!-- BEGIN inc -->
        <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
        <!-- END inc -->
        <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
    </tr>
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
</table>
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

CSS

Code:
/* category list */
.cattable {
  width: 100%;
  border-spacing: 0px;
  border: none;
  padding: 0px;
}
.cattable .secondarytitle { /* category background */
  background: #e5e5e5;
  height: 100px;
}
.cattable .secondarytitle h2 { /* category title */
  font-size: 27px;
  color: #006699;
}
.cattable .newpost { /* no/new post bar */
  background-color: rgba(0,0,0,0.1);
  height: 10px;
  padding: 0px;
}
.cattable .newpost img{
  height: 10px;
  width: 100%;
}
.forumtable {
  width: 100%;
  border-spacing: 0px;
  border: none;
  padding: 10px 25px;
}
.forumtable .forumdesc table {
  width: 100%;
  border-spacing: 0px;
  border: none;
  padding: 15px 15px;
}
.forumtable .forumdesc {
  box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
  position: relative;
  width: 46%;
}
.forumtable .forumdesc div {/* forum description */
  overflow-y: auto;
  height: 100px;
  text-align: justify;
  padding-right: 5px;
}  
.lastpost-title-cont, .lastpost-cont { /* last-post title/author */
  width: 27%;
  padding-left: 15px;
  text-align: right;
  font-size: 10px;
}
.lastpost-avatar-cont {
  vertical-align: text-bottom;
  padding: 5px 0px 0px 0px;
}
.lastpost-avatar img { /* last-post avatar */
  border-radius: 0px;
  border: 5px solid #006699;
  width: 65px;
  height: 65px;
  margin: -1px;
}

Javascript


placing: on the index

Code:
$(function() {
   // change the value to your default avatar
   var defaultAvatar = 'http://i.imgur.com/G4mMqsw.png?3';


   $('.forumtable').each(function() {
      if ($(this).find('.lastpost-data').text() == '') {
     $(this).find('.lastpost-avatar-cont').html('<span class="lastpost-avatar"><img src="'+defaultAvatar+'" /></span>');
 $(this).find('.lastpost-data').html('<span>No posts in this section.</span>');
  }
  else {
     $(this).find('.lastpost-title-cont').html($(this).find('.lastpost-data span a:first'));
  }
   })
});

Tip: Use as icon of the forums a solid color like : . Your image will repeat himself to fill the bar.




When you need any more info or you find a problem just say.

Mimóza
#2

on Wed Apr 06, 2016 5:31 pm

Graphician
Graphician
avatar
View user profile
GB Coins : 4632
Level : Hobbyist
Program : PSP x8
Behaves well.
Posts : 780
Likes : 202
Wow this looks amazing and so unique! Thanks for sharing!! Very Happy

skouliki
#3

on Wed Apr 06, 2016 7:16 pm

Montana
GB master

Montana GB master
avatar
View user profile http://iconskouliki.forumgreek.com
GB Coins : 8242
Level : Hobbyist
Program : Photoshop
Behaves well.
Posts : 895
Likes : 316
is this going to work on invision ? very unique

10spetter10
#4

on Wed Apr 06, 2016 7:26 pm

Technician
Technician
avatar
View user profile
GB Coins : 2142
Level : Amateur
Program : Photoshop CS5
Behaves well.
Posts : 113
Likes : 88
I'm pretty sure it wont. But I can try to make a version for invision too if you want.

Sponsored content
#5

Sponsored content

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

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