Images for the category page?

Babyeater

Hello all, I'm pretty new to this sort of thing and I tried to use the search function to no avail. This is what I mean.

I'd like to be able to make this my starting page of my forum and make these have cool little banner thingamabobs. I'm ok with going to the default theme if that will make it easier to find what I need to change to make this happen.

Sorry for being a burden.

vrijvlinder

Yes, I think you could use this plugin http://vanillaforums.org/addon/categoryimageheader-plugin

R_J

You could style them already! Look at the HTML and you will find something like that:
<li class="Item Depth1 Category-yourcategoryhere Unread">
So you have to create a custom theme and in your custom.css, you could style each category with something like that

.Category-yourcategoryhere {
  background-image: url("http://w3.vanillicon.com/32096de02123828b2dbcd51bb30a65b7_50.png");
  background-position: center top;
  background-repeat: no-repeat;
}

Babyeater

@vrijvlinder said:
Yes, I think you could use this plugin http://vanillaforums.org/addon/categoryimageheader-plugin

Unfortunately, that only applies once you actually click the page. I wanted to use vanilla/categories/all as the homepage of the site and have banners.

@R_J said:
You could style them already! Look at the HTML and you will find something like that:
<li class="Item Depth1 Category-yourcategoryhere Unread">
So you have to create a custom theme and in your custom.css, you could style each category with something like that

.Category-yourcategoryhere {
  background-image: url("http://w3.vanillicon.com/32096de02123828b2dbcd51bb30a65b7_50.png");
  background-position: center top;
  background-repeat: no-repeat;
}

I'm not seeing any lines like that in my custom.css, it might be because im trying to use a theme. So you're saying to do this I have to make a theme from scratch? Do I use the default vanilla theme as a "template" sorta?

R_J

If you are already using not the default theme, then you will find a custom.css in your themes design directory. Add the lines above, see what happens and change it to your needs.

If you want a custom theme that looks very similar to the default theme, copy the folder /themes/default to /themes/yourtheme, customize /themes/yourtheme/about.php and create /themes/yourtheme/design/custom.css where you can enter the above mentioned lines of code.

R_J

To use Vanillas "templates" you will have to understand the way Vanilla is structured. "Templates" are "Views" in Vanilla and you will find them in

/applications/dashboard/views (mostly admin and user)
/applications/vanilla/views (categories, discussions and comments)
/applications/conversations/views (well, conversations...)

If you are searching for a special view, you will find it in the subdirectories. If you are not happy with the categories view you are using right now, you can override it.
Don't change the files in any applications subdirectory directly!
Instead create such a file: /themes/yourtheme/vanilla/views/categories/all.php
Copy the content of the original view in that file and alter your themes file to your needs.
Yes, it is that easy!

vrijvlinder

@Babyeater said:
Unfortunately, that only applies once you actually click the page. I wanted to use vanilla/categories/all as the homepage of the site and have banners.

You set the page you want as a landing/home page in the dashboard. You can pick any page you want to be the landing page.

Babyeater

@R_J said:
If you are already using not the default theme, then you will find a custom.css in your themes design directory. Add the lines above, see what happens and change it to your needs.

If you want a custom theme that looks very similar to the default theme, copy the folder /themes/default to /themes/yourtheme, customize /themes/yourtheme/about.php and create /themes/yourtheme/design/custom.css where you can enter the above mentioned lines of code.

Im reporting back in and am unable to get the backgrounds on the tabs to change. Just to make sure everyone is on the same page as me, since vrijvlinder seems to be confused as to what I want to do, I have already set the categories page as my homepage and I mentioned this as my opening post. I am trying to turn the tabs for categories into hyperlinked images that go to that specific category, Pasting that code you gave me in multiple configurations(such as changing the category to mine, etc.) had no effect whatsoever. I have tried every theme I have and even downloaded extras to try and make the code you gave me work. trying to paste it into /views/categoryies/all gives a css error.

vrijvlinder

@Babyeater Ok so what you want is to use images instead of the text of the link ? easy...

The tabs ? You mean the title of the categories ? To make it specific you need to find the id or class of the category in this case I put Gallery, you must do this for each category if you want them to be different.
These lines do not exist you must add them to the custom.css of the theme you have .

try this in your custom.css

   .DataList.CategoryList li.Item.Category-gallery a.Title{
    background:your background here pic or whatever;
    }
    .DataList.CategoryList li.Item.Category-art a.Title{
    background:your background here pic or whatever;
    }

you can also use jquery to add a special class or id to each category first child second etc.
Then simply apply the css to each of the classes you added to the links

If what you want is to add a background to the entire row, however that will not be a clickable image just a background for that Category Row

