How would I get started with emulating a website's custom CSS


(Therza) #1

I’m trying to build out my first discourse, and I’m a complete CSS novice, but I’m slowly learning.

In a perfect world, my discourse would have a very similar layout/design to experts.feverbee.com

How would I get started in this endeavor?


#2

Heh, I’d consider starting with something a bit easier. The FeverBee header isn’t simple embedded CSS but the rest is fairly easy.

You can find out how to customise banners here: Banner themes (and instructions for customizing them)

Are there particular aspects of FeverBee that you are trying to emulate? It was a while since I did it, but I can prob recreate the CSS for you fairly quickly.

You can also see how things are built using the Chrome inspector. Are you familiar with using it?


(Therza) #4

Wow, it’s both awesome and a coincidence that you of all people replied. Thanks!

The elements I’d love to borrow are the banner, popular topics icon row, and just a general header that is consitent between my wordpress and discourse.

Right now my discourse feels like a separate entity from the wordpress, and I want to unify their aesthetic.


#5

No worries.

So the banner and popular topics are pretty heavy going – they’re not simple embedded CSS. I can’t share that code because it’s proprietary and I no longer work at FeverBee. We could ask @Richard_Millington if he’ll share it for the greater good…

Alternatively, if you have a budget I’d suggest talking to @joebuhlig and he could build you something similar.

Getting your header to match your main site is reasonably simple.
This topic explains it in detail:

To make it match your own site you’ll need to pull the CSS from WP.


(Therza) #6

So I was able to get the header content added to my discourse by adding the CSS to the header tab of customize from admin dashboard. I’m having trouble finding/copying the CSS from my wordpress to the discourse header.

I highlighted the element using chrome’s inspect feature, and copied and pasted the “styles” code into the CSS tab. It seems to have no effect. Am I approaching this the wrong way?

Right now my header has all the appropriate links, but it looks like a jumbled mess. Can’t really figure out how to copy that wordpress styling into discourse.


#7

Share your code and links to your site so we can help.


(Therza) #9

my header can be seen: stribe.dental/blog

my discourse can be found at forum.stribe.dental

I realized I was copying CSS directly from wordpress which is not ideal. I went back and used that guide you quoted in your first post. Now I have the links embedded in the discourse header itself, but I want to copy the styling from my wordpress.


#10

You’ll need to paste your CSS into this topic so we can see what you’ve written.


#11

Since you have no experience with responsive CSS, your best bet would be to contact the creator of your Wordpress’s theme and ask them to make you a standalone version of the header. You could then paste that code in a Discourse custom theme.


(Therza) #12

CSS Tab:

/*Adding DOW links to top - link text section*/
span#top-navbar-links {
    display:block !important;
    margin:22px 0 0 0;
}


/*Start dropping DOW Menu links & shortening title on small windows*/

.extra-info-wrapper .topic-link {
    max-width:600px;    
}

@media (min-width: 1150px) {
    .extra-info-wrapper .topic-link {
        max-width:600px;
         padding-right:250px; 
    }
}

@media (max-width: 1149px) {
    div.title-wrapper {
         padding-right:280px; 
    }
}

@media (min-width: 999px) {
    /*Adding DOW links to top - link container */
    div#top-navbar {
        max-width:none; /*remove max width*/
        width: auto; /*prevent other widths taking over*/
        z-index: 1040; /*stays on top of other header*/
        /*position:relative;
        float:left;*/
        position:fixed;
        top:0;
        left: 58%;
    }
}

@media (max-width: 998px) {  /*jumpover point, attach to right side*/

    div.title-wrapper {
        padding-right:220px;
    }
    
   /*Adding DOW links to top - link text section*/
span#top-navbar-links {
  position: fixed;
  top: 0;
  margin:22px 0px 0px -385px;
    }
    
    div#top-navbar {
    max-width:none; /*remove max width*/
    width: auto; /*prevent other widths taking over*/
    z-index: 1040; /*stays on top of other header*/
    float:right;
    position:relative;
    }
}

@media (max-width: 900px) {  /*jumpover point*/
/*div#top-navbar {
    left: 50%;
}*/
    div.title-wrapper {
        padding-right:220px;   
    }
}

@media (max-width: 725px) {
    a.dow-menu#community {
        display:none;
}
    div.title-wrapper {
        padding-right:135px;   
    }
    span#top-navbar-links {
        margin-left:-290px;
    }
}

@media (min-width: 571px) {
   i.fa.fa-home:before {
       display:none;
   } 
}

@media (max-width: 570px) {
    a.dow-menu#articles {
        display:none;
    }
    span#top-navbar-links {
        margin:19px 0 0 -220px;
    }
    
    i.fa.fa-home:before {
        display:initial !important;
        color:#FFF;
        font-size:30px;
}

    span#home-text {
        display:none;
    }

    div.title-wrapper {
        padding-right: 50px;
    }
    .extra-info-wrapper {
        display: block;
}
}

@media (max-width:455px) {
    .extra-info-wrapper {
        display: none;
    }
}

/*Individual links*/
a.dow-menu {
    font-size: 14px;
    padding:0 13px;
    color:grey;
}

Header Tab

        <div id="top-navbar" class="container">
        <span id="top-navbar-links" display="none">
          <a href="http://stribe.dental/" class="dow-menu" id="home"><span id="home-text">Home</span>
          <i class="fa fa-home" aria-hidden="true"></i></a>  
          <a href="http://stribe.dental/blog" class="dow-menu" id="Articles">Articles</a>
          <a href="http://forum.stribe.dental" class="dow-menu" id="Community">Community</a> 
        </span>
        </div>

#13

I’ve noticed that you position your custom header over Discourse’s. What I did for mine (still private, sorry) was to position Discourse’s buttons over my custom header.

Your website’s header has a lot of white space to the right where the search button is, so you could position them there.

Also, Discourse adds the class “docked” to the body when the menu is fixed, so you can use that to put your own header as fixed.


(Therza) #14

The header links are showing within discourse’s header for me. I’m not quite sure what you mean by “being positioned over discourse’s header”.


#15

Alright, let me show you an example without any skin on it.

On that, you can see that the actual discourse banner is hidden. I simply position the button and notification icon on the upper right. Everthing else is custom HTML + CSS.

When the user scroll down and the class “docked” is added to the body, I hide the top part, set some stuff position:fixed;, etc.

Also, remember that Discourse is not reponsive but has two different sets of HTML and CSS.

Good luck!


(Therza) #16

I understand what you mean now. Thank you

With that said, I think I’m in way over my head at this point.


#17

It could be easier for you to simply add a banner above the entire Discourse instead of trying to merge both. Roots.io do this: