Background Images on Tags Screen

Dermabion

Would it be possible to implement (or make an extension that implements) background images on the /tags screen.

So for example on my site

http://theteam.gg/tags

Having an image behind the tag would be awesome.

Thanks,
Derma

Dominion

This idea has been brought up before!

hmmy

Dominion I haven't looked the the source, not do I know how easy it is to edit it... but couldn't one apply the the tag title to each li classes temporarily? Example: class="TagTile [tag]". Not sure what you'd add there.

Then you could edit class="TagTile General with li.TagTile.General {}?

jordanjay29

hmmy Example: class="TagTile [tag]". Not sure what you'd add there.

Could use the Tag ID, as that would never change for the life of the tag.

jordanjay29

JRay hmmy Feel free to submit an issue about this on Github, it's a good idea for some added extensibility. Mind you, I think Toby was going to redo the Tags page anyway, so this might happen when he does.

JRay

They'd need to add a unique identifier (the name of the tag) in the <li> class or ID in order for you to be able to override it with custom CSS. Right now all the boxes have no IDs associated with them so not doable from the front-end alone.

HavocK

Hey i have a CSS workaround (yup, another one). That could help you, until some proper solutions comes out.

You could paste this code into the custom CSS in the admin panel.

.TagTile.colored:nth-child(x) {
	background-image: url("image.png");
}

What this code do, simply put, is overloading some rules to the default CSS. the "x" can be replace by the element position.
1 for the first tag, 2 the second and so on!

You might add some more rules in this piece of CSS.

And voila ?

Oh ! i forgot something !
You might want to check the browser's compatibility first. Here : http://www.w3schools.com/cssref/sel_nth-child.asp
I think it should not be a problem for modern browsers.

One last thing if you have private tags, positions might change...

csf

HavocK .TagTile.colored:nth-child(x) {
background-image: url("image.png");
}

All I wanted to do was change color. Unfortunately this doesn't work because developers have put an inline style on the li (beta5), or at least they have on the first/default tag item, which is all I have created in this out-of-box install at the moment.

The existing markup is:

<li style="background-color: rgb(136, 136, 136);" class="TagTile colored">

Ideally that would just be...

<li class="TagTile colored">

And then anyone could use, for example:

.TagTile.colored:nth-child(1) {
background-color: #c11f46;
}

My advice to developers: don't put inline styles in the markup. They can't be overridden with the styles editor.

csf

Sorry. Just realized you can change the color when creating new tags. So I guess it's just the first one that's fixed. You should still undo the inline style on that. ?

Davis

csf it is inline so that it doesn't get overridden. You can edit it in the tags modal. You shouldnt overide it for whatever reason. plus it's a lot more work to add variables to .less or clutter it up with more .css files

BinhQuang

http://dep.kg/tags
?

ron_jeremy

BinhQuang That is awesome!

csf

Davis

it is online so that it doesn't get overridden.

Why? Why can't the default color be set in the CSS instead of inline? What's the technical reason?

it's a lot more work to add variables to .less or clutter it up with more .css files

That sounds like an opinion more than a valid reason. Here's another opinion: I don't understand why anyone bothers with CSS compilers (LESS or anything else), and I'm not alone, for example. But more to the point, not using inline CSS doesn't create more CSS files, or at least it shouldn't.

Also, speaking of clutter, and I don't mean this in any bad way, but the Flarum's front-end seems like a serious case of divitis. ?

You can edit it in the tags modal.

Yeah, thanks, I've since discovered that. So in this case it's all a moot issue, luckily.

Tophicles

I've got this working, sort of... what I'd like to know is what the custom CSS would be for the Tag Title and Description. I'd like to change the font colour of the title and hide the description but I'm not that great at CSS work. Is there a way to accomplish something like this:

`.TagTile.colored:nth-child(3) {
background-image: url("my_url_here");
background-size: cover;
background-repeat: no-repeat;
color: #ffffff;
}

.SelectTagListItem-description:nth-child(3) {
display: none!important;
}`

Pollux

Tophicles

.TagTile.colored:nth-child(3) picks the third element with classes TagTile and colored. For a background change you give a new value to this element itself:

.TagTile.colored:nth-child(3) {
    background-image: url("my_url_here");
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
}

The color assignment in this case is applied to everything within the third element with classes TagTile and colored including nested elements.

If you want to change the color of the title and the description separately, you need to address these elements specifically:

.TagTile.colored:nth-child(3) .TagTile-name {
    color: #ffee88;
}
.TagTile.colored:nth-child(3) .TagTile-description {
    color: #ddcc66;
}

User31

I've just been playing around with these tag background & title/description codes, adding text color, shadow & a different font family.

Here's what I came up with so far:

`/* TAG 4 BACKGROUND BEGIN */

.TagTile.colored:nth-child(4) {
background-image:
url("https://www.URL.jpg");
background-position: center, center;
background-repeat: no- repeat;
background-size: cover;
background-attachment: scroll;

}
.TagTile.colored:nth- child(4) .TagTile-name {
color: white;
text-shadow: 1px 1px 0px black;
font-family: Garamond, serif;

}
. TagTile.colored:nth-child(4) .TagTile-description {
color: white;
text-shadow: 1px 1px 0px black;
font-family: Garamond, serif;

}

/* TAG 4 BACKGROUND END */`

I dunno if this is the correct way to do things ....but it seems to be working sweet as.

•Example: