[NODEBB] Help for my custom CSS

[phenomlab]

@elhana-fine feel free. It’s posted here so that others can also make use of it.

[DownPW]

@elhana-fine @phenomlab

We have create this topic for reference.

–> You will find all stuff to deploy it on your server.

ENJOY

[DownPW]

hi @phenomlab

I use .category-item:first-of-type css properties for add a border-top on my principal pages like recent, unread etc…

But this properties add a border too on topic header categories name.

It’s possible to disable it just on topic (topic.header) ?

[phenomlab]

@DownPW possibly with :not in the css class

https://www.w3schools.com/cssref/sel_not.asp

[DownPW]

@phenomlab

I think I understand but I don’t find the good CSS class

here the code for recent page for example :

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

and I will test this for disable border-top on topic page but don’t work:

.category-item:first-of-type:not(.category-item .inline-block){
	border-top: 0px solid #0a769978 !important;
}

here the html code :

[phenomlab]

@DownPW sorry for late reply. Can you provide me with a url where this issue exists ? PM is fine of course if you don’t want to publish directly here.

[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.