Ive managed to customize the css almost to the way I like/love it. You can see an working example here @ http://forums.kingsmanscode.com

Using this custom CSS here, the above link shows results from everyones work. IF you manage to use this, please leave the comments for credits if you value the support on this entire topic and if it helped you. Thanks and looking forward on working with this community to help further and shape its future.

Req's:

composer require santiagobiali/flarum-ext-logo

extension and CSS Knowledge for tweak as well as Flarum CSS Structure
Example:

/* Using Darkmode:On
   Using Colored Header: Off
   Followed by tweaked CSS below
   Website @ "http://forums.kingsmanscode.com" for demo
   Credited: luceos; santiagobiali; toby; Averell
*/

.App:before {
    height: 85px;
}

.App-header {
border-top: 4px solid #E7742E; /* Default is #E7742E */
padding: 6px;
height: 85px;
}

.App {
    position: relative !important;
    padding-top: 65px;
    padding-bottom: 50px;
    overflow-x: hidden;
   /* min-height: 100vh; */
}

.DiscussionListItem-info .item-excerpt {
    margin-top: 8px;
    margin-right: 20px;
    white-space: normal;
    font-size: 12px;
    line-height: 1.5em;
    color: #5c5757;
    display: block;
}

- Next go to

/admin#/extensions(admin panel)

- With

santiagobiali/flarum-ext-logo

extension, add your logo. Please take note of the image width and height
- Check out the front-end of your flarum and press CTRL+F5 to see the changes and make sure its the way you want it, If you need to make more adjustments, head back to

/admin#/extensions(admin panel)

Credits are in-tact and the original post can be found here @https://discuss.flarum.org/d/1881-logo-extension-adds-a-logo-image-to-your-forum. New thread =this is to prevent any other discussions or topics outside of this tutorial. Comments on this tutorial is welcome!