Adapt code to my theme

General Discussion
  • Hello !

    I need adapt this code to this theme https://community.nodebb.org/topic/4643/nodebb-theme-material-v2-0-published/185. How can i do that?

    ul.categories [data-cid="1"]:before {
        content: "Sprawy Ogólne CsWild";
        background: #28425f url(/images/ikony/homev2.png) no-repeat 10px center;
    }
    ul.categories [data-cid="20"]:before {
        content: "Nasza społeczność";
        background: #28425f url(/images/ikony/people.png) no-repeat 10px center;
    }
    ul.categories [data-cid="25"]:before {
        content: "Nasze Serwery";
        background: #28425f url(/images/ikony/serwery.png) no-repeat 10px center;
    }
    ul.categories [data-cid="49"]:before {
        content: "Counter-Strike: Global Offensive";
        background: #28425f url(/images/ikony/game.png) no-repeat 10px center;
    }
    ul.categories [data-cid="62"]:before {
        content: "STREFA BANÓW";
        background: #28425f url(/images/ikony/banv2.png) no-repeat 10px center;
    }
    ul.categories [data-cid="52"]:before {
        content: "KĄCIK GRAFIKA";
        background: #28425f url(/images/ikony/grafika.png) no-repeat 10px center;
    }
    ul.categories [data-cid="55"]:before {
        content: "Hydepark";
        background: #28425f url(/images/ikony/hyde.png) no-repeat 10px center;
    }
    ul.categories [data-cid="58"]:before {
        content: "Pozostałe";
        background: #28425f url(/images/ikony/pozostale.png) no-repeat 10px center;
    }
    ul.categories [data-cid="1"]:before, ul.categories [data-cid="20"]:before, ul.categories [data-cid="25"]:before, ul.categories [data-cid="49"]:before, ul.categories [data-cid="62"]:before, ul.categories [data-cid="52"]:before, ul.categories [data-cid="55"]:before, ul.categories [data-cid="58"]:before {
        color: #fff;
        display: block;
        position: relative;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        border-bottom: 1px #0c2b51 solid;
        text-align: left;
        padding-left: 70px;
        font-style: normal;
        text-transform: uppercase;
        margin-bottom: 20px;
        background-color: #2d2929;
        font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
    }
    

    Thanks for help

  • @Master You have several ways to do it.

    • 1 - Edit the theme's .less files in order to specify your css rules.
    • 2 - In the Administration Control Panel go to custom Css and simply paste your css rules.

    Seein that your css is not complex at all, you could go the ACP way. Be carefull with the images urls location, you should specify the correct path there.

  • I only use tip be 2. Works great 🙂


Suggested Topics


  • 0 Votes
    2 Posts
    351 Views

    @brian-rivera I don't have much CSS or HTML experience so I'd do it for free. could you send a link to your forum?

  • 1 Votes
    2 Posts
    241 Views

    Hello @Christian-Groß ! We do offer custom development and theming services as part of our company. Please get in touch with us by contacting [email protected] and we can discuss and prepare a quote for you 😄

  • NodeBB Theme

    Solved General Discussion
    4
    0 Votes
    4 Posts
    1k Views

    Oh, thanks a ton.

  • 0 Votes
    1 Posts
    797 Views

    Hi guys,

    I'm newbie to the Nodebb and currently I'm trying to play around with creating a new theme.
    I've downloaded the repo from Quickstart theme.
    I've added the nodebb-them-quickstart folder to the node_modules folder.
    When I go to the admin page and load all the available themes, my new theme is listed under the installed themes.
    After selecting it, it says that I should restart NodeBB to fully activate the selected theme.
    After I do that and after I refresh admin page, I'm in situation where previously active them is still the active one.
    In other words new custom theme is not activated.
    This is the case with every theme I made.
    But when I switch to the nodebb-theme-lavander, everything goes fine.
    I'm really struggling to make this happen with my own custom theme.
    I would be very thankful if some would tell me what is going on.

  • 0 Votes
    37 Posts
    12k Views

    Right @meetdilip

    Follow the instructions I gave earlier to do another git pull, I've made some changes, to specify a height add #600 or any number in pixels to the end of your link. You only need the height, width is auto 100%.

    NodeBB_-_2014-10-03_03.58.00.png