Citta FAQ Page Code Instructions

1. Adding Tabs

--- 1a. I'd generally recommend to only add tabs after the last existing tab, rather than adding new ones in between already-existing ones. It just requires some kind of annoying editing to add them in between. See 1c for details, tho.


--- 1b. Here's the template for the tabs:

<!-----------------------------------------
TAB NUMBER
------------------------------------------>
   <div class="tab">
       <input type="radio" id="tab-#" name="tab-group-1">
                <label for="tab-#"><div class="middle">
                            TAB LABEL
                </div></label>

       <div class="content">
       <div class="post">
            <div id="header">HEADER (this is optional)</div>

            content

       </div> <!-- POST -->
       </div> <!-- CONTENT -->
   </div> <!-- END TAB # -->


I had the tabs separated and numbered at the top (the <!--> things) and end for readability's sake. For example, as there are four tabs by default, the next would be "TAB FIVE", and at the end would be "END TAB 5". These aren't important to functionality, they're just for the benefit of people having to sift through the code (partly me while I was editing it tbh). However, what you MUST change are the IDs. Change the # to the number of the tab in order from the top; the next tab added would be number five, so it'd read

       <input type="radio" id="tab-5" name="tab-group-1">
                <label for="tab-5">

and so on. If you don't do this, you're pretty much screwed.

Everything else ought to be fairly self-explanatory.



--- 1c. ...unless you decided to add it in the middle of the tabs instead of at the end. My issue with this is having to go through and re-number all the tabs after the one you add. You can't just add a tab with the ID "tab-5" in between "tab-3" and "tab-4". You'd number it "tab-4", and then change "tab-4" to "tab-5". It's not unfeasible, just kind of a pain if you want to add the tab after the first tab and you have 8 tabs. It's easy to lose track of which you've modified and which you haven't.



2. In general, this is the format I was using for questions:

<ul>
<li> <i>question</i>
</ul>
<p>answer</p>

Not really that hard. In some cases, however, it might be easier to format large numbers of questions in Tumblr's post editor (it's faster tbh) and then copy the HTML into the code.



3. If you have questions or need something changed drastically, it's usually easiest for the person who made the code to modify it, so feel free to let me know via Skype (twitchingwithsanity) or Tumblr (abstersivetournure) or whatever works.