Een paar vraagjes

Ik doorzocht zojuist een site/forum op zoek naar sheets en dergelijke en toen kwam ik op enkele test lay's uit.
Nou zijn m'n vragen, of het mogelijk is om als op deze site;; http://summeratshine.b1.jcink.com/index.php?act=idx voor dezelfde banner te zorgen, hiermee bedoel ik vooral die tabs die erbij komen als je op de pijltjes drukt.

Dan heb ik nog als laatste een vraag;; http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?act=idx Om net als hier voor dezelfde chatbox te zorgen. Het is namelijk zo dat het forum op invisionfree werkt en ik hier niets van afweet ;s

Alvast bedankt voor de moeite.

Slideboxes zijn altijd een serieus werkje. Ik heb eens gekeken naar hun broncode en ik kan hieruit afleiden dat ze fluid CSS3 slider gebruiken. Ik zou zeggen probeer eens of je verder kan als je de tutorial die de site zelf aanbiedt gebruikt. Als het niet lukt wil ik gerust eens proberen of ik iets voor jou kan maken.

Voor dat hover effectje ga ik je even een linkje geven naar een recent topic van gierigegoudzoeker: 'aanvullende onderwerpen'.

Voor de laatste ga ik je weer eens een linkje geven naar een tutorial van Knightmare: zijpaneel slider/chatbox.

Als je meer uitleg/hulp wilt bij een van deze topics of site mag je dit gerust zeggen.

Bij het eerste snap ik één ding niet, namelijk, waar de zogenaamde 'markup' moet geplaatst worden. Ik neem aan dat dit in index body moet geplaatst worden, maar ik kan er ook naast zitten ^^

Dan als laatste, ivm die chatbox, ik heb deze tutorial al eens geprobeerd, maar ik weet niet of het ook gaat voor de chat box uit deze tutorial op dezelfde grootte/hoogte (??) te krijgen als die van ATF. Kortom, is er dus een manier om deze chatbox op dezelfde hoogte te krijgen als het voorbeeld ??

Bij het eerste hangt het ervanaf op welke pagina's je de slider wilt hebben. Ik vermoed dat je het op al de pagina's wilt hebben dus ga je het in 'overall_header' moeten plaatsen. Je kan het eventueel zetten op de plaats waar anders de header zou staan.

Bedoel je voor het tweede dat je wilt dat dit schuifstukje in het midden van de zijkant van je scherm wilt hebben? Want als het dat is zou je dan eens je code die je gebruikte willen posten dan zal ik eens kijken om die te centreren.

Ik zal zo meteen eens kijken of het eerste zal lukken

Voor het tweede, volgens mij heb ik de tutorial ooit 'es op een testforum gebruikt maar volgens mij heb ik deze dan ook weer verwijderd vanwege de niet passende layout e.d.
Voor wat ik trouwens bedoel is voor de chatbox op de voorbeeld link, hierbij zou je op een blauw balkje ad zijkant van de chatbox moeten kunnen klikken om de chatbox weer te verbergen. Dit is zowat de hoogte van de chatbox die ik ook op m'n forum zou willen gebruiken, zoals deze op ATF als je begrijpt wat ik bedoel.

Voor het categorie probleem; deze heb ik zojuist uitgeprobeerd, maar ipv de categorieën te kleuren bij hover, kleurt hij de forums, waar dus alle topics e.d. instaan, is er mss een oplossing waarmee ik dit kan oplossen ?? Dan had ik nog een vraag hieromtrent, of het misschien ook mogelijk is om met verlopen te werken ipv 1 enkele kleur...

Alvast bedankt voor de moeite

Voor die schuiver met een chatbox is het mogelijk om deze zo in te stellen dat je rand waarop je op klikt over heel de lengte staat en je kan ook deze opmaak aanpassen. Het enigste wat je hiervoor nodig hebt is de hoogte van de chatbox in pixels, je kan dus eventueel 'de lelijke' schuiver naar mij doorsturen en dan zal ik eens proberen er iets deftig van te maken. Als je het dan nog niet goed vind dan proberen we het wel eens op een andere manier.

Voor die categorieën is er inderdaad een klein foutje, je moet ongeveer dezelfde tut volgen als degene die ik aan gierige gaf enkel moet je de class="cat_row" niet op lijn 44 zetten maar op 29. Ook moet je deze css gebruiken:

Code:

tr.cat_row td{
  background: none !important;
}

