Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product
Vanilla 2.6.1 is here with critical security patches. One of them has been publicly disclosed.
Please upgrade to 2.3 here. The 2.2 and earlier branches are no longer being updated.

Make the 1 level sub categories line up horizontally?

This discussion is related to the Category Headings addon.

I have removed the rss icon, discussions and comments count from all.php. And place nested categories in a comma-delimited list when they are "more than 1 level deep" from dashboard). How can I make the 1 level sub categories line up horizontally? Thanks for help.

Comments

  • ilovetechilovetech Vanilla 2.1 ✭✭

    What version of Vanilla?

  • I am not offering an answer, but i'd like to point out that it is unclear exactly what you mean. perhaps you could put some arrows or markup in your screen shot to show exactly what you want to accomplish and maybe someone else can take a swing at it.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited January 2014

    This css will make the categories in the categories index list appear side by side, just adjust the width to your liking. This goes in the custom.css file of your theme.

    .DataList.CategoryList li.Item.Depth1.Category{
        display: inline-block;
        width: 150px;
        vertical-align: top;
        }
    
  • Thanks vrijvlinder but it is not working.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    By using a combination of these I got my categories to look like tiles, I am sure it would look better as more categories are entered.

    ul.DataList.CategoryList .Meta {
    white-space: pre-line;
    }
    
    ul.DataList.CategoryList .ItemContent.Category {
    margin: 0 0 0 9px;
    background-color: 
    rgba(0,0,0,0.6);
    box-shadow: 0 0px 0px 10px #000;
    min-height: 280px;
    }
    ul.DataList.CategoryList li.Item.Depth1.Category{
        display: inline-block;
        width: 164px;
        vertical-align: top;
        }
    
    ul.DataList.CategoryLis li.Item.Category {
    position: relative;
    white-space: pre-line;
    display: inline-block;
    }
    
  • blueseabluesea New
    edited January 2014

    Thanks for the tiles style but I only need 1 level text sub categories which appear side by side. I don't need rss icon, discussions and comments count and I think this is the code i need to modify. all.php

            $CatList .= '<li class="Item Depth'.$Category->Depth.$AltCss.' Category-'.$Category->UrlCode.' '.$CssClasses.'">
               <div class="ItemContent Category '.$CssClasses.'">'
                  .Anchor(Gdn_Format::Text($Category->Name), '/categories/'.$Category->UrlCode, 'Title')
                  .GetOptions($Category, $this)
                  .Wrap($Category->Description, 'div', array('class' => 'CategoryDescription'))
                  .'<div class="Meta">
                     <span class="RSS">'.Anchor(Img('applications/dashboard/design/images/rss.gif'), '/categories/'.$Category->UrlCode.'/feed.rss').'</span>
                     <span class="DiscussionCount">'.sprintf(Plural(number_format($Category->CountAllDiscussions), '%s discussion', '%s discussions'), $Category->CountDiscussions).'</span>
                     <span class="CommentCount">'.sprintf(Plural(number_format($Category->CountAllComments), '%s comment', '%s comments'), $Category->CountComments).'</span>';
                     if ($Category->LastCommentID != '' && $Category->LastDiscussionTitle != '') {
                        $CatList .= '<span class="LastDiscussionTitle">'.sprintf(
                              T('Most recent: %1$s by %2$s'),
                              Anchor(SliceString($Category->LastDiscussionTitle, 40), '/discussion/'.$Category->LastDiscussionID.'/'.Gdn_Format::Url($Category->LastDiscussionTitle)),
                              UserAnchor($LastComment)
                           ).'</span>'
                           .'<span class="LastCommentDate">'.Gdn_Format::Date($Category->DateLastComment).'</span>';
                     }
                     // If this category is one level above the max display depth, and it
                     // has children, add a replacement string for them.
                     if ($MaxDisplayDepth > 0 && $Category->Depth == $MaxDisplayDepth - 1 && $Category->TreeRight - $Category->TreeLeft > 1)
                        $CatList .= '{ChildCategories}';
    
                  $CatList .= '</div>
               </div>
            </li>';
    
  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited January 2014

    No the code you need to modify is the CSS

    Just use css to hide the things you don't want to be seen and use the code I gave you to make them side by side. Mine come out as a tile because I did not remove the other stuff. For just the title , simply add display:none to the other elements via the css file of your theme. No need to alter the php.

    Please look at this discussion

    http://vanillaforums.org/discussion/25914/how-do-i-remove-the-text-and-stuff-on-the-categories#latest

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    there was a typo up there this is the right code

    ul.DataList.CategoryList li.Item.Category {
    position: relative;
    white-space: pre-line;
    display: inline-block;
    }
    
  • I am not sure why and I just can't make the title side by side.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    I am not sure why and I just can't make the title side by side.

    I explained how, did you proceed as I explained ?

    You can give me a link to the page if you can and I will check it out.

  • Yes, I did follow your instruction. Sorry the site is not open to the public yet.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited January 2014

    unless the edits you made inside the php file you edited are causing this not to work, or it is a cache issue. Unfortunately without seeing it and testing it out using a web inspector, there is nothing I can do. :(

    You can private message the link if you feel comfortable with that. Otherwise I recommend some tutorials on html and css and also the use of firebug or some kind of web inspector to figure out how to change things the way you like .

Sign In or Register to comment.