Jump to content

Category image possible?


Black Tiger
 Share

Recommended Posts

My friend which I help would like to have an image next to his category text.

I found some page addon, but I don't know if that can do this like my friend want's it too.

We were looking to be able to do something like this:

categorylogo.jpg.490ba8f74f8e4e679301a9ab2796f18f.jpg

Is something like this possible? Nice category text and image, or something like that?

 

Link to comment
Share on other sites

  • 4 weeks later...
  • 2 months later...

No it isn't because I described it clearly too.

You can click on it and I wrote it was "forum category". There are only 1 kind of forum category's. So that's where the image has to come.

But to explain it better, I made another screenshot here on the forum. Still it's forum category, I couldn't understand what is not to understand about that, sorry.

image.thumb.png.3ad20e8bd63b12ebfd10eeb9440c70a8.png

So the forum category tekst like here "Community Forums" should be there and an image (self choosen) next to it.

 

Edited by Black Tiger
Link to comment
Share on other sites

Category

So I can put an image anywhere on that page. And call it category image

48 minutes ago, Black Tiger said:

So the forum category tekst like here "Community Forums" should be there and an image (self choosen) next to it.

You could edit forums - front - index - index

Find

<a href='{$category->url()}'>{$category->_title}</a>

Add after

{{if $category->_id == X}}
	<img src="image.png">
{{endif}}

X is category ID

Edited by newbie LAC
Link to comment
Share on other sites

@Nathan Explosion Seems I can't get it to work correctly yet.

I put this in custom.css:

li[data-categoryid="4"] h2 {
    background-image: url('https://www.domain.com/images/image.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

But when scrolling the page, the image was visible in the background on all category's, or rather the forum scrolled over the image which stayed at the same position.

So to have the image stick in 1 category bar, I had to remove the "background-attachment: fixed" statement.

Now it's present, but now the picture is not in the correct postion, so 2 questions left.

1.) Is there a way so I can add a certain amount of px above the background image, so it will be visible a bit lower?

2.) Is there also a way to make the category bars higher in custom.css? So more of the image becomes visible?

Edited by Black Tiger
Link to comment
Share on other sites

4 minutes ago, Black Tiger said:

Seems I can't get it to work correctly yet.

I put it in as your starting point....it wasn't 'correct' to start with.

5 minutes ago, Black Tiger said:

1.) Is there a way so I can add a certain amount of px above the background image, so it will be visible a bit lower?

Probably, yes....try looking at padding for the image, maybe?

5 minutes ago, Black Tiger said:

2.) Is there also a way to make the category bars higher in custom.css? So more of the image becomes visible?

Again, probably yes....look at height for the h2, maybe?

Link to comment
Share on other sites

I put it in as your starting point....it wasn't 'correct' to start with.

Oh I thought you gave a working solution. I didn't know, I'm not into css and not interested either because I almost never use it.


However before asking I tried things like:

background-position-y: 50px;

and same with margin and martin-top.

I already also tried:

padding-top: 25px;

Which does make die image a little bigger, but does not push it downwards (display lower).

However, I did not created a solution by search around, using the background-position as center top and then putting a margin-bottom, so pushing the image upwards again. That seems to work.

Again, probably yes....look at height for the h2, maybe?

Sorry, but these are same kind of answers as "here's google", I think that's not done on a support forum. So suppose I somehwere find h2 height is 30. I'm sure there are more things using h2 then only the forum category's. So I have no clue on how to only change this for the category's in custom.css.

Some people do servers, others do design. I'm not a designer.

Hmmz... and my solution didn't work either. It does not "up" the image, but it makes the category bar greated so the complete image fits in. Which is not good either. Big is good, but should be al same size.

 

Link to comment
Share on other sites

2 minutes ago, Black Tiger said:

I'm not a designer.

And neither am I - and I just used Google to get that starting point up there. I'm not going to sit in my spare time giving you a full answer for nothing if it takes more than a few seconds to do the work so I will help with the starting points.....it's entirely up to you if you want to use this method.....

li[data-categoryid="4"] h2 {

}

This targets the following html:

<section>
	<ol class='ipsList_reset cForumList' data-controller='core.global.core.table, forums.front.forum.forumList' data-baseURL=''>
			<li data-categoryID='4' class='cForumRow ipsBox ipsSpacer_bottom'>
				<h2 class="ipsType_sectionTitle ipsType_reset cForumTitle">
					<a href='#' class='ipsPos_right ipsJS_show ipsType_noUnderline cForumToggle' data-action='toggleCategory' data-ipsTooltip title='Toggle this category'></a>
					<a href='https://url'>THIS IS THE CATEGORY TITTLE</a>
				</h2>

This will put a background image on the H2 element:

li[data-categoryid="4"] h2 {
	background-image: url('https://www.domain.com/images/image.jpg');
}

This will change the height of the H2 element:

li[data-categoryid="4"] h2 {
	height: 1000px;
}
Link to comment
Share on other sites

I'm not native English and you know more about CSS then me, so that makes it a lot easier for you.
I don't understand crap from that ipslist and classes and what else, with or without Google. It's not that easy for everybody as you think. Especially because I already found 4 different methods in css to put white space some where from which none worked as wanted, as can be seen in my previous post. It's not like I'm doing nothing.

At this moment I'm almost there, except for the h2 height.

But with your last quote which points out how I can change the height of the H2 element I will succed by copying and testing.

Thank you.

 

Link to comment
Share on other sites

For anybody else looking for something like this, I used this now, looks working.

li[data-categoryid="4"] h2 {
    height: 100px;
}
li[data-categoryid="4"] h2 {
    background-image: url('https://www.forumdomain.com/images/someimage.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}

And yes I don't sit still... I'm trying. Hence I also found the "contain" bit to put there.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...