Printable Version of Topic
Click here to view this topic in its original format
Jcink.com Forums > General Support > multiple forum styles - cfs


Posted by: sidsidsid Nov 3 2016, 12:04 PM
Hi! So I used to use black's CFS for styling my forums. This is the code I had for styling them so that every forum had a different image. (I used forum descriptions for quick links and forum info and then made a separate div style for forum description-pictures)

CODE
#forums .rvcfspic { border-radius: 360px; -moz-border-radius: 360px; -webkit-border-radius: 360px; width: 120px; height: 120px; border: 3px solid #ddb5cd; position: absolute; margin-top:-65px; margin-left: -45px; background-image:url(http://s15.postimg.org/qwxzbqpkr/Lighthouse.png); background-size: cover; }

div#row-1 .rvcfspic { background: url(http://s15.postimg.org/ys8iqjz7f/showforum1.png); background-size: cover; }
div#row-3 .rvcfspic { background: url(http://s22.postimg.org/4widhfxpd/showforum3.png); background-size: cover; } div#row-4 .rvcfspic { background: url(http://s15.postimg.org/63vknbx17/showforum4.png); background-size: cover; }
div#row-5 .rvcfspic { background: url(http://s15.postimg.org/45owpc4jf/showforum5.png); background-size: cover; }
div#row-6 .rvcfspic { background: url(http://s15.postimg.org/z3ukh2517/showforum6.png); background-size: cover; }
div#row-7 .rvcfspic { background: url(http://s15.postimg.org/wrhz5q323/showforum7.png); background-size: cover; }
....and so on.......


Basically, what happened was that every forum had its own picture through CSS.

Since migrating to HTML Templates, I haven't been able to mirror this feature with a new code, if anyone can help me, that'd be great. does "div#row...." work for HTML Templates's Forum Rows? I tried #row-1 without the "div" that didn't work either.

I referenced this tutorial on rpg directory that helped me last time, but that page is no longer available when I googled "Multiple CFS Styles,"


this is my code at the moment:

CODE
.cfspic { width: 120px; height: 120px; background-image: url(http://placehold.it/120x120); background-size: cover; border: 5px solid fff; outline: 1px solid #f8f8f8;  }
div#row-1 .cfspic { background: url(http://s15.postimg.org/ys8iqjz7f/Admin_Section_2.png); background-size: cover; }
div#row-3 .cfspic {.... so on

Posted by: sidsidsid Nov 8 2016, 10:42 AM
can anyone help me with this?

Posted by: multiplicity! Nov 8 2016, 12:54 PM
    Can you provide a URL where this skin is active and a copy of the Forum Row template?

Posted by: sidsidsid Nov 9 2016, 01:30 AM
CODE
<div id="forums"><tr class="forum-row">

<td><div class="cfspic"></div></td>
<td>
 <table><tr><td><div class="cfname"><a href="?showforum=<!-- |id| -->"><!-- |name| --></a> </div></td></tr>

 <tr><td><div class="fi1"><!-- |topics| --> topics</div> <div class="fi1"><!-- |replies| --> replies</div></td><tr></table>
</td>
<td><div class="cfsdesc"> <!-- |description| --> </div></td>

<td>  <div class='lastpost'><div class='lastpostinfo'><div class='lptitle'><!-- |last_topic| --></div> <BR> BY <!-- |last_poster| --> - <!-- |last_post| -->.</div></div></td>


</tr></div>



Posted by: multiplicity! Nov 9 2016, 01:22 PM
    Try replacing your forum row template with this:

    CODE
    <div id="row-<!-- |forum_id| -->" class="new-row"><div id="forums"><tr class="forum-row">

    <td><div class="cfspic"></div></td>
    <td>
    <table><tr><td><div class="cfname"><a href="?showforum=<!-- |id| -->"><!-- |name| --></a> </div></td></tr>

    <tr><td><div class="fi1"><!-- |topics| --> topics</div> <div class="fi1"><!-- |replies| --> replies</div></td><tr></table>
    </td>
    <td><div class="cfsdesc"> <!-- |description| --> </div></td>

    <td>  <div class='lastpost'><div class='lastpostinfo'><div class='lptitle'><!-- |last_topic| --></div> <BR> BY <!-- |last_poster| --> - <!-- |last_post| -->.</div></div></td>


    </tr></div></div>

Posted by: sidsidsid Nov 9 2016, 09:22 PM
thank you so much for replying, unfortunately it didn't work. I also tried #row-1 .cfspic as well, no luck.

Posted by: sidsidsid Nov 15 2016, 02:44 PM
nevermind, I got it! thank you so much for the help!!

'
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)