• Announcements

    • Morrigan

      Please don't PM me questions   05/18/2017

      This is a very important thing that I need to express to the members of the Initiative a little more clearly so you understand why I'm posting this message as I get a lot of PMs and random support requests regarding things on this site and it is extremely overwhelming to get these PMs.   There is a lot of stuff on the site that I manage solo. From the spotlight challenges, to the challenges (when I'm able to get to them), to archiving items, to approving items etc. We have a lot of cool features and trust me when I say I'm not saying we need to reduce because I feel everything that we have has it's place and purpose however I do, do  it all alone. (Shamelessly plugs staff wanted stuff 😉 )   So with that explained I have to explain why I'm asking that members stop PMing me questions. First off, we provide many different places that probably already answer your questions including our FAQ and our Ask Us fourm. We also provide forum avenues for you to contact the staff (in general instead of a single staff member) via our forums through the "Staff Contact Center" where you can either contact the staff publicly or privately. While it is your preference which one you put out there these avenues are more quick for you to get a response.   When you PM me (first off you'll get an auto reply with this information reiterated in it) but it's very likely I will dismiss it and get to it later. PMs are not my priority as they are used for private messages between myself and a member and not something site related which will be explained below as to how my priorities work for managing as I go:   Priorities listed in order from top to bottom regarding sites: Site/Server Down Site/server slowness Hosting issues (any of the initiative hostees having a problem) Payment issues Reported content Staff Contact Center Contact (and of the forums there) Chat Approvals Site checks (looking through forums) Roll outs of any kid that I have created (challenges, content etc) PMs Distant Fantasies   This isn't to say that your PM won't get answered however all of those other things take precedence over a PM and as you can see I'll answer you in the Staff Contact Center before I even check my PMs to see what you need.
Sign in to follow this  
Rune

Help Condensing Shipper

Recommended Posts

So, basically I have a million characters. And I know next to nothing about coding.

 

What I'm after is an accordion style shipper in which I can condense my hoard down to boxes with their names that can be clicked and brought open with more information: Picture, personality, relationship, etc. Bonus points if I can colour coordinate/organize said boxes into groups.

 

Extra bonus points if its easy to copy/paste to add more characters. 

 

Any suggestions?

Share this post


Link to post
Share on other sites

49 minutes ago, Morrigan said:

Do you want something where the accordion is broken up with the categories (like header breaks) or something you can separate?

Categories would be excellent. 

Share this post


Link to post
Share on other sites

Here you go. Let me know of any changes like different fonts etc. The colors are defined at the element level so you can make them whatever you want per category per character:

  <link href="https://fonts.googleapis.com/css?family=Bangers|Barrio" rel="stylesheet"> 
  <style>

 /* Style the divs that are used to open and close the character panel */
div.character, div.category {
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    text-align: center;
    text-transform: uppercase;
    font-family: Bangers;
    font-size: 25px;
}
div.category {
  font-size: 30px;
  font-weight: 700;
  font-family: Barrio;
  }


/* Add a background color to the div if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
div.character.active, div.character:hover {
    background-color: #111;
}

/* Style the character panel. Note: hidden by default */
div.panel {
    padding: 0;
    background-color: #444;
    display: none;
	color: #CCC;
  width: 100%
}
div.char_panel {
    padding: 18px;
    background-color: #444;
    display: none;
	color: #CCC;
  width: 100%
}
.morrdisclaimer {
	font-size: 10px;
	text-align: right;
}
</style>
<script>
var acc = document.getElementsByClassName("character");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        /* Toggle between adding and removing the "active" class,
        to highlight the div that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
} 

var acc = document.getElementsByClassName("category");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        /* Toggle between adding and removing the "active" class,
        to highlight the div that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
} 
</script>

<div class="category" style="background: #a8679b; color: #FFF;">Category</div>
<div class="panel">
<div class="character" style="background: #4b0404; color: #FFF;">Character</div>
<div class="char_panel">
  The character stuff
</div>

<div class="character" style="background: #0b044b; color: #FFF;">Character</div>
<div class="char_panel">
  The character stuff
</div>

<div class="character" style="background: #ff1cd2; color: #FFF;">Character</div>
<div class="char_panel">
  The character stuff
</div> 
</div>

<div class="category" style="background: #67a872; color: #FFF;">Category</div>
<div class="panel">
<div class="character" style="background: #4b0404; color: #FFF;">Character</div>
<div class="char_panel">
  The character stuff
</div>

<div class="character" style="background: #0b044b; color: #FFF;">Character</div>
<div class="char_panel">
  The character stuff
</div>

<div class="character" style="background: #ff1cd2; color: #FFF;">Character</div>
<div class="char_panel">
  The character stuff
  </div> </div>
  <div class='morrdisclaimer'>Made by Morrigan of <a href="https://rpginitiative.com">RPG Initiative</a></div>

 

I'm going to likely release this as an Initiative code if that's cool with you dear.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.