1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Collapse categories with checkbox

Discussion in 'Template Modifications [Archive]' started by CyberAP, Jan 30, 2012.

  1. CyberAP

    CyberAP Well-Known Member

    This is mostly a proof of concept. With 2 template edits you can create a checkbox that will collapse the desired category on click. The cons: the input button state can't be saved and after a refresh all the forums will revert to their original state.

    Template 'node_category_level_1', add after
    Code:
    <xen:if is="{$category.description}"><blockquote class="nodeDescription baseHtml">{xen:raw $category.description}</blockquote></xen:if>
            </div>
     
        </div>
    this code:
    Code:
        <input class="checkbox" type="checkbox" />

    The open extra.css and add:
    Code:
    .node.level_1
    {
        position: relative;
    }
     
    .checkbox
    {
        position: absolute;
        right: 10px;
        top: 8px;
    }
     
    .node .checkbox:checked + .nodeList
    {
        height: 0;
        visibility: hidden;
    }
    It will look like this:

    scr.PNG
     
    ApocaLyPSe likes this.
  2. Matthew2D

    Matthew2D Active Member

    Cool! :) Not a big fan of the check boxes though...
     
  3. CyberAP

    CyberAP Well-Known Member

    They can be easily styled.
     
  4. Forsaken

    Forsaken Well-Known Member

    Checkbox styling isn't consistent between browsers/operating systems, and to make it consistent requires javascript.
     
  5. thebush

    thebush Member

  6. Matthew2D

    Matthew2D Active Member

    Ask Xenique. They designed the theme.
     
  7. CyberAP

    CyberAP Well-Known Member

    Actually with css3 it can be styled with no js use and viewable identically in all modern browsers.
     
  8. thebush

    thebush Member

    Then How ?
     
  9. CyberAP

    CyberAP Well-Known Member

    With pseudo-classes.

    input[type="checkbox"].checkbox
    {
    position: relative;
    z-index: 500;
    }

    input[type="checkbox"].checkbox:after
    {
    content: " ";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; /* should resize the box to the input original size, otherwise you may use width and height (remove position: absolute; then) */
    /* your custom styling like background-image or border-radius, etc... */
    }

    Selector by type is used to ignore non-browsers like IE.
     

Share This Page