En wat bedoel je precies met verlopen, een gradient dmv css, een achtergrond afbeelding, een box-shadow aan de binnenkant ...? Normaal zouden al deze dingen moeten werken. Je zet je algemene opmaak bij tr.cat_row { en de opmaak bij het er overschruiven bij tr.cat_row:hover {

Ik zal eens m'n best doen deze nog te zoeken maar of ik hem dan ook terug zal vinden is een ander verhaal ;s

Voor de categorieën, de template is al bewerkt geweest, maar om de vorige in te stellen was geen probleem want al het benodigde in de template lag maar een regel hoger.
Voor het verloop, bedoel ik idd gradient. Ik vroeg me af of deze dan zelf moet gemaakt worden d.m.v een plaatje, of deze zou kunnen gemaakt worden met één of andere css code ??
Ik laat je zo meteen iets weten over deze categorieën.
Het opzoekwerk zal wss maar later gebeuren...

EDIT;; deze code werkt niet. Ik heb meermaals de template en de css doorzocht op fouten maar deze heeft geen enkel effect. Ook heb ik de laatste link die je doorstuurde voor de css aangepast van none !important naar transparent, maar ook geen enkel nut.

Nog eens voor je hover-effectje. Zou je anders eens je template willen doorsturen (via dit topic of pm) dan zal ik die class op de juiste plaats zetten, want eens de template is aangepast is het moeilijk om te zeggen waar het staat.

Voor een gradient die verandert bij een hover is het wel een heel geklungel, anders zeg je me de kleuren van de boven en onderkant voor het 'hoveren' en tijdens het hoveren dan zal ik wel wat klungelen.

Voorbeeldje van gradient met hover:

Code:

   {JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->
 
<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>               
<td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%" class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle" align="right">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->
{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
         <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%" class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" colspan="2" height="28">
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
      </td>
   </tr>
   <tr>
      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></td>
   </tr>
   <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span></td>
   </tr>
   {L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}
   <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
   </tr>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
         </span>
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td> &nbsp;</td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->



<div id='container'>
              <div class='tableContent'>
                  <div id='float'>
                    <FONT color=></FONT>
                </div>
        </div>
                <div class='tableContent'>
                  <center><br><span style="font-size: 10px; line-height: normal"><blockquote> Codes: Ondersteunforum van actieforum {Eng, Fr, Ned}, A Thousand Fireflies, Deviantart<br /></a>
                    | Credits: Amari | Music: Winifred Phillips, Jesper Kyd, Lorne Balfe, Brian Tyler, Stromae, Imagine dragons, Hans Zimmer |<br /></a>
                     Er mag niets van dit forum gestolen worden zonder toestemming van de admin!!!</blockquote></span></center>
            <div>
                
            </div>
        </div>

Ik weet niet of het helemaal klopt want toen ik wilde kopiëren, kon ik niet alles in één keer kopiëren, heb het dan maar in twee stukken gedaan.
Het is de index body template

zonder hover:
#E4E3E6 voor de bovenkant graag
#b6b3bc voor het midden(of verloop kleur ??)(niet persé nodig ^^ )
#939098 voor de onderkant

met hover:
#EDF0F0 voor de bovenkant
#dbd7e4 voor het midden (niet persé nodig)
#E4E3E6 voor de onderkant

Mocht het te moeilijk voor je zijn wil ik gerust ook altijd eens proberen, mocht er een tutorial of dergelijke van bestaan ^^
Ik zal later vandaag nog eens m'n best doen om te zoeken achter de infobox code

Ik heb index_box nodig voor die class toe te voegen aan de categorieën.

Oeps ik haal ze even op ^^
Edit m'n post wel

EDIT:

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="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr class="cat_row">
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <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}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <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 -->
    <size=9>{catrow.forumrow.USER_LAST_POST}</size>
  </span>
  <div class="container_aantallen">
      <div class="aantal">
        <span>{catrow.forumrow.TOPICS}</span> topics
      </div>
      <div class="aantal">
        <span>{catrow.forumrow.POSTS}</span> posts
      </div>
  </div>
</td>
   <!-- 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 -->

Hmm in die template zit alles juist hoor. Probeer eens of het met deze css over is of niet.

Code:

tr.cat_row {
    background: -webkit-linear-gradient(#EDF0F0,#E4E3E6,#939098); 
    background: -moz-linear-gradient(#EDF0F0,#E4E3E6,#939098); 
    background: -o-linear-gradient(#EDF0F0,#E4E3E6,#939098); 
    background: linear-gradient(#EDF0F0,#E4E3E6,#939098); 
    -webkit-transition: background 1s ease-out; 
    -moz-transition: background 1s ease-out; 
    -o-transition: background 1s ease-out; 
    transition: background 1s ease-out; 
    background-size:1px 100px; 
    background-position:0px -50px; 
    border-radius: 10px; 
    border: 1px solid #839DB0; 
    cursor:pointer; 
    height: 50px; 
}
tr.cat_row:hover {
  background-position:0px 0px; 
}
tr.cat_row td {
  background:none;
}

Als je nog steeds de hover niet ziet zou je dan eens een linkje willen doorsturen met je forum?

---

Ik heb nog eens gekeken naar die chatbox bij ATF in de broncode zie je mooi van waar al de effectjes komen. De schuiver is van 'SubDevo's Peekaboo Side Tables' en de chatbox zelf van 'cbox.ws'.

Kan het misschien zijn dat er iets niet goed werkt op de forums door de nieuwe schuifbalk ?? Want nou kan ik ook al niet meer de css aanpassen. Ik heb ook al de tabbladen gesloten en weer opnieuw geopend, maar dit heeft ook geen enkele zin.

EDIT: Ik heb de code met wat moeite in de css kunnen krijgen, maar op het forum is nog steeds niets veranderd.
Kan het er mss aan liggen omdat ik zo'n problemen heb met de templates en css aan te passen ?!

Ik heb de probleem ook al ondervonden. Meestal lukt het wel als je zo een 5cm boven je doel klikt. En zou je misschien eens de link van je forum kunnen doorsturen want op mijn testfora lijkt dit het wel te doen. :/

http://asenia.actieforum.com/ Dit is het forum waar ik voor het eerst de problemen ondervond.
Op een ander forum heb ik namelijk hetzelfde probleem. Alleen is het bij dat forum minder erg aangezien het nog niet open is voor publiek.

Oh aan die fout van google chrome kan ik nieks doen. Ik had het forum nodig om te zien waarom die hover van de categorieën niet werkte.

Ik denk nu wel te weten waarom het niet werkte.

Je gebruikt als template 'index_box' dit:

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="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr class="cat_row">
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
     
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
  </tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <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}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
            <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 -->
    <size=9>{catrow.forumrow.USER_LAST_POST}</size>
  </span>
  <div class="container_aantallen">
      <div class="aantal">
        <span>{catrow.forumrow.TOPICS}</span> topics
      </div>
      <div class="aantal">
        <span>{catrow.forumrow.POSTS}</span> posts
      </div>
  </div>
</td>
  <!-- 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 -->

en als css:

Code:

tr.cat_row {
    background: -webkit-linear-gradient(#EDF0F0,#E4E3E6,#939098); 
    background: -moz-linear-gradient(#EDF0F0,#E4E3E6,#939098); 
    background: -o-linear-gradient(#EDF0F0,#E4E3E6,#939098); 
    background: linear-gradient(#EDF0F0,#E4E3E6,#939098); 
    -webkit-transition: background 1s ease-out; 
    -moz-transition: background 1s ease-out; 
    -o-transition: background 1s ease-out; 
    transition: background 1s ease-out; 
    background-size:1px 100px; 
    background-position:0px -50px; 
    border-radius: 10px; 
    border: 1px solid #839DB0; 
    cursor:pointer; 
    height: 50px; 
}
tr.cat_row:hover {
  background-position:0px 0px; 
}
tr.cat_row th {
  background:none;
}

Ik snap je bovenstaand bericht niet zo goed, is het de bedoeling dat ik deze twee gebruik, of juist niet ?? Ik heb nu de css code in m'n css geplaatst, maar nog steeds is er geen verschil zichtbaar op m'n forum.

Je gebruikt de template die ik in het vorige bericht hebt gezet en de css die erbij hoort.

Nou doet hij het wel, behalve dat er geen gradient in zit. Maar ik zal nogmaals m'n css bekijken, en misschien dat hij het dan wel goed doet.
Alvast bedankt.

bij mij doet de hover het wel zelfs met gradient. Waarschijnlijk heeft het dan te maken met de css die niet in alle browsers werkt. Want zelfs op jouw website werkt die. Ik zal eens kijken of ik morgen er een afbeelding van kan maken, dan zou die het wel moeten doen normaal.

---

EDIT

Ik heb het toch nog geprobeerd om vandaag te doen. Kijk eens of het lukt met deze css.

Code:

tr.cat_row {
    background: url('http://i.imgur.com/lAPi24e.png'); 
    -webkit-transition: background 1s ease-out; 
    -moz-transition: background 1s ease-out; 
    -o-transition: background 1s ease-out; 
    transition: background 1s ease-out; 
    background-size:1px 100px; 
    background-position:0px -50px; 
    border-radius: 10px; 
    border: 1px solid #839DB0; 
    cursor:pointer; 
    height: 50px; 
}
tr.cat_row:hover {
  background-position:0px 0px; 
}
tr.cat_row th {
  background:none;
}

Excuses voor het lange wachtten. Maar toen ik even mijn chrome browser weer opende om enkel en alleen op m'n forum zelf bezig te zijn, bleek het uiteindelijk wel te werken. Het was wss zoals je zelf zegt dat de css niet werkt in alle browsers. Uiteindelijk, dit probleem is nou opgelost naar mijn weten. Ik weet niet of ik nog andere problemen had, maar die zal ik zo even terug opzoeken. In ieder geval bedankt voor de raad, en de codes.

Ik edit mijn beginpost wel onmiddellijk en desnoods plaats ik dit topic op opgelost.

Ik zou, nu je weet dat de css-gradient niet 'cross-browser' is, toch eens kijken of de oplossing met de afbeelding werkt. Deze zou het normaal wel moeten doen in alle browsers die transition accepteren.

Ik zal het proberen maar dan pas morgen.
Ik laat het nog weten hoe het werkt op safari.

Ondertussen heb ik nog eens een blik geworpen op m'n andere twee problemen, en voor die ene met de chatbox, had ik eigenlijk de vraag of het mogelijk was om net als op ATF, zo'n kader om de chatbox heen te plaatsen(dus het blauwe kader met de 'frozen' cast op). Het lijkt me een soort van forum widget te zijn, maar dan op de bg geplaatst ipv aan de index/forums/etc grenzend.
Het is mss wat moeilijk uitgelegd, en ik kan morgen pas een voorbeeld printscreen nemen.

Nogmaals bedankt aan de mensen die zich hier mee bezig willen houden.
Ik kan nog steeds alles nachecken op m'n ipod, maar geen plaatjes uploaden

Je kan de inhoud van zo een schuiver aanpassen zoals je wilt. Als je dus een ruimte boven je chatbox wilt hebben kan je hier plaats voor maken:

Code:

<div style="width: 250px; height: 400px; background: #ff0000; padding: 10px;"><div style="width: 100%; height: 120px; background: #0000ff;"></div><div style="width: 100%; height: 270px; background: #ffff00; margin-top: 10px;"></div></div>

Dit kan je nog volledig uitbereiden als je wilt.

Ik heb nog eens gekeken naar de content-slider die je wou. Bij mij lijkt deze wel goed te werken. Je hebt enkel css en html nodig dus nieks javascript wat wel makkelijk is. Aangezien je het wel in de header wilt hebben moet je dit wel aanpassen in de templates.

We zoeken dus in de template 'Overall_header' de code van het logo, hier zijn er twee plaatsen voor, we nemen het stuk 'logo_center' (r249-251):

Code:

<!-- BEGIN switch_logo_left -->
 <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->

Dit vervangen we door:

Code:

<!-- BEGIN switch_logo_center -->
 <div class="sp-slideshow">
 
<input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
 <label for="button-1" class="button-label-1"></label>
 
<input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
 <label for="button-2" class="button-label-2"></label>
 
<input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
 <label for="button-3" class="button-label-3"></label>
 
<input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
 <label for="button-4" class="button-label-4"></label>
 
<input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />
 <label for="button-5" class="button-label-5"></label>
 
<label for="button-1" class="sp-arrow sp-a1"></label>
 <label for="button-2" class="sp-arrow sp-a2"></label>
 <label for="button-3" class="sp-arrow sp-a3"></label>
 <label for="button-4" class="sp-arrow sp-a4"></label>
 <label for="button-5" class="sp-arrow sp-a5"></label>
 
<div class="sp-content">
 <div class="sp-parallax-bg"></div>
 <ul class="sp-slider clearfix">
                                          <li><div style="width: 150px; height: 75px; background-color: #ff0000;"></div></li>
 <li><img src="" /></li>
 <li><img src="" /></li>
 <li><img src="" /></li>
 <li><img src="" /></li>
 </ul>
                                                          </div><style>.sp-content{background-image: url('{LOGO}');}</style>
 <br />
 <!-- END switch_logo_center -->

Daarna mag je dit opslagen en toepassen, vergeet niet dat je de instelling van het logo op gecentreerd moet zetten. Dit vind je onder 'Headers en Navigatie'.

Als je klaar bent met de html kan je de css gewoon aan je eigen css toevoegen:

Code:


.sp-slideshow {
    position: relative;
   margin: 10px auto;
   max-width: 1000px;
   min-width: 260px;
   height: 460px;
}

.sp-content {
    background-color: transparent !important;
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.sp-parallax-bg {
    background: repeat-x scroll 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.sp-slideshow input {
    position: absolute;
   bottom: 15px;
   left: 50%;
   width: 9px;
   height: 9px;
   z-index: 999;
   cursor: pointer;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

.sp-slideshow input + label {
    position: absolute;
    bottom: 15px;
   left: 50%;
    width: 6px;
   height: 6px;
   display: block;
   z-index: 999;
   border: 3px solid #fff;
   border: 3px solid rgba(255,255,255,0.9);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background-color linear 0.1s;
    -moz-transition: background-color linear 0.1s;
    -o-transition: background-color linear 0.1s;
    -ms-transition: background-color linear 0.1s;
    transition: background-color linear 0.1s;
}
.sp-slideshow input:checked + label {
   background-color: #fff;
    background-color: rgba(255,255,255,0.9);
}

.sp-selector-1, .button-label-1 {
    margin-left: -36px;
}

.sp-selector-2, .button-label-2 {
    margin-left: -18px;
}

.sp-selector-4, .button-label-4 {
    margin-left: 18px;
}

.sp-selector-5, .button-label-5 {
    margin-left: 36px;
}

.sp-arrow {
    position: absolute;
   top: 50%;
   width: 28px;
   height: 38px;
   margin-top: -19px;
   display: none;
   opacity: 0.8;
   cursor: pointer;
   z-index: 999;
   background: transparent url(http://i.imgur.com/X5rCvBS.png) no-repeat;
   -webkit-transition: opacity linear 0.3s;
    -moz-transition: opacity linear 0.3s;
    -o-transition: opacity linear 0.3s;
    -ms-transition: opacity linear 0.3s;
    transition: opacity linear 0.3s;
}
.sp-arrow:hover{
   opacity: 1;
}
.sp-arrow:active{
   margin-top: -18px;
}
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {
    right: 15px;
   display: block;
   background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {
    left: 15px;
   display: block;
   background-position: top left;
}

.sp-slider {
    position: relative;
   left: 0;
    width: 500%;
   height: 100%;
   list-style: none;
    margin: 0;
   padding: 0;
    -webkit-transition: left ease-in 0.8s;
    -moz-transition: left ease-in 0.8s;
    -o-transition: left ease-in 0.8s;
    -ms-transition: left ease-in 0.8s;
    transition: left ease-in 0.8s;
}

.sp-slider > li {
   color: #fff;
   width: 20%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   height: 100%;
   padding: 0 60px;
    float: left;
   text-align: center;
   opacity: 0.4;
    -webkit-transition: opacity ease-in 0.4s 0.8s;
    -moz-transition: opacity ease-in 0.4s 0.8s;
    -o-transition: opacity ease-in 0.4s 0.8s;
    -ms-transition: opacity ease-in 0.4s 0.8s;
    transition: opacity ease-in 0.4s 0.8s;
}
.sp-slider > li img{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   display: block;
   margin: 0 auto;
   padding: 40px 0 50px 0;
   max-height: 100%;
   max-width: 100%;
}
input.sp-selector-1:checked ~ .sp-content .sp-slider {
    left: 0;
}

input.sp-selector-2:checked ~ .sp-content .sp-slider {
    left: -100%;
}

input.sp-selector-3:checked ~ .sp-content .sp-slider {
    left: -200%;
}

input.sp-selector-4:checked ~ .sp-content .sp-slider {
    left: -300%;
}

input.sp-selector-5:checked ~ .sp-content .sp-slider {
    left: -400%;
}

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){
   opacity: 1;
}
@media screen and (max-width: 840px){
   .sp-slideshow { height: 345px; }
}
@media screen and (max-width: 680px){
   .sp-slideshow { height: 285px; }
}
@media screen and (max-width: 560px){
   .sp-slideshow { height: 235px; }
}
@media screen and (max-width: 320px){
   .sp-slideshow { height: 158px; }
}

Je kan nog zogoed als alles zelf aanpassen. Ook heb ik gezorgd dat jouw eigen logo dat je instelt via 'plaatjes beheer' zichtbaar is als background van de slider.

Als je nog problemen hebt met het instellen van de slider mag je dit gerust even posten.