2 Vraagjes

Ik heb me even bezig gehouden met de eerste vraag. Ik heb dit als resultaat:


(let niet op de kleurtjes )

Je moet hiervoor de template 'Index_box' aanpassen.

Beheerderspaneel Display Templates Algemeen

Als je deze nog niet bewerkt had vervang je regel 48 tot en met regel 72 door onderstaande code:

Code:

<td colspan="5">
<table class="tabel_cat" style="width: 100%;">
 <tr>
 <td colspan="5" class="cat_lastpost" style="text-align:right;">
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </td>
 </tr>
 <tr>
 <td rowspan="2" align="center" valign="middle"  class="{catrow.forumrow.INC_CLASS} cat_img">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </td>
 <td rowspan="2"class="cat_topics_posts">
 <div>Topics</br></br><span class="gensmall">{catrow.forumrow.TOPICS}</span></div>
 </td>
 <td rowspan="2"class="cat_topics_posts">
 <div>Posts</br></br><span class="gensmall">{catrow.forumrow.POSTS}</span></div>
 </td>
 <td rowspan="2" class="cat_vulling">
 
 </td>
 <td class="cat_titel">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 </span>
 </td>
 </tr>
 <tr>
 <td>
 <div class="cat_desc">
 <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
 <span class="gensmall">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </div>
 </td>
 </tr>
</table>

Daarna gaan we opmaken door middel van css.

Beheerderspaneel Display Plaatjes en kleuren Kleuren Cascading Style Sheet

Hier plak je onderstaande code:

Code:

/* --- START opmaak categorieën --- extra info over de codes: http://i.imgur.com/U0FIZMq.png */
td.cat_lastpost br,td.cat_lastpost br:after {
content: ' ';
}
div.cat_desc{
float: right;
margin-right: 20px;
border: 1px green solid;
width: 100%;
}
table.tabel_cat{
width: 100%;
background: yellow;
border-spacing: 0px;
}
.cat_lastpost{
text-align: right;
background: green;
}
.cat_img{
width: 1px;
}
.cat_topics_posts{
width: 7%;
}
.cat_topics_posts div{
font-size: 12px;
text-align: center;
background: red;
}
.cat_topics_posts div span{
font-weight: 800;
}
.cat_vulling{
width: 20%;
}
.cat_titel{
}
div.cat_desc {
float: right;
margin-right: 20px;
border: 1px green solid;
width: 100%;
}
/* --- EINDE opmaak categorieën --- */

Als het niet werkt of nog moet aangepast worden mag je dit gerust posten.

#templateEdit

Probeer eens om bij je css van .cat_img een padding toe te voegen, het kan zijn dat het niet mooi uitkomt. Als het zo is moet er een kolom toegevoegd worden.

Code:

.cat_img{
padding-right: 20px !important;
}

Om 'topics', 'berichten' en 'laatste bericht' weg te krijgen ga je naar de templates -> index_box. Dan zoek je dit op:

Code:

      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>

Als je het niet hebt aangepast vind je het op regel 23. Dit verwijder je en voilà, geen balkjes meer.



Nu een een probleempje van mezelf. Ik heb deze code nu gebruikt, alleen wil ik het graag andersom hebben: De kleine vakjes rechts en het grote tekstvlak links. Hoe kan ik dit aanpassen?

Bedoel je met de kleine vakjes ook de afbeelding?

Het is namelijk enkel wat kolommen verplaatsen.

Ik weet niet of het een afbeelding is, maar ik wil dit andersom hebben:

Zou iemand hier nog even naar kunnen kijken?

Eerst even een uitleg over tables, aangezien het eigenlijk gewoon een table is:

Een table bestaat uit verticale rijen en horizontale rijen. De tr-tags staan voor de horizontale rijen. Die horizontale rijen zijn onderverdeeld in verticale rijen, aka de td-tags. Om twee verticale rijen te verwisselen, moet je dus twee td stukjes verwisselen. In dit geval moet je dit stukje (dat is de boarduitleg) verplaatsen:

Code:

<td rowspan="2" class="cat_vulling">
        
      </td>

