[nodebb-theme-classic] BitBangers Classic Theme

[Scuzz]

Classic Theme for NodeBB

A classic theme for NodeBB. For those who want a more traditional feel to their forums.
This is a modified version of the original classic theme for a more flat look and feel.

Screenshot

Installation

cd /to/nodebb/node_module
git clone https://github.com/BitBangersCode/nodebb-theme-classic.git 

Credits

Credits to the original theme creator Paaltomo

[Scuzz]

Upgraded for the latest version of NodeBB which is currently 0.6.x

git checkout 0.6.x

[Scuzz]

Upgraded for the latest version of NodeBB, v0.7.2

@Firelad it should be ok for you now.

[hnkmaddox]

Hello, mate!

I know that you were scratching your own itch and you probably don’t give support for this template. There is any chancing on getting the theme updated for v0.9.1?

Seems like Paaltomo have discontinued the development and the theme is quite beautiful.

[Scuzz]

@hnkmaddox Hey man. I am currently in the process of modifying this persona theme to look more like the classic theme that is mentioned in this thread.

There are too many breaking changes with the updates of nodebb for me to really keep up to date.

Once i have a decent working “OrangeRed” theme for persona i’ll post it up here. We will be using it too.

[Scuzz]

@hnkmaddox check out this

[hnkmaddox]

It is beautiful.

I am backend and API developer, I can figure out my way with CSS/SASS, HTML, bootstrap and whatever you give to my but front is not one of my strengths (yet).

There is any way I can help you? You can use your repo, define the workflow (is git-flow or a subset of it ok for you?), bring some features as issues and work with pull requests.

[Scuzz]

I will probably fork the official NodeBB Persona theme.

These changes are literally only a few lines off CSS.

[hnkmaddox]

Some padding and stylishing… but I think is clearly a work that other can continue and push further when you are no longer interested in the development.

My offer is still open. Ping me if you want some help with it. Not only with styling, but with setting it up so people can use and expand. Authoring will still be yours, it is not a concern for me.

[Scuzz]

I’ll try and get my dev environment set back up and get a repo going. I’ll let you know once its done.

[hnkmaddox]

Ping me when done. Anyway I’ll not be really free until January.

[Scuzz]

@hnkmaddox It’s taken me a looong time but i am slowly making changes.
The changes being made are a current mix of less edits and admin cp custom styles. I’ll get them all copied over to git as soon as i can.

[Scuzz]

Here is all the css i have currently in the admin control panel. There are some changes I have made directly to some files. I think these changes are only background color and @brand-primary.

body {
    background: #f0f0f0;
    color:  #888;
}

.shoutbox blockquote {
    padding: 5px;
    margin: 0px;
    font-size: medium;   
}

.shoutbox .img-responsive {
    max-width: 200px;
}

.shoutbox-content {
    height: 250px;   
}

.col-xs-12 {
    padding-left: 0px;
    padding-right: 0px;
}

.navbar-default {
    background-color: #dc3522;   
}

.navbar-default .navbar-nav>li>a {
    color: #FFF;   
}

.navbar-default .btn-link {
    color: #FFF;   
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;   
}

.navbar-default .navbar-toggle {
    border-color: #FFF;   
}


.navbar-default .navbar-toggle:hover {
    background-color: #bd2e1d;   
}

.row {
    margin-left: 0px;
    margin-right: 0px;
}

#nprogress .bar {
    background: #FFF;   
}

#nprogress .spinner-icon {
    border-top-color: #FFF;
    border-left-color: #FFF;

}

.categories>li, .category>ul>li {
    padding: 20px;
    background: #FFF;
    border: 1px solid #e2e2e2;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 3px; overflow: hidden;
}

.categories-title {
    display: none;
}

.categories>li .card, .category>ul>li .card {
    border-left: 1px solid #e2e2e2;
}

.category>ul>li:not(.unread) h2 a {
    color: #dc3522 !important;   
}

.category>ul>li:not(.unread) h2 a:hover {
    color: #bd2e1d !important;   
}

.topic h1 {
    display: none;   
}

.topic .posts>li {
    background: #FFF;
    border: 1px solid #e2e2e2;
    padding: 20px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 3px;
}

.account .profile {
    background: #FFF;
    border: 1px solid #e2e2e2;
    padding: 20px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 3px;
}

.posts-list {
    background: #FFF;
    border: 1px solid #e2e2e2;
    padding: 20px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 3px;
}

.users-container {
    background: #FFF;
    border: 1px solid #e2e2e2;
    padding: 20px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 3px;
}

.btn-primary {
    background-color: #dc3522;
    border-color: #dc3522;
}

.btn-primary:hover {
    background-color: #bd2e1d;
    border-color: #bd2e1d;
}

.btn-primary:focus {
    background-color: #bd2e1d;
    border-color: #bd2e1d;
}

.fab {
    background-color: #dc3522;
}

a {
    color: #dc3522;
}

a:hover {
    color: #bd2e1d;
}

.pagination>li>a, .pagination>li>span {
    color: #dc3522;   
}

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
    background-color: #dc3522;
    border-color: #dc3522;
}

.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
    color: #bd2e1d;
}