.DataList.CategoryList li.Item.Category-art {
background:your background here pic or whatever;
        }

vrijvlinder

Here is a screenshot from my forum using the various methods I posted above plus the plugin for the header image.

Babyeater

That's not quite exactly what im looking for is perhaps why even this code seems to not be working either, but I am a complete novice ;/.

I will make a quick mock-up of exactly what i'm trying to do tomorrow, but I have to go to work. Thanks for your help.

vrijvlinder

Keep in mind that doing this to the entire category list nullifies or conflicts with the Alt and the Mine rows css. If you still want to have these then you need to also add the alternative css codes for what you want it to look like when it is an Alt Row and /or Mine Row.

.DataList.CategoryList li.Item.Category-art {
background:your background here pic or whatever;
        }

.DataList.CategoryList li.Item.Alt.Category-art {
background:your background here pic or whatever;
        }

.DataList.CategoryList li.Item.Mine.Category-art {
background:your background here pic or whatever;
        }

vrijvlinder

even this code seems to not be working either

For further help maybe you can share a link to the site. You can pm the link if you wish and I can take a look.

That's not quite exactly what im looking for

Then I am totally lost as to what you want to achieve.

R_J

@Babyeater said:
That's not quite exactly what im looking for is perhaps why even this code seems to not be working either, but I am a complete novice ;/.

I will make a quick mock-up of exactly what i'm trying to do tomorrow, but I have to go to work. Thanks for your help.

It would also be good to tell exactly what you have done. Which files (complete path) do you have altered and what have you written in them?
Normally @vrijvlinder's css works like a charm so I guess you either have put it into the wrong file or made some syntax mistakes.

If I got you right, you try to alter the way yourforum /categories/discussions looks, right? And you want to achieve something like that?

Then we only have to bring you to the right file to put your code in...

.CategoryBox.Category-general > div {
  background-image: url("http://icons.iconarchive.com/icons/iconshock/real-vista-jobs/48/general-icon.png");
  background-repeat: no-repeat;
  background-position: right top;
}

vrijvlinder

That's brilliant @R_J You may not realize it but you just invented a plugin ...

CategoryImageHeader

I am not sure that is what they want either though... They mentioned the category list not each category page, since the category image header already puts a banner image there. They want the banner thingamabob in the category list index.

I'd like to be able to make this my starting page of my forum and make these have cool little banner thingamabobs.

The home page is the categories so that is already happening.

Cool little banner thingamabobs, we gave several possibilities of inserting them, just is not clear where you really want them.

I am trying to turn the tabs for categories into hyperlinked images that go to that specific category,

There are no tabs there are linked titles of the categories. We gave a way to add images or backgrounds to the category titles links.

this code seems to not be working either, but I am a complete novice ;/.

Yes that can be a hindrance but if you follow directions it can be less painful to understand.
Until you can get familiar with this software, you need to learn to use what is already there and understand how it works. Where the files are that you need to edit.

There are many possibilities but also limitations based on your own comprehension of what you are trying to do .

R_J

You are right! The screenshot shows /categories/all
I have realized that only now. Nevertheless I still like my General

vrijvlinder

@R_J , the key to successful Crystal Balling is the application of the Occam's Razor principle :

The razor states that one should proceed to simpler theories until simplicity can be traded for greater explanatory power.

Babyeater

@R_J said:
~~~

This is very close to what I wanted.

Here's my mock up.

@vrijvlinder said:
Then I am totally lost as to what you want to achieve. :disappointed:

Does this help a little bit?

vrijvlinder

Yes that is what I explained and how to do it.

http://vanillaforums.org/discussion/comment/200563/#Comment_200563

Please look at my screenshot. In one row I used the application of background color of the linked title of that category.

In the next row I used an Image and a background color of the row.

In the other row I used a pink background.

If what you want is just the image behind the whole row like the pink color in mine or if you want it to be behind the title link and it is clickable.

You need to decide what to use Where. Maybe you could look at a few css tutorials to help you out understand the concept of adding backgrounds to page elements.

http://www.w3schools.com/css/css_background.asp

Babyeater

maybe I should get this question out of the way as well. Will hyperlinked images work while doing this on localhost? Maybe that's my problem.

peregrine

@Babyeater said:
maybe I should get this question out of the way as well. Will hyperlinked images work while doing this on localhost? Maybe that's my problem.

if you have a webserver, it doesn't matter whether is is localhost or www.example.com, you just need to point to the correct place when trying to find images, and google chrome web developer is great for finding out which images are not loading and where they are trying to load from. firefox is another, but I find google chrome is the easiest for debugging images that don't show up for some reason.