Add borders on specific buttons only?

csf

I'm getting the hang of the Edit CSS override panel in the Appearance area, and I'm happy to say I've been able to do some override tweaking to conform a little more to our brand needs (aside from not being able to insert new content elements — a different problem, I realize).

But I've run into a couple of barriers, this one with regard to button borders on specific elements. Maybe someone can shed some light. Without going into a long story about the overriding I have in place to get me here, I want to put a border around the following two elements alone, but I can't seem to target them via override:

One is the "Latest" select menu...

<select class="Select-input FormControl">...</select>

The other is the "Edit custom CSS" button in the Appearance admin settings.

<button class="Button" type="button">

Any way to target those for adding a border?

The last one seems to be missing a selector, but since there's a selector in the first instance, which I still can't seem to target, I'm not sure that's the problem, exactly.

luceos

You should consider using the power of inheritence and subselection:

.IndexPage-toolbar-view .Select .Select-input.FormControl {
}

For instance, just make sure you prepend parent classes and if you want to select an element based on multiple classes of the same element combine them as above.

csf

I'll give that a try. Thanks!

csf

Didn't work. I think in the case of the select element, there's some dynamic stuff interfering somehow. Not sure.

In any case, the depth of element nesting and the volume of class selectors at each step going back up the stovepipe is so deep as to almost be a guessing game, or a process by elimination, to figure it out — if it would even work. I'm not sure it's worth the effort (or bytes) for a simple border at this point. I mean, where in this fish ladder is the true parent?

<main.App-content ...
  <div#content ...
    <div.IndexPage ...
      <div.container ...
        <div.IndexPage-results ...
          <div.IndexPage-toolbar ...
            <ul.IndexPage-toolbar-view ...
              <li.item-sort ...
                <span.Select ...

Also, I know from trying to decipher the presentations other projects that sometimes you need to include the element — in addition to the selector — when overriding rules, depending on how the CSS rule was first written (i.e., with or without the element). So, again, kind of a guessing game under the circumstances.

I might try again when I have more time to fiddle with it.

luceos

csf have you tried my example?

If you include the element don't include <

csf

I did try your example, which is why I said "Didn't work". ?

After a little more sleep, and looking carefully at the Inspector tools, I managed to target the border easily with just .FormControl:

.FormControl { border-color: #ddd; }

One thing I can't seem to target, however, is the .Select-caret in the span.Select dropdown.

The color is set as #8c8c8c:

.Select-caret { color: #8c8c8c; }

which is fine, but I want it to have a hover color that matches the label hover color (#333) I have set, so I'd expect either of these to work:

.Select-caret:hover { color: #333; }

i.Select-caret:hover { color: #333; }

But neither do. What's the trick there?

datitisev

csf Try using !important, the CSS may be hardcoded ?
Something like this:

.Select-caret:hover { color: #333 !important; }

If that doesn't work, you might need to use background-color instead:

.Select-caret:hover { background-color: #333; }

csf

datitisev

Thanks. No luck with the !important declaration, and background-color affected the span's background, which wasn't the target. In this case the caret is being treated and font color, or so it would seem.

No big deal. It's a tiny visual in this case, but bugger if I can figure out why it's so hard to hit.