Make the 1 level sub categories line up horizontally?

bluesea

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.

[Deleted User]

What version of Vanilla?

bluesea

Version 2.0.18.9

peregrine

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.

vrijvlinder

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;
    }

bluesea

Thanks vrijvlinder but it is not working.

vrijvlinder

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;
}

bluesea

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>';

vrijvlinder

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

vrijvlinder

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;
}

bluesea

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

vrijvlinder

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.

bluesea

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

vrijvlinder

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 .