Targeting Icons in the header

Hi anyone know how to target the icons in the discourse header and remove drop shadows from the header I am trying to get this:

I have this

1 Like

For the header shadow:

.d-header {
    box-shadow: none;
}

Icons:

#search-button { … }
#toggle-hamburger-menu { … }

To find by yourself the classes and IDs to target, use your browser dev tools (F12 on chrome), then go in the Elements tab.

4 Likes

Hi

I am trying to style the buttons like this this is what I used for my site but it doesn’t seem to work please advise

    media=all */
@media all{
*,::after,::before{box-sizing:border-box;}
a{color:#009b72;text-decoration:none;background-color:transparent;}
a:hover{color:#004f3a;text-decoration:none;}
@media (min-width:992px){
.order-lg-3{order:3;}
}
.btn{display:inline-block;font-weight:700;color:#555a64;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:2px solid transparent;padding:.625rem 1.5rem;font-size:1rem;line-height:1.5;border-radius:100px;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
@media (prefers-reduced-motion:reduce){
.btn{transition:none;}
}
.btn:hover{color:#555a64;text-decoration:none;}
.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,155,114,.25);}
.btn:disabled{opacity:.3;box-shadow:none;}
.btn-primary{color:#fff;background-color:#009b72;border-color:#009b72;box-shadow:none;}
.btn-primary:hover{color:#fff;background-color:#007556;border-color:#00684c;}
.btn-primary:focus{box-shadow:none,0 0 0 .2rem rgba(38,170,135,.5);}
.btn-primary:disabled{color:#fff;background-color:#009b72;border-color:#009b72;}
.d-none{display:none!important;}
@media (min-width:576px){
.d-sm-block{display:block!important;}
}
.mr-3{margin-right:1rem!important;}
@media (min-width:768px){
.mr-md-4{margin-right:1.5rem!important;}
}
@media (min-width:992px){
.mr-lg-0{margin-right:0!important;}
.ml-lg-4{margin-left:1.5rem!important;}
}
@media print{
*,::after,::before{text-shadow:none!important;box-shadow:none!important;}
}
a{color:#009b72;}
a:hover{color:#00684c;}
a:focus{outline:0;}
a{font-weight:700;}
}

It works for me:

You don’t need media all and I think you should remove this part:

*, ::after, ::before { … ]

As it can potentially break stuff.
If you need box-sizing: border-box I’d advise you to add it only on the elements you modify (and where it is needed).

Mind pasting exactly what you used? Minus the *, ::after, ::before { … ]

1 Like

I have tried multiple ways it may be where I am placing it where did you place it @Canapin

I have checked am I doing it right pasting this in a new component in the header section of edit html and css

    a{
    color:#009b72;
    text-decoration:none;
    background-color:transparent;
}
 a:hover{
    color:#004f3a;
    text-decoration:none;
}
 @media (min-width:992px){
     .order-lg-3{
        order:3;
    }
}
 .btn{
    display:inline-block;
    font-weight:700;
    color:#555a64;
    text-align:center;
    vertical-align:middle;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    background-color:transparent;
    border:2px solid transparent;
    padding:.625rem 1.5rem;
    font-size:1rem;
    line-height:1.5;
    border-radius:100px;
    transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
 @media (prefers-reduced-motion:reduce){
     .btn{
        transition:none;
    }
}
 .btn:hover{
    color:#555a64;
    text-decoration:none;
}
 .btn:focus{
    outline:0;
    box-shadow:0 0 0 .2rem rgba(0,155,114,.25);
}
 .btn:disabled{
    opacity:.3;
    box-shadow:none;
}
 .btn-primary{
    color:#fff;
    background-color:#009b72;
    border-color:#009b72;
    box-shadow:none;
}
 .btn-primary:hover{
    color:#fff;
    background-color:#007556;
    border-color:#00684c;
}
 .btn-primary:focus{
    box-shadow:none,0 0 0 .2rem rgba(38,170,135,.5);
}
 .btn-primary:disabled{
    color:#fff;
    background-color:#009b72;
    border-color:#009b72;
}
 .d-none{
    display:none!important;
}
 @media (min-width:576px){
     .d-sm-block{
        display:block!important;
    }
}
 .mr-3{
    margin-right:1rem!important;
}
 @media (min-width:768px){
     .mr-md-4{
        margin-right:1.5rem!important;
    }
}
 @media (min-width:992px){
     .mr-lg-0{
        margin-right:0!important;
    }
     .ml-lg-4{
        margin-left:1.5rem!important;
    }
}
 @media print{
     *,::after,::before{
        text-shadow:none!important;
        box-shadow:none!important;
    }
}
 a{
    color:#009b72;
}
 a:hover{
    color:#00684c;
}
 a:focus{
    outline:0;
}
 a{
    font-weight:700;
}undefined}undefined

@Canapin

Got this to sort of work their was an undefined error at the very bottom font-weight:700;
}undefined}undefined

Fixed this and I get two results

As you can see some of the buttons are the correct style while others aren’t any ideas?

I copy-pasted the exact code you wrote in your very first message. I didn’t pay attention if there was any issue, but the button styling was correctly applied.

This is how it should be done. :slight_smile:

If a button doesn’t have the style you want, it probably uses other classes than .btn, you should check that in your browser dev tools.

1 Like

Two things @Discourse_Bunker

  1. Post code as code blocks, I have to manually fix all your posts, multiple days now

  2. It is not in scope to teach basic css here, we suggest googling for “learn CSS”

If both of these items persist, you will be politely asked to leave.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.