CSS: Discourse Help

HTML & CSS
1

Hello There,

I recently set up my own discourse website, [Fantasia][1], but I am struggling to find out some of the class names for some aspects of the website. Below I will put a list on what I am stuck on, and any help will be greatly appreachiated.

.
2. I’ve tried nearly all the clases for what seems to be the categories dropdown list, but none of them seem to work. I would be gratefull if someone could suply me the right class.

They’re my two biggest points right now, and would be gratefull if
you go and check them out!

Thanks, Fezodge III
[1]: http://fantasia.org.uk

2
  1. The “outline” is due to this rule .d-header .icons .icon:hover
  2. Which categories list?
3

How would i fix this?

the one on the hompage that looks like this: Categories > and then Categories / when you click on it.

4

What do you want to change?

The main class that styles that is this

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

5

I want to get rid of the grey box around it when you hover over it, and when you click on it for the red icon to still show up

do i just write that all as one?

6

If I’ve understood the “grey border” problem correctly, then changing padding: 3px to margin: 3px in this section seems to fix it.

.d-header .icons .icon {border-left: 1px solid transparent;    
  border-right: 1px solid transparent;    
  border-top: 1px solid transparent;   
  color: #999;    
  cursor: pointer;   
  display: block;    
  padding: 3px;    
  text-decoration: none;    
  transition: all 0.15s linear 0s;}
Off Topic:

Nice to see you here. Glad you made it over - and welcome to SitePoint.

1 Like
7

You are switching topics on me.

You are talking now about the search button in the top right corner, correct? It’s due to (as stated in post #2)

.d-header .icons .icon:hover

Remoe the background color.

8

I dont understand why im switching topics, as this is what i asked all along, and im talking about all 3 of the buttons up there, yes.

I still dont understand what you mean by .d-header .icons .icon:hover though.

9

I understood you incorrectly then - sorry.

And you notice the background appears on hover - that hover rule I posted contains that background color. Do you have access to the CSS files? Look up that rule.

10

no, putting that code into my CSS file just changed the size of them all, not the color, and i have chnged the padding to margin

11

if i have access to them, then i dont now how to get to them :frowning:

12

I’d be lost without my browser’s dev tools. It is a very big time saver.

1194×358 61.3 KB

13

I think you want to add this customization:

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

@RyanReese, he is trying to customize a Discourse instance, which unless you create a plugin for your theme, you have to override the existing CSS styles you want to do away with. So you have to add a new rule, that strikes/undoes what exists in the default CSS Discourse ships with.

14

OK. When I first looked at the site, on hover, the background became white with a broad grey border. Changing padding to margin there removed that. There is still a 1px grey border referenced in the rules which Ryan mentioned; you may also need to remove that.

Removing background-color: fff from .d-header .icons .active .icon keeps it visible while the menu or search is open.

15

@Mittineague that’s the rule that happens when you click on the search and do inspect element. The actual outline is the parent anchor which has the background.

@cpradio Thanks.

16

But how do you acces a permanent edit version of this though? eg, the origional CSS?

17

With Discourse, you’d have to write a plugin, and that’s a lot more work than what you’ll want to do. You are better off putting in CSS customizations in the Admin area.

1 Like
18

thanks you so much this worked!

19

does anyone know how to fix the second problem?

20

Yes setting the background to transparent works - or removing it. Good alternative @cpradio .

It would help to know what exactly you need this class for - are you trying to target a specific category? All the categories? I supplied the class that targets all of the categories already. Though knowing what you want to do will help us.