Skip to content

background color of the footer area

Solved Customisation
  • How can I change the background color of the footer area?

    we have forum-stats widget, social media links and “powered by NodeBB” label at the bottom as “global footer widgets”. We would like to change the color of this background (whole this footer area from right to left)

    Screen Shot 2022-02-28 at 7.06.17 PM.png

  • @phenomlab For your footers, I changed to

    div class="row text-center adjust">
    

    For the “Powered by…” I changed this to

    <div class="row pad-10 text-center adjust">
    

    And finally, added a new class

    .row.text-center.adjust {
        margin-left: -30px;
        margin-right: -30px;
    }
    

    At the top of your custom CSS

    24169304-5dc7-47ca-b143-26e9d9ef2fd8-image.png

    Reload your page and have a look 🙂

    f3154da1-4da3-447a-a169-e57c82f022cb-image.png

    The class of row exists already (part of Bootstrap) and .row.text-center.adjust is explicit and will only apply to that code

  • @crazycells from what I currently see, this is a custom HTML widget added directly below the forum-stats widget ?

    7e12893c-e0e4-404e-b3b5-cfaee242d0c1-image.png

    As this appears outside of the row element from the stats widget, it won’t automatically inherit the space you desire. The way to fix this would typically be with classes and CSS. Can you provide the code you’ve used for this ?

    Thanks

  • Or just play with transparent color and font-color maybe :

    ef0dc066-8d1a-4201-9819-1347f343a031-image.png

    but @phenomlab is always right 😉

  • @phenomlab thanks. I need all footer region (from left side to right side) to be the same color, the current form of the site is just experiments 😄

    Do you think it is possible to easily add a “custom global footer” to the nodebb? I could move the links there… (I am OK with leaving the forum-stats widget outside of this custom footer region)

    Here is the code I am using currently:

    //footer color modifications start
    .forum-stats {
        .row {
        background-color: #085EAC;
        }
    
        h2 {
            color: #eceff1;
        
            small {
            color: #eceff1;
            }
            
        }
    }
    
    
    [data-widget-area="footer"] {    
        .text-center {
            background-color: #085EAC;
        
            a {
                color: #eceff1;
            }        
        }
    }
    //footer color modifications end
    

    This is what I am trying to achieve:

    Screen Shot 2022-03-01 at 11.40.59 AM.png

  • @crazycells Can you provide me access to your site (details over PM obviously) so I can look at this ? I have an idea as to how this should work, but would like to see how you have it working now.

  • @phenomlab For your footers, I changed to

    div class="row text-center adjust">
    

    For the “Powered by…” I changed this to

    <div class="row pad-10 text-center adjust">
    

    And finally, added a new class

    .row.text-center.adjust {
        margin-left: -30px;
        margin-right: -30px;
    }
    

    At the top of your custom CSS

    24169304-5dc7-47ca-b143-26e9d9ef2fd8-image.png

    Reload your page and have a look 🙂

    f3154da1-4da3-447a-a169-e57c82f022cb-image.png

    The class of row exists already (part of Bootstrap) and .row.text-center.adjust is explicit and will only apply to that code

  • phenomlabundefined phenomlab has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • Nodebb design

    Solved General
    2
    1 Votes
    2 Posts
    301 Views

    @Panda said in Nodebb design:

    One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum.

    From recollection, Google and Bing have the capability to read and process JS, although it’s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, it’s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isn’t something you’ll likely lose sleep over.

    @Panda said in Nodebb design:

    The “write api” is preferred for server-to-server interactions.

    This is mostly based around overall security - you won’t typically want a client machine changing database elements or altering data. This is why you have “client-side” which could be DOM manipulation etc, and “server-side” which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write.

    A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is “fire and forget” and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be “RO” (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase.

    You wouldn’t do it (at least, I hope you wouldn’t) and the same ethic applies to server-side rendering and the execution of commands.

  • Nodebb 3.2.0

    Bugs
    20
    2 Votes
    20 Posts
    924 Views

    @crazycells yes, I’m aware of that. Need to fix

    EDIT- fixed. Caused by the same CSS that is used to absolutely position the “verified” group badge in the posts view. Amended this CSS so that is specifically targets the post stream as below

    li[component="post"] a[href*="/groups/verified"] { position: absolute !important; left: 8px; z-index: 2; margin-top: 1px; border-radius: 999px !important; line-height: 14px; display: block; height: 22px; margin-left: 0px !important; }
  • NodeBB v3 and Harmony Theme

    Discussion
    22
    13 Votes
    22 Posts
    2k Views

    Been playing with the user profile page this afternoon. Thought I’d post a video as I’m really pleased with how this came out

  • Changing Background on NodeBB

    Solved Customisation
    4
    0 Votes
    4 Posts
    646 Views

    @cagatay You’d target the body tag and use the below line of CSS

    background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed;

    Obviously, you need to change the path to suit where your image is being stored.

    More info around the background property can be found here

    https://www.w3schools.com/cssref/css3_pr_background.php

  • Fontawesome 5

    Unsolved Customisation
    14
    1 Votes
    14 Posts
    903 Views

    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?

  • 2 Votes
    10 Posts
    1k Views

    @DownPW

    We just have to change the cycles automatically according to each period ?

    Yes, this is by far the safest

    I think it is possible to achieve the goal, I have already seen this kind of thing on a site without any perf problems.

    It’s certainly possible, but not without issues or impact to performance (in my view)

  • NodeBB Footer

    Solved Customisation
    10
    1 Votes
    10 Posts
    1k Views

    @phenomlab said in NodeBB Footer:

    @jac and you. Hope all is well and you recover quickly

    Thanks pal 😁🤝🏻

  • Iframely (Nodebb)

    Solved Configure
    40
    4 Votes
    40 Posts
    3k Views

    @DownPW This is now resolved. The issue was an incorrect URL specified in the Nodebb plugin. I’ve corrected this, and now it works as intended.