Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 multiple forum styles - cfs
#
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


This post has been edited by sidsidsid: Nov 3 2016, 12:06 PM
PM
#
can anyone help me with this?
PM
#
    Can you provide a URL where this skin is active and a copy of the Forum Row template?
PM
#
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>


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>
PM
#
thank you so much for replying, unfortunately it didn't work. I also tried #row-1 .cfspic as well, no luck.
PM
#
nevermind, I got it! thank you so much for the help!!

This post has been edited by sidsidsid: Nov 17 2016, 01:20 PM
PM
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll