Issues with new skin

[Samantha 64]

So I'm just reusing this post for a new problem we're having. 

 

The topics show up like this under the new skin: http://i.imgur.com/Qwi9jf5.png - there are some issues with it just as it is - like the text being cut off and the fact that it takes up wayyyy more space than it needs to. But what I actually want to know is how to change this so that it just displays the threads in a list like most forums do - and like our forum does now: http://i.imgur.com/ghU5pLW.png . 

 

This is also just too big of a change and I know my members will hate it. Plus - we have too many threads in each forum to use something like this that takes up this much space. I know how to make these smaller, but what I really want is to just display them like we have on our site now. 

 

If anyone could help that would be amazing. If you need it - the site we're testing on is http://sintesting.jcink.net/ and we're using JCINK premium. 

 

 

 

 

Edited June 23, 2017 by Samantha

[Samantha 64]

edited: I also just realized that I can't get my custom BBC codes to work. 

[anthrxmilkshake 86]

Heya, Sammeh. I recognize this layout because it's one I've picked apart already for the forum problem. I had to try and make them sit side by side, as it is they look absolutely ridiculous and take up way to much space. I'm going to go grab the codes and give it a go to do what you want, displaying the threads as a normal list. I'm pretty sure that's something I can do myself after having already picked this skin apart before. I'll get back atcha with what I come up with! @Samantha

[Samantha 64]

@anthrxmilkshake that would be amazing! I have a theory that when it's just a list they're justing using the standard format for JCINK servers and deleting the code for the forums kind of worked but there were still some issues. >.>

 

if it's possible I'd like to have every other topic be a different color like the first line is #111 and the next is #333 or something. 

Edited June 23, 2017 by Samantha

[anthrxmilkshake 86]

@Samantha

 

How is this: http://beaconrock.jcink.net/index.php?showforum=1

[anthrxmilkshake 86]

Okay codes going here because it's easier than Discord:

 

I can't remember which part I changed, though I'm pretty sure all of it, so replace ALL of this right to the part that says "quotes and codes".

 

/****** TOPIC STYLES ******/

.topicrows { display: block; }

.topicRow {
position: relative;
    background-color: transparent;
    padding: 5px;
    margin: 5px;
    width: 800px;
    display: block;
    border-bottom: 1px solid #ddd;
}

.topicWrap {
    width: 800px;
    position: relative;
left: 0px;
    background-color: transparent;
    border: 0px solid #ddd;
    padding: 5px;
    
}

.tmarker {
    background-color: transparent;
    width: 15px;
    float: left;
    padding: 10px 5px;
    font-size: 12px;
    color: #fff;
    border: 0px solid #ddd;
    position: relative;
    overflow: hidden;
    z-index: 1;
margin-top: 14px;
}

.tmarker:before {
    content: "";
    width: 200px;
    height: 100px;
    background-color: transparent;
    transform: rotate(-47deg);
    position: absolute;
    margin-left: 129px;
    margin-top: -28px;
    z-index: -1;
}

.marker a, .tmarker a {
    color: #fff;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    text-decoration: none;
}

.marker a:hover, .tmarker a:hover { color: #222; }

.tname {
padding: 2px;
text-align: left;
    font-size: 10px;
    text-transform: uppercase;
background: transparent;
color: white;
margin-top: 14px;
}

.tdesc {
color: white;
text-align: left;
background: transparent;
    font-size: 9px;
    padding: 4px;
    border: 0px solid #ddd;
    overflow: auto;
}

.tlpost {
    position: absolute;
right: 0px;
    width: 266px;
    margin-left: -12px;
    padding: 6px 5px 4px 5px;
    margin-top: 5px;
    font-size: 7px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white;
    height: 11px;
    background-color: transparent;
    border: 0px solid #ddd;
}

.topicRow .section2 {
    margin-top: -15px;
    margin-left: -106px;
    width: 376px;
}

.topicRow .section2a, .topicRow .section2b {
    width: 100px;
height: 10px;
display: inline-block;
    margin-left: 100px;
background: transparent;
    border: 0px solid #ddd;
    margin: 4px;
}
.topicRow .section2a:before, .topicRow .section2b:before{
background: transparent;
}
.topicRow .section2a i, .topicRow .section2b i{
background: transparent;
color: transparent;
}

.factive {
    text-align: left;
    text-transform: uppercase;
    font-style: italic;
}

.announcements {
    background-color: #50584B;
    border: 1px solid #50584B;
    margin: 10px 0px 20px 0px;
    padding: 0px 0px 10px 0px;
}

.announcements h1, h1.ftTitle {
    text-transform: uppercase;
    font-family: 'Barrio', cursive;
    letter-spacing: 5px;
    background-color: #222;
    color: #fff;
    padding: 10px;
    font-size: 14px;
    margin-top: 0px;
}

.tlheader b { display: all; }

Next is you need to find this line of code:

 

.topicRow .section2a, .topicRow .section2b

 

Replace that with:

 

.topicRow .section2a, .topicRow .section2b {
    width: 100px;
height: 10px;
display: inline-block;
    margin-left: 100px;
background: transparent;
    border: 0px solid #ddd;
    margin: 4px;
}

 

Than immediately below that add this code:

 

.topicRow .section2a:before, .topicRow .section2b:before{
background: transparent;
}
.topicRow .section2a i, .topicRow .section2b i{
background: transparent;
color: transparent;
}

 

 

@Samantha

[Samantha 64]

@anthrxmilkshake thank you so so so much

[anthrxmilkshake 86]

I'm glad I was able to help you with your problems, Sammeh!