Expand the color bar behind the text using CSS

HTML & CSS
1

So I suck at CSS, but I decided to take on a challenge but I believe it to be impossible without altering the markup (or using JavaScript).

So here are the rules (for whoever is interested)

  1. You can’t change the markup
  2. You can alter the CSS
  3. You can use JavaScript (if you must, but I’m really looking for a CSS only solution – if one exists)
  4. Color must be expanded on load. (not hover/click)

The challenge:
Take the color bar on the left and make it cover the background of the text as well. When there are two color bars, expand the one further on the right (closer to the text).

So far I’ve been unsuccessful, but I admittedly suck at CSS. :smile:

Markup for those behind proxies/firewalls:

HTML

<span class="badge-wrapper"><a class="badge-category-parent" style="background-color: #5F497A;" href="/c/ux"></a><a href="/c/ux" data-drop-close="true" class="badge-category clear-badge" title="Discussion about the user interface of Discourse, how features are presented to the user in the client, including language and UI elements.">ux</a></span>

<br /><br />

<span class="badge-wrapper"><a class="badge-category-parent" style="background-color: #FE8432;" href="/c/extensibility"></a><a href="/c/extensibility" data-drop-close="true" class="badge-category clear-badge" title="Topics about extending the functionality of Discourse with plugins, themes, add-ons, or other mechanisms for extensibility.  ">extensibility</a></span>

<br /><br />

<span class="badge-wrapper"><a class="badge-category-parent" style="background-color: #FE8432;" href="/c/extensibility/sso"></a><a class="badge-category-parent" style="background-color: #92278F;" href="/c/extensibility/sso"></a><a href="/c/extensibility/sso" data-drop-close="true" class="badge-category clear-badge" title="Only include actual maintained SSO (single sign on) implementations in this category. See the official documentation on Discourse's SSO support.">sso</a></span>

CSS

.badge-wrapper {
margin: 0 0 0 2px;
padding: 0;
}

.badge-wrapper .badge-category-parent {
margin: 0;
padding: 0px 1px;
}

.badge-category-parent {
padding: 6px 2px;
width: 2px;
}

.badge-category, .badge-category-parent {
font-size: 0.857em;
font-weight: bold;
white-space: nowrap;
display: inline-block;
line-height: 1;
}

.badge-category-parent:before {
content: "\a0";
}

.badge-wrapper .badge-category {
color: #333;
padding: 0 0 0 3px;
margin-right: 5px;
}

a {
color: #08c;
text-decoration: none;
cursor: pointer;
background: transparent;
}
2

Can’t access from work… so I can’t have a look at the markup :frowning:

I’ll have a look when I get home

3

I added the markup for you :wink: (hate to leave you out of it until you get home)

1 Like
4

Something like this?

    .badge-wrapper {
margin: 0 0 0 2px;
padding: 0;
position:relative;
}

.badge-wrapper .badge-category-parent {
margin: 0;
padding: 0px 1px;
}

.badge-category-parent {
padding: 6px 2px;
width: 2px;
}

.badge-category, .badge-category-parent {
font-size: 0.857em;
font-weight: bold;
white-space: nowrap;
display: inline-block;
line-height: 1;
}

.badge-category-parent:before {
content: "\a0";
}

.badge-wrapper .badge-category {
color: #FFF;
padding: 0 0 0 3px;
margin-right: 5px;
position:relative;
z-index:1;
}

a {
color: #FFF;
text-decoration: none;
cursor: pointer;
background: transparent;
}
a.badge-category-parent:nth-last-of-type(2){
  position:absolute;
  width:100%;
  top:0;
  bottom:0;
}
2 Likes
5

Actually, remove top:0; from that above code snippet (on a.badge-category-parent:nth-last-of-type(2))

It will keep the heights of everything the same.

6

Very impressive.

1 Like
7

Thank you.

My above code assumes there are at least ONE text element (e.g. “ux”) and one color. As long as you keep the structure the same for all your needs, then my code will not break. Just FYI.

8

Yeah, structure won’t change (at least not at this point in time). I’m looking into one potential problem, it has a slight bug with the two color bars in Firefox.

Screenshot:

Doesn’t happen in Chrome though…

9

I was only testing in Chrome so I should probably check into main browsers. One moment please :slight_smile: . Slight CSS fire came up at work.

10

FF/Chrome tested. I saw this wouldn’t take long so I just did it real fast. Gotta get back though. Test in other browsers and let me know what you find.

.badge-wrapper {
margin: 0 0 0 2px;
padding: 0;
position:relative;
}

.badge-wrapper .badge-category-parent {
margin: 0;
padding: 0px 1px;
}

.badge-category-parent {
padding: 6px 2px;
width: 2px;
}

.badge-category, .badge-category-parent {
font-size: 0.857em;
font-weight: bold;
white-space: nowrap;
display: inline-block;
line-height: 1;
vertical-align:top;
}

.badge-category-parent:before {
content: "\a0";
}

.badge-wrapper .badge-category {
color: #FFF;
padding: 0 0 0 3px;
margin-right: 5px;
position:relative;
z-index:1;
}

a {
color: #FFF;
text-decoration: none;
cursor: pointer;
background: transparent;
}
a.badge-category-parent:nth-last-of-type(2){
  position:absolute;
  width:100%;
  bottom:auto;
  top:auto;
}
2 Likes
11

That was quick (and effective). Seems to work well in Chrome, IE, and Firefox (latest version of each).

12

Serves me right for relying on browsers to guess correctly :frowning: .

Glad all seems to be well :slight_smile: . Good luck.

13

I still won’t look at this till I get home but… I didn’t think that you wanted to have those elements in the same line,… although I guess that it is logical to think that you wouldn’t mind since you’re using spans… Are you trying to do what I think you’re trying to do?

14

Maybe?..

I initially forced breaks to show each “set of elements” on separate lines so you could easily identify that they were three separate items.

I then placed them all on the same line to verify the provided CSS continued to function properly (and it did).

:smile:

1 Like
15

What I’m thinking is related to badges and likes

16

The CSS class names @cpradio provided might be a giveaway :slight_smile: .

17

Then definitely not :smile:

Here is where I got my inspiration
https://meta.discourse.org/t/the-end-of-clown-vomit-or-simplified-category-styles/24249

Discourse is looking to change their category styles and made the claim:

I wanted to see just how true that claim was. I’m pleasantly surprised that if you know CSS well enough, the claim holds true. :smile:

2 Likes
18

Can’t believe that you don’t trust the Discourse team :stuck_out_tongue:

2 Likes
19

I didn’t say that. I just like to validate claims :slight_smile: Until I see it happen/prove it, I’m a pessimistic (sad, but true)

3 Likes
20

Eh; Discourse relies on Javascript a lot anyway so they might not even use CSS for this fix. Wouldn’t put it past them. It would be a lot easier to do this in Javascript (albeit the CSS solution isn’t that hard if you know some pseudo classes.)