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.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 Multi-Colored forums + Mini Profile help
#
Hi, I have a few skinning questions, I did a search to find a thread on this. Since it seems like something that has been asked. And I tried something I found here from a few years ago, but it's not giving me what I want. I tried one code and it just changed the color of the borders, another one doesn't do anything at all. I think I need to add something to the code I already have, I just don't know how.

I want to make each category on a basic jcink forum styled board have different colored forums.

I use this code to change stuff where the forum markers and little strip on the title medium.

CODE
#cat_11 table tbody tr.forum-subheader > :first-child {
background: #238E58; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #238E58 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#238E58), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #238E58 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #238E58 0%,#000000 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #238E58 0%,#000000 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #238E58 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238E58', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

#cat_11 table tbody tr.forum-subheader
{
color: #238E58;
}

#cat_11 table tbody tr.forum-row > :first-child {
background: #238E58; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #238E58 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#238E58), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #238E58 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #238E58 0%,#000000 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #238E58 0%,#000000 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #238E58 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238E58', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


And that basically gets me something like this:

user posted image

Which works for some skins I make, but I am doing a heavy themed game in a little over a week, and I want to customize each category's forums completely colors wise or even images. So I can make them different "Places" and their own colors completely. Like I said, I just don't know how to translate those rows into that code.

Like one category's forums will be white, another brown, another green for example. How do I do I work that into that category code I have so I can customize all of these: .row1,.row3,.row2, .row4 But with backgrounds/back ground colors.

Additionally, a friend's old game from years ago has these avatars that show the mini profile on hover. I kind of don't want to have the post counts or the user group on hover, just an alternate picture or gif.

Here is what I mean:
http://ks7535.b1.jcink.com/index.php?showtopic=316&st=0

If you hover on the Host's avatar "Brenda" you can see what I mean, but like I said, I just want it to change into a gif or another picture, nothing too detailed beyond that.



signature
user posted image

Real time Survivor, Big Brother and many other reality show Role Playing and Strategy Games. PM me for more info!
PM
#
I could be misunderstanding you, but I'm pretty sure this will do what you want:
CODE
#cat-1 td[class*="row"] {
   background: #HEX;
}

#cat-2 td[class*="row"] {
   background: #HEX;
}

#cat-3 td[class*="row"] {
   background: #HEX;
}

signature
user posted image
PM
#
Is that Stargate site your site, or your example? If the latter, can you link to your site so that we can see the miniprofile / index? It'll make it easier to give you an accurate answer.

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
QUOTE (owl @ Jun 5 2018, 01:56 PM)
Is that Stargate site your site, or your example? If the latter, can you link to your site so that we can see the miniprofile / index? It'll make it easier to give you an accurate answer.


No that site is not mine. That is my example of something I want with the hover thing, since it's the only game I've ever seen that in from my gaming community. I just wanted to know how to make things hover in the mini profile or however that works.

I can't actually link you to my current game board, it's not online yet until the 15th and it's gonna be closed to guests until the game is in July.. But this is the usual way I do my games these days:

https://beevivorgixi.jcink.net/index.php?showtopic=329&st=0

That is an example of the way I skin for games I do for myself and others.

All I have in my miniprofile stuff is this:

CODE
<!-- |avatar| -->


<div class="postbit" style="padding: 8px;"><!-- |member_rank_img| --></div>
<div class="postbit" style="color: ffffff; font-weight: bold; font-size: 16px; padding: 3px;">๐Ÿ’€ <!-- |member_group| --> ๐Ÿ’€</div>
<div class="postbit" style="color: ffffff; font-weight: bold; font-size: 12px; padding: 3px;">โ—ˆ Posts: <!-- |member_posts| --> โ—ˆ</div>


<!-- |awards| -->


I don't know if that helps? I haven't really ever messed with the mini profile besides the stuff I posted there. And sometimes adding a counter on games with money or twists that need a counter on profiles.

If it's too much trouble, I don't need to do it. I just thought it would be neat if I could have the avatars show and then hover to another image, like a gif or their ID cards.

Also, Cory thank you so much, that is exactly what I needed. <3

signature
user posted image

Real time Survivor, Big Brother and many other reality show Role Playing and Strategy Games. PM me for more info!
PM
#
What size are your avatars going to be / is there a size or shape you want the GIFs to be?

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
owl you're so amazing. I suck at time management, clearly.

Anyways, the size of my avatars is 205x302

I want to put a gif or ID card on hover in that same size. Unless it needs to be smaller? 205 is my basic avatar width.

signature
user posted image

Real time Survivor, Big Brother and many other reality show Role Playing and Strategy Games. PM me for more info!
PM
#
No worries! Here's an example of a basic avatar with a GIF hover. The example GIF is smaller than the avatar, but it can be up to the size of the avatar, and you can further customize it how you like.

The HTML:

<div class="avatar-wrapper">
<div class="avatar"><img src="AVATAR HERE"></div>
<div class="avatar-hover"><img src="GIF HERE"></div>
</div>

The CSS:

.avatar-wrapper {height: 302px; width: 205px; position: relative}
.avatar-wrapper img {max-width: 100%}
.avatar-hover {position: absolute; top: 0; left; 0; width: 205px; height: 302px; opacity: 0; overflow: hidden}
.avatar-wrapper:hover .avatar-hover {opacity: 1}
.avatar-hover, .avatar-wrapper:hover .avatar-hover {-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}

This post has been edited by owl: Jun 12 2018, 03:14 PM

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
Okay, that works perfectly. I appreciate this very, very much. Thank you <3

I do have one more question though, since I tried it and it works on my host account. How do I make these for each user of the board?

signature
user posted image

Real time Survivor, Big Brother and many other reality show Role Playing and Strategy Games. PM me for more info!
PM
#
Where are you inputting the code I gave you above? In your HTML templates, and if so, which ones?

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
Hey again <3

I only put it in the mini profile HTML template. I am actually not too familiar with how those work, besides the one code I posted here. I never really need them for the games I do normally.

signature
user posted image

Real time Survivor, Big Brother and many other reality show Role Playing and Strategy Games. PM me for more info!
PM
#
Sorry, I didn't realize that. Replace the HTML you have with:

<div class="avatar-wrapper">
<div class="avatar"><!-- |avatar| --></div>
<div class="avatar-hover"><img src="<!-- |field_#| -->"></div>
</div>

The section of the code I highlighted needs to be replaced with the custom profile field you've created for your GIF as a GIF field is not a standard feature. Here's how to create one if you haven't done so yet.

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
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