Het moet vóór dit stukje (de topics en posts) komen te staan:

Code:

<td rowspan="2"class="cat_topics_posts">
         <div>Topics</br></br><span class="gensmall">{catrow.forumrow.TOPICS}</span></div>
      </td>
      <td rowspan="2"class="cat_topics_posts">
         <div>Posts</br></br><span class="gensmall">{catrow.forumrow.POSTS}</span></div>
      </td>

Als het goed is, zou het dan moeten werken. Ik heb het zelf verder niet getest.

Uh, nu heeft hij er dit van gemaakt:


Dit is de code zoals ik hem nu heb:

Code:

<td colspan="5">
<table class="tabel_cat" style="width: 100%;">
  <tr>
      <td colspan="5" class="cat_lastpost" style="text-align:right;">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
  </tr>
  <tr>
      <td rowspan="2" align="center" valign="middle"  class="{catrow.forumrow.INC_CLASS} cat_img">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
    <td rowspan="2" class="cat_vulling">
       
      </td>
      <td rowspan="2"class="cat_topics_posts">
        <div>Topics</br></br><span class="gensmall">{catrow.forumrow.TOPICS}</span></div>
      </td>
      <td rowspan="2"class="cat_topics_posts">
        <div>Posts</br></br><span class="gensmall">{catrow.forumrow.POSTS}</span></div>
      </td>

      <td class="cat_titel">
        <span class="forumlink">
            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        </span>
      </td>
  </tr>
  <tr>
      <td>
        <div class="cat_desc">
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
            <span class="gensmall">
              <!-- BEGIN switch_moderators_links -->
              {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
              <!-- END switch_moderators_links -->
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
        </div>
      </td>
  </tr>
</table>

Je zat bijna juist Lone Wanderer, het is ook moeilijker om iemand anders manier van denken, en dus ook van html schrijven helemaal door te hebben. cat_vulling had ik gebruikt voor een marge te maken tussen de posts/topics en de beschrijving. Je moest dus het stukje van de topics en posts:

Code:

<td rowspan="2"class="cat_topics_posts">
         <div>Topics</br></br><span class="gensmall">{catrow.forumrow.TOPICS}</span></div>
      </td>
      <td rowspan="2"class="cat_topics_posts">
         <div>Posts</br></br><span class="gensmall">{catrow.forumrow.POSTS}</span></div>
      </td>

Dit stuk had je wel juist

Ruilen met de titel van je categorie/forum naam:

Code:

<td class="cat_titel">
         <span class="forumlink">
            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
         </span>
      </td>

---

Uiteindelijk zou je dan deze code krijgen:

Code:

<td colspan="5">
<table class="tabel_cat" style="width: 100%;">
   <tr>
      <td colspan="5" class="cat_lastpost" style="text-align:right;">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>
   <tr>
      <td rowspan="2" align="center" valign="middle"  class="{catrow.forumrow.INC_CLASS} cat_img">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td rowspan="2" class="cat_vulling">
        
     </td>
      <td class="cat_titel">
         <span class="forumlink">
            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
         </span>
      </td>
      <td rowspan="2"class="cat_topics_posts">
         <div>Topics</br></br><span class="gensmall">{catrow.forumrow.TOPICS}</span></div>
      </td>
      <td rowspan="2"class="cat_topics_posts">
         <div>Posts</br></br><span class="gensmall">{catrow.forumrow.POSTS}</span></div>
      </td>
   </tr>
   <tr>
      <td>
         <div class="cat_desc">
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
            <span class="gensmall">
               <!-- BEGIN switch_moderators_links -->
               {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
               <!-- END switch_moderators_links -->
               {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
         </div>
      </td>
   </tr>
</table>

Het werkt! Alleen zit er nu heel veel ruimte tussen de board beschrijvingen en het icoon:




Hoe krijg ik dit kleiner? Heb al wat met de CSS code lopen kloten, maar het lukt niet -___-'

Misschien heb je dan niet met het goede stukje zitten kloten.

Code:

.cat_vulling{
  width: 10%;
}

Jaaa, dat was hem! Bedankt :3