[NODEBB] Help for my custom CSS

[phenomlab]

@DownPW Definitely possible, yes. This will work

.categories>li, .category>ul>li {
    border-radius: 0px;
}
.categories>li:first-of-type {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.categories>li:last-of-type {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

Looks like this

You could then close the gaps between if you really wanted it as one block

.categories>li, .category>ul>li {
    border: none;
    margin-top: 0px;
    background: #F5F5F5;
}

That gives you

[DownPW]

@phenomlab Great !! Thanks you very much:)

@phenomlab

EDIT: Possible to do the same thing on Unread page and Recent page ?

[DownPW]

Other two things

ONE

I would like to move chat bubbles and WYSIWYG at the left bottom if it’s possible, I test with this bit it’s not perfect :

.taskbar .navbar-nav {
padding-right: 1840px;
padding-bottom: 15px;
position: relative;
bottom: 25px !important;
}
Thanks for your help in advance Mark

TWO

I have this problem :

The chat windows stays in the background even when I click on it.

I have zindex on composer and footbar

[phenomlab]

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

@phenomlab Great !! Thanks you very much:)

@phenomlab

EDIT: Possible to do the same thing on Unread page and Recent page ?

This should work

.category-item:first-of-type {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.category-item:last-of-type {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

[phenomlab]

@DownPW

The chat windows stays in the background even when I click on it.

I have zindex on composer and footbar

This should fix that

.chat-modal {
    z-index: 5000;
}

[phenomlab]

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

I would like to move chat bubbles and WYSIWYG at the left bottom if it’s possible, I test with this bit it’s not perfect :

Can you elaborate a bit more on this in terms of what you are looking to do ?

[DownPW]

@phenomlab

chat-modal zindex and border for Unread & recent works !!!
Thanks Mark

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

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

I would like to move chat bubbles and WYSIWYG at the left bottom if it’s possible, I test with this bit it’s not perfect :

Can you elaborate a bit more on this in terms of what you are looking to do ?

Just these icons to put on the bottom left:

[phenomlab]

@DownPW Try this

.taskbar.navbar-fixed-bottom {
    right: auto;
    left: 0;
}

[DownPW]

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

@DownPW Try this

.taskbar.navbar-fixed-bottom {
    right: auto;
    left: 0;
}

Much cleaner than what I had found:

.taskbar .navbar-nav {
    padding-right: 1840px;
    padding-bottom: 15px;
    position: relative;
    bottom: 25px !important;
}

I had not found this property by inspecting the code!! I wonder where you found that one

I just added left and bottom space :

.taskbar.navbar-fixed-bottom {
    right: auto;
    left: 10px;
    bottom: 25px;
}

RESULT:

Much better with footbar !
This also allows you to leave the right side quiet already occupied by the paging block !

Thanks my friend

[DownPW]

How to add icon on categories span time ?

I will test this code for add Paragraph FA icon for example :

[component="topic/header"] span.timeago:before {
    content: "\f1dd";
    margin-right: 5px;
    margin-left: 5px;
}

Result

[phenomlab]

@DownPW that won’t work unless you add a font family to go with it - any Unicode characters typically require an associated font family. Try adding

font-family: "font awesome 5 free"; to the CSS you already have.

[DownPW]

@phenomlab

I have test this :

[component="topic/header"] span.timeago:before {
    content: "\f1c0";
    font-family: "font awesome 5 free";
    margin-right: 5px;
    margin-left: 5px;
    color: black;
}

But doesn’t work

[phenomlab]

@DownPW does it work if you change it to
Font Awesome 5 Free ? Might need to access your site directly to test this as it works for mine and should also work for you.

One last thing you can try is adding the below into the CSS class - sometimes needed as the FA5 free icons are solid only, therefore may require

font-weight: 900;

Let me know how you get on

[DownPW]

@phenomlab

That works with

font-weight: 900;

Thank you

[elhana fine]

Hi friend, the code looks great.
Can I post it on my site as well?
And how can one know the path of subject assessments?
I’m talking about this code: https://sudonix.com/post/1809

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