[NODEBB] Help for my custom CSS

[phenomlab]

@DownPW A couple of things here. You are using the !important argument twice - one will override the other, meaning they can’t both be set like that - typically, the last marked so will be preferred. Would this not work better ?

.category-item.inline-block {
    border-top: none !important;
}

.category-item:first-of-type {
    border-top: 1px solid #0a769978;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

[DownPW]

Thanks Mark

I will test that tomorrow and I will tell you if is good or not !

– Other bug i have to resolve my friend :

• When I have plenty of tag on Post, have this :

How to add a top space beetween the tag for a better lisibility ?

Thanks in advance @phenomlab

[DownPW]

@DownPW said in [NODEBB] Help for my custom CSS:

– Other bug i have to resolve my friend :

When I have plenty of tag on Post, have this :

How to add a top space beetween the tag for a better lisibility ?
Thanks in advance @phenomlab

an idea for that @phenomlab ?

[phenomlab]

@DownPW I’ll check and get back to you.

[phenomlab]

@DownPW Try this

.tag-list {
    display: inline-block;
    margin-top: 5px;
    line-height: 1.7;
}

Because you are using inline-block to float the elements on the same line, you cannot use margins to control the space. In this case, line-height will provide what you are looking for.

[DownPW]

@phenomlab

great

line-height: 1.7;

is very good

[DownPW]

Hello @phenomlab

I have a odd littlebug only on Smartphone chrome based browsers (chrome, vivaldi, brave) only (it’s ok on firefox mobile)

the right border of categories /topic is not visible

Here a screenshot of the problem on chrome based browsers:

And a good result on firefox mobile (it’s OK) :

odd

[phenomlab]

@DownPW odd indeed. Can you send me the CSS you are using for this ?

[DownPW]

@phenomlab

.categories > li, .category > ul > li {
    border: 1px solid silver;
    border-radius: 4px;
    margin-top: 5px;
    background: black;
    opacity: 0.9;
}

[phenomlab]

@DownPW change the silver for a hex value.

[DownPW]

@phenomlab Doesn’t work

[phenomlab]

@DownPW can you also change background from black to #000000

[DownPW]

yes I have test too…

I have test too to disable all custom CSS on nodebb acp and delete all css code on file css theme with just
.categories > li, .category > ul > li {
active and it’s the same…

delete cache too and logout/login

[phenomlab]

@DownPW is there a URL where I can check this ? Might not be this evening, but definitely tomorrow am.

[DownPW]

like as usual

[phenomlab]

@DownPW Try this

@media (max-width: 768px) {
.slideout-panel {
    margin-right: 1px;
}
}

The issue here is how other mobile browsers interpret the padding on the slideout panel, so we need to “patch” it so that those browsers can use the forced margin instead.

[DownPW]

great it works great

You had to see this stuff !!

You are too strong as usual Mark.

Many Thanks

[DownPW]

Hello Mark

I use this css code for reduce the image size :

.topic .posts .content .img-responsive {
    max-width: 45%;
    width: auto;
    padding: 1px;
    border-radius: 4px;
    border: 1px solid #c3c3c3;
    background-color: #F5F5F5;
    margin-top: 5px;
    margin-bottom: 5px;
}

Would it be possible to have a separate max size just for GIFs extension files (.gif) ?
I would like the gifs to be smaller than the images

Thanks in advance @phenomlab

[phenomlab]

@DownPW Possible, yes, but it may be a little on the “greedy” side.

Try this - obviously, remove the red border I used for testing and add your own code

img[src$="gif"] {
    border: 10px solid red !important;
}

This is also very useful as a reference

https://css-tricks.com/almanac/selectors/a/attribute/

[DownPW]

@phenomlab said in [NODEBB] Help for my custom CSS:

@DownPW Possible, yes, but it may be a little on the “greedy” side.

Try this - obviously, remove the red border I used for testing and add your own code

img[src$="gif"] {
    border: 10px solid red !important;
}

This is also very useful as a reference

https://css-tricks.com/almanac/selectors/a/attribute/

–> it seem to work with this code:

/* max-width for IMG Files */
.topic .posts .content .img-responsive {
    max-width: 45%;
}

/* max-width for GIF Files */
.topic .posts .content .img-responsive[src$="gif"] {
    max-width: 10% !important;
}

Thanks @phenomlab for the attribute that I don’t find