what are the characteristics of SEO template ?

[mreider]

After working most of yesterday on it, I've got viewtopic.tpl working almost perfect with a subsilver style, zero tables.

I'm just fixing a few errant bugs now, but hope to share it later this weekend

[dcz]

Nice

[sportman1280]

sweet. Looking forward to it .

[mreider]

Ok, it's been a busy weekend There are a few other things I can do with this code, but here's what works for me right now.

Please note this is based on a subsilver template with many mods installed - You'll probably have to play around a little to get it working on your site.

This is just the code to replace the table that shows the posts; not the entire viewtopic.tpl.

The original code looks something like this:

Code: Select all

<table class="forumline" width="100%" cellspacing="1" cellpadding="3" border="0">
   <tr align="right">
      <td class="catHead" colspan="2" height="28"><!-- BEGIN switch_user_logged_in --><span class="nav"><a href="{U_VIEW_OLDER_TOPIC}" class="nav" rel="nofollow">{L_VIEW_PREVIOUS_TOPIC}</a> :: <a href="{U_VIEW_NEWER_TOPIC}" class="nav" rel="nofollow">{L_VIEW_NEXT_TOPIC}</a> &nbsp;</span><!-- END switch_user_logged_in --></td>
   </tr>
   {POLL_DISPLAY}
   <tr>
      <th class="thLeft" width="150" height="26" nowrap="nowrap">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap">{L_MESSAGE}</th>
   </tr>
   <!-- BEGIN postrow -->
   <tr>
      <td width="150" align="left" valign="top" class="{postrow.ROW_CLASS}"><span class="name"><a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b></span><br /><span class="postdetails">{postrow.POSTER_RANK}<br />{postrow.RANK_IMAGE}{postrow.POSTER_AVATAR}<br /><strong><em>{postrow.CUSTOM_TITLE}</em></strong><br />{postrow.POSTER_JOINED}<br />{postrow.POSTER_POSTS}<br />            {postrow.POSTER_FROM}</span></td>
      <td class="{postrow.ROW_CLASS}" width="100%" height="28" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td width="100%"><img src="{postrow.MINI_POST_IMG}" width="12" height="9" alt="" /><span class="postdetails">{L_POSTED}: {postrow.POST_DATE}</span></td>
            <td valign="top" nowrap="nowrap">{postrow.QUOTE_IMG} {postrow.EDIT_IMG} {postrow.DELETE_IMG} {postrow.IP_IMG}</td>
         </tr>
         <tr>
            <td colspan="2"><hr /></td>
         </tr>
         <tr>
            <td colspan="2"><span class="postbody">{postrow.MESSAGE}{postrow.SIGNATURE}</span></td>
         </tr>
      </table></td>
   </tr>
   <tr>
      <td class="{postrow.ROW_CLASS}" width="150" align="left" valign="middle"><!-- BEGIN switch_user_logged_in --><span class="nav"><a href="#top" class="nav" rel="nofollow">{L_BACK_TO_TOP}</a></span><!-- END switch_user_logged_in --></td>
      <td class="{postrow.ROW_CLASS}" width="100%" height="28" valign="bottom" nowrap="nowrap">{postrow.PROFILE_IMG} {postrow.PM_IMG} {postrow.EMAIL_IMG} {postrow.WWW_IMG} {postrow.AIM_IMG} {postrow.YIM_IMG} {postrow.MSN_IMG} {postrow.ICQ_IMG}</td>
   </tr>
   <tr>
      <td class="spaceRow" colspan="2" height="1"><img src="/fi/spacer.gif" alt="" width="1" height="1" /></td>
   </tr>
   <!-- END postrow -->
   <tr align="center">
      <td class="catBottom" colspan="2" height="28"><table cellspacing="0" cellpadding="0" border="0">
         <tr><form method="post" action="{S_POST_DAYS_ACTION}">
            <td align="center"><span class="gensmall">{L_DISPLAY_POSTS}: {S_SELECT_POST_DAYS}&nbsp;{S_SELECT_POST_ORDER}&nbsp;<input type="submit" value="{L_GO}" class="liteoption" name="submit" /><br />{S_TIMEZONE}</span></td>
         </form></tr>
      </table></td>
   </tr>
</table>

I replaced the above with:

Code: Select all

<div id="c2"><!-- BEGIN switch_user_logged_in --><a href="{U_VIEW_OLDER_TOPIC}" class="nav" rel="nofollow">{L_VIEW_PREVIOUS_TOPIC}</a> :: <a href="{U_VIEW_NEWER_TOPIC}" class="nav" rel="nofollow">{L_VIEW_NEXT_TOPIC}</a><!-- END switch_user_logged_in --></div>    
<div id="c3"><b>{L_AUTHOR}</b> <b>{L_MESSAGE}</b></div>
<!-- BEGIN postrow -->
<div id="pc" class="{postrow.ROW_CLASS}">
<div id="p1" class="{postrow.ROW_CLASS}">
<span class="name"><a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b></span><br /><span class="postdetails">{postrow.POSTER_RANK}<br />{postrow.RANK_IMAGE}{postrow.POSTER_AVATAR}<br /><strong><em>{postrow.CUSTOM_TITLE}</em></strong><br />{postrow.POSTER_JOINED}<br />{postrow.POSTER_POSTS}<br />            {postrow.POSTER_FROM}</span>
</div>
<div id="p2" class="{postrow.ROW_CLASS}">
<dl><dt><img src="{postrow.MINI_POST_IMG}" width="12" height="9" alt="" />{L_POSTED}: {postrow.POST_DATE}</dt><dd>{postrow.QUOTE_IMG} {postrow.EDIT_IMG} {postrow.DELETE_IMG} {postrow.IP_IMG}</dd></dl>
<hr />
{postrow.MESSAGE}{postrow.SIGNATURE}
</div>

<div id="c5" class="{postrow.ROW_CLASS}"><hr />{postrow.PROFILE_IMG} {postrow.PM_IMG} {postrow.EMAIL_IMG} {postrow.WWW_IMG} {postrow.AIM_IMG} {postrow.YIM_IMG} {postrow.MSN_IMG} {postrow.ICQ_IMG}<hr /></div>

</div>
   <!-- END postrow -->
   
   <div id="c2" align="center" style="clear:both;">
   <form method="post" action="{S_POST_DAYS_ACTION}">
            <span class="gensmall">{L_DISPLAY_POSTS}: {S_SELECT_POST_DAYS}&nbsp;{S_SELECT_POST_ORDER}&nbsp;<input type="submit" value="{L_GO}" class="liteoption" name="submit" /><br />{S_TIMEZONE}</span>
         </form>
   </div>

And then I have the following in an external CSS:

Code: Select all

#c2,#c3{width:100%;height:25px;}
#c2 { background:url(images/cellpic1.gif) repeat-x;text-align:right;border:1px solid; border-color:#006699;}
#c3 { background:url(images/cellpic3.gif) repeat-x;border-left:1px solid;border-right:1px solid;border-bottom:1px solid; border-color:#006699;}
#c3 b{color:#FF9900; padding-right:103px;}
#c4 {background:url(images/cellpic1.gif) repeat-x;width:100%;padding-left:152px;}
#c5 {width:auto;height:35px;margin-left:152px;clear:left;}
#c5,#p2{border-left:1px solid #fff;}
#p1 {width:150px;float:left;display:inline;}
#p2 {margin-left:150px;width:auto;line-height: 18px;}

dl {margin: 0;padding: 0;width: auto;}
dt {font-size:11px;padding: 4px 11px 2px;float: left;}

dd {font-size: 0.8em;text-align: right;padding: 4px 11px 0 0;}

Now as I mentioned - This works on my current version of the template and could definitely be further modified to work better. And I'm working on it

But play around with it, it should give you a head start.

Enjoy!

[dcz]

Really nice

PM me if you want to organize sharing a bit more

++

[AmirAbbas]

thanks mreider

i will try your codes

finally i found a solution for that IE bug
just a little CSS code was needed

Code: Select all

line-height: 1.2;

for the container div
special thanks to matthew somerville


now the first page (index_body.tpl) is finished
im going to styling viewforum

[mreider]

Very cool.

I hope my code helps you out a bit. I'm going to further optimize it and finish the page. The thing is, on my site I use a quick reply and a few other mods that need to be re-styled as well. But now that I've figured out the system it should be easy to do. Now to just find the time!

[mreider]

Just an update - I've been using the viewtopic.tpl code I posted above and it's working really well!

Still having trouble getting the indexbody working well, but I'll get it eventually

[flozo]

lol... i got anoyed with phpBB having the styles in the head so i just deleted them all, and linked it to a external style sheet.

I never use the admin panel to change the CSS so its all good

I have done extensive redesigns to my phpBB... without changing all the template files and keeping the original phpBB layout, i think its best to keep the defualt layout so its easier for the users.

I will post my forum once i have released it. (it is still in development).

-Flozo

[mreider]

Yeah that's what I've done my css on the viewtopic - It still looks the same as subsilver (with minor differences if you wanna be picky ).

I also found a lot of styles in my stylesheet were duplicates - Like some of the classes had basically the same properties as other ones, so I combined several styles. I also re-wrote the default css into shorthand.

[sportman1280]

how is the progress on this going? just curious. Im sooo excited. lol

[AmirAbbas]

how is the progress on this going? just curious. Im sooo excited. lol

unfortunately progress is slow
im very busy these days. its near the end of the term in college.
i styled the viewforum a bit
i orgenized viewforum codes and i put everything in li tag
at the weekend (our weekend , friday) i can work on it again

[sportman1280]

oh ur still in classes?
ouch!

[AmirAbbas]

oh ur still in classes?
ouch!

which classes ?
CSS classes or college classes ?

its off topic but ...
yes i'm studying.
in our country the military service is mandatory (exactly 20 months). first i finished the military service.
after that i tried for colledge entrance exam
first i accepted in agricauture engineering but i didn't like it. i tried another time.
now im studying in field english, major translation.

for developing this template i need time.
developing template is not hard. but there is some annoying problem in working with CSS
all Internet Explorer browsers have problem in rendering CSS pages. you need lot of CSS hack
and lot of experience in CSS design. im familiar with CSS but i don't have experience in CSS design
im learning CSS during developing this template.

[sportman1280]

oh no, i meant you arent on christmas break or something. I am now . Thats why ive been ablet o put so much time into some of the plugins. I frankly am not goodenough with css to help with this project though. I love the design though and cant wait for it .