CSS: Discourse Help

FezodgeIII · January 5, 2015, 5:18pm

im trying to change the background color of the button itself, so that it fits my color scheme

cpradio · January 5, 2015, 5:22pm

Is there anyway you can mock it up? Create a simple image that shows how you want it displayed? I’m sure we can get there, we just don’t know what changes you want to make.

d’oh! Just saw you posted you want to change the background color

RyanReese · January 5, 2015, 5:23pm

Use these rules to customize the styles

.list-controls a.badge-category

That rule for the “all categories”

.list-controls a.badge-category.category-dropdown-button

That rule for the “>”

The dropdown (area with the white background) can be modified on this rule

.list-controls .category-dropdown-menu

FezodgeIII · January 5, 2015, 5:27pm

no, it dosent work, This is the code i have:

.list-controls a.badge-category {
    background-color: #fff;
}

.list-controls a.badge-category.category-dropdown-button {
    background-color: #fff;
    color: #dc252a;
}

but it still leaves it as that grey color

RyanReese · January 5, 2015, 5:30pm

I’m not familiar with Discourse so I’m not sure how to correct this (apart from manually going in the HTML and fixing it) but the rule IS CORRECT.

You do have a style=“background-color:#eee”, which, if we remember CSS specificity, will override what you set. Perhaps @Mittineague and @cpradio, with their wealth of knowledge about Discourse, can help.

cpradio · January 5, 2015, 5:30pm

Add !important, as there seems to be a few inline styles in effect.

.list-controls a.badge-category {
    background-color: #fff !important;
}

.list-controls a.badge-category.category-dropdown-button {
    background-color: #fff !important;
    color: #dc252a !important;
}

FezodgeIII · January 5, 2015, 5:32pm

this is good and all, so thanks! but when you drop down, none of the categories are visible?

RyanReese · January 5, 2015, 5:34pm

Because of the white background !important you set here.

.list-controls a.badge-category

You don’t need that rule. Remove that.

FezodgeIII · January 5, 2015, 5:37pm

yeah but doing this reverts the color of the button back to that horrible grey

cpradio · January 5, 2015, 5:37pm

Yep, Ryan is right, the important below kills the drop down, so we have to come up with a better solution for the “all categories” button.

.list-controls a.badge-category {
    background-color: #fff !important;
}

cpradio · January 5, 2015, 5:37pm

Try

.list-controls .home { background-color: #FFF !important; }

FezodgeIII · January 5, 2015, 5:38pm

so how would you reccomend i do this then?

oh yeah sorry just relized you posted again!

FezodgeIII · January 5, 2015, 5:41pm

this works all the way up to the extent that when you hover over the dropdown, the all-categories option dissapears from view?

RyanReese · January 5, 2015, 5:44pm

Remove this rule. No need for it. Your color is already white. It only hurts that top one.

li.ember-view:hover a {
color: #fff;
}

Mittineague · January 5, 2015, 5:47pm

I might have a wee bit more than some, but I wouldn’t use the word “wealth” to describe it.

I do what is not best practice, rather that hunt through CSS files I use way more selectors than I should to “force” the issue. More likely to break if / when the mark-up changes, but …

eg.
section#main div.ember-view div#main-outlet div.ember-view div.container section.user-main section.about div.details div.primary div.staff-counters

FezodgeIII · January 5, 2015, 5:50pm

how would remove this? I dont ever remeber putting it in?

cpradio · January 5, 2015, 5:51pm

Can you post your entire CSS Customization code here so we can see what has been added by you and what is pre-existing?

FezodgeIII · January 5, 2015, 5:51pm

r u sure, its like 300 lines long… but ok

body {
    background-image: url("http://thehdwall.com/wp-content/uploads/2014/07/Art-Fantasy-Landscape-Hills-Mountains-Waterfalls-Buildings-Castle-HD-Resolution.jpg");
}

.container.posts
{
  background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.9);
  padding: 16px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

ul.icons .fa { 
    color: #FFF; 
}

ul.icons .fa:hover {
    background-color: #fff;
    color: #dc252a;
}

ul.icons .fa:active {
    color: #dc252a;
    background-color: #fff;
}

footer.topic-list-bottom {
  background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.8);
  padding: 16px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.nav-pills {
    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.8);
  padding: 16px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

div.list-controls {
    color: #000000;
}


ol.category-breadcrumb {
    color: #0000;
    background-color: #fff;
}

.badge-category.home {
    color: #0000;
    background-color: #FFF;
}

.badge-category.category-dropdown-button.home {
    color: #000;
    background-color: #fff;
}

section.category-heading {
    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.8);
  padding: 16px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

li.nav-pills:active {
    color: #FFF;
    background-color: #DC252A;
}

.btn:hover {
    color: #fff;
    background-color: #DC252A;
}

.btn { 
    color: #0000;
    background-color: #FFF;
}

.btn-primary.create.standard {
    color: #FFF;
    background: #0066ff;
}

.btn-primary.create.standard:hover {
    colour: #fff;
    background: #DC252A;
}
div.actions:hover {
    color: #fff;
    background: #DC252A;
}

.button {
    color: #0000;
    background-color: #fff;
}

.button:hover {
    color: #fff;
    background-color: #DC252A;
}


ul.user-dropdown-links {
    color: #fff;
    background-color: #DC252A;
}

.d-dropdown {
    color: #fff;
}

.btn.btn-danger.right.logout {
    color: #FFF;
    background-color: #DC252A;
}

.btn.btn-danger.right.logout:hover {
    color: #000;
    background-color: #fff;
}

.btn.btn-primary.btn-small.login-button {
    color: #000;
}

.btn.btn-primary.btn-small.login-button:hover {
    color: #FFF;
}

button.btn.btn-primary.btn-small.sign-up-button {
    color: #000;
}

button.btn.btn-primary.btn-small.sign-up-button:hover {
    color: #FFF;
}

div.model-footer {
    color: #000;
}

div.model-footer:hover {
    color: #FFF;
}

a.user-activity-link {
    color: #fff;
}

a.user-messages-link {
    color: #fff;
}

a.ember-view {
    color: #fff;
}

a.user-activity-link:hover {
    color: #000;
    background-color: #fff;
}

a.user-messages-link:hover {
    color: #000;
    background-color: #fff;
}

a.ember-view:hover {
    color: #000;
    background: #fff;
}

.nav-pills>li.active>a, .nav-pills>li>a.active {
    color: #fff;
    background-color: #DC252A;
}

.nav-pills>li.hover>a, .nav-pills>li>a.hover {
    color: #dc252a;
    background-color: #fff;
}

.list-controls .home {
    color: #000;
    background-color: #fff;
}

.btn.btn-primary.create {
    color: #000;
    background-color: #fff;
}

.btn.btn-primary.create:hover {
    color: #fff;
    background-color: #dc252a;
}

.btn.btn-large.btn-primary {
    color: #000;
    background-color: #fff;
}

.btn.btn-large.btn-primary:hover {
    color: #fff;
    background-color: #dc252a;
    
}

section.d-dropdown {
    background-color: #dc252a;
}

a.latest-topics-link {
    color: #fff;
}

a.latest-topics-link:hover {
    color: #000;
}

div.d-dropdown {
    background-color : #dc252a;
}

a.show-help {
    color: #fff;
}

a.show-help:hover {
    color: #000;
}

a.badge-link {
    color: #fff;
}

a.badge-link:hover {
    color: #000;
}

a.keyboard-shortcuts-link {
    color: #fff;
}

a.keyboard-shortcuts-link:hover {
    color: #000;
}

a.faq-link {
    color: #fff;
}

a.faq-link:hover {
    color: #000;
}

li.ember-view-read {
    color: #fff;
    background-color: #dc252a;
}

button {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 5px solid #009900;
  padding: 5px;
}

ul.nav.nav-pills {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

a.badge-category-parent {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.container.posts {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

a.btn.btn-primary {
    color: #000;
}

a.btn.btn-primary:hover {
    color: #fff;
    
}

a.btn.btn-danger.right {
    color: #000;
}

a.btn.btn-danger.right:hover {
    color: #fff;
}

a.ember-view.btn.right:hover {
        color: #fff;
        background-color: #dc252a;
}

button.btn.btn-primary {
    color: #000;
}

button.btn.btn-primary:hover {
    color: #fff;
}

.action-list.nav-stacked {
    background-color: #fff;
}

.action-list.nav-stacked .active {
    a {
    background-color: #dc252a;
}
}

li.ember-view.no-glyph:hover {
    background-color: #dc252a;
}

li.ember-view:hover {
    background-color: #dc252a;
    a {
        color: #fff;
    }
}

a.ember-view:hover {
    background-color: #dc252a;
    color: #fff;
}

li.ember-view.active {
    background-color: #dc252a;
}

td.cagtegory {
    -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

span.topic {
    color: #fff;
}

span.topic:hover {
    color: #000;
}

span.blurb {
    color: #000;
}

button.btn {
    color: #000;
}

li.ember-view.read:hover {
    a {
    color: #000;
}
}

.d-header .icons .icon:hover { 
    background-color: transparent; 
}

.list-controls .home { 
    background-color: #FFF !important; 
}

.list-controls a.badge-category.category-dropdown-button {
    background-color: #fff !important;
    color: #dc252a !important;
}

there you go

RyanReese · January 5, 2015, 5:54pm

In your file…there is this.

li.ember-view:hover {
    background-color: #dc252a;
    a {
        color: #fff;
    }
}

Remove that a{} part.

FezodgeIII · January 5, 2015, 5:58pm

[goimg back the the four icons] Oh and by the way I just realised that when you click on the icon, it dissapears, and so leaves a white background