2.1 CSS

[Arantor]

I assume that is why it hasn't been changed.

It was changed to regular gradients and changed back, I think, because I remember having an argument with someone in 2013 about how they would have to upgrade their several-year-old Mac Pro to get the gradients as they were actual gradients.

[Sir Osis of Liver]

A sprite.  Thought we were getting rid of sprites?

Inspect element wasn't giving me the file name.

[Antechinus]

A sprite.  Thought we were getting rid of sprites?

We were getting rid of stupid big sprites where they didn't make sense (main_block.png, etc).

Inspect element wasn't giving me the file name.

It will show you the CSS associated with any element. That's what you needed to look at, since these are background images rather than inline images.

[Arantor]

Thought we were getting rid of sprites?

This was done in 2013, and at the time there was no way to meaningfully do a pure CSS version of this icon that was browser-agnostic and not awkwawrd. These days it would likely be better as an SVG possibly even inlined.

Inspect element wasn't giving me the file name.

Funny, I found it with inspect element... sometimes you have to go up an element or two.

[Sir Osis of Liver]

I see it now.  It's easy to find if you know what to look for.  Did a quick edit on the sprite, needs some prettying up but works.

[Sir Osis of Liver]

Ok, I've eliminated the sprite, back to individual images.  Thanks, but no thanks.

Code Select Expand


.board_icon a {
/* background: url(../images/boardicons.png) no-repeat 0 0 / 90px;*/
background: url(../images/on.png) no-repeat 0 0 / 60px;
display: inline-block;
width: 65px;
height: 65px;
}
.board_icon a.board_on2 {
background: url(../images/on2.png) no-repeat 0 0 / 60px;
background-position: 0px 0;
}
.board_icon a.board_off {
background: url(../images/off.png) no-repeat 0 0 / 60px;
background-position: 0 0px;
}
.board_icon a.board_redirect {
background: url(../images/redirect.png) no-repeat 0 0 / 60px;
background-position: -5px 0px;
}



[Kindred]

Personally,  I replaced them with gradient circles and fafa (or, in my case, starwars font) icons

[Sir Osis of Liver]

He has custom board icons, that's what we'll be using.  Bit of trouble to edit css to resize and position, but they look ok now.

[Sir Osis of Liver]

Took me a couple hours to find this.   Forum has a custom header with dropdown menus, title and link colors were incorrect in some menus.  Looked like a conflict between header and forum css, that's what it was, but don't know why.  Some of the links were wrapped in <strong></strong> tags, this was callimg .strong class from forum index.css.  Fiixed it by replacing all <strong> tags with <b>.  It's not a class, it's an html tag, why would it affect css?

[Kindred]

Strong is a css target-able html... like most html tags actually

[Diego Andrés]

<strong> is what <b> used to be.
<b> was briefly deprecated, now it's just irrelevant despite being back.

I'd rather use <span class="strong"> with 2.1 css, or simply <strong>, than using <b>

[Sir Osis of Liver]

So if it sees <strong> it applies the .strong class, same as a <div>, <h1>, etc.?  There were several conflicts between header and forum css, but this was the most difficult to find.  Any way to avoid something like that?

[Antechinus]

The strong tag is for importance/emphasis, while the b tag is just a substitute for CSS styling (not recommended to use b tag these days). So not really what b used to be. Strong has been around for ages too.

[Sir Osis of Liver]

<strong> is what <b> used to be.
<b> was briefly deprecated, now it's just irrelevant despite being back.

I'd rather use <span class="strong"> with 2.1 css, or simply <strong>, than using <b>

That's what caused the problem, there's a .strong class in index.css, and it was different from the css in the header, so it changed colors in the dropdowns.  <b> looks the same as <strong> in FF, so it should be ok.

[Antechinus]

So if it sees <strong> it applies the .strong class...

No. If it sees this, it applies this:

Code Select Expand

strong, .strong {
    font-weight: bold;
    color: #444;
}
IOW, the colour and font-weight are applied to both the tag and the class.

[Sir Osis of Liver]

That's what it was doing, changed link color and killed mouseover highlight.  Don't know what changed menu titles, but adding color to .column h3 fixed it.  Trying not to make too many changes in website code, some of it is quite old but still works, and it's not what I'm there for.  Just integrating custom header/footer onto forum without breaking anything.

[Sir Osis of Liver]

Where is the css for the login window?  Not the contents (.login, etc.), the popup window itself.  Having some conflicts with custom header css, need to mess with z-index to get it on top of things.

[Antechinus]

Look for .popup_container in index.css (document inspector FTW).

[Sir Osis of Liver]

   Whack-a-mole.  Working with this -

Code Select Expand


.popup_container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 64, 80, 0.5);
    z-index: 6;
}


With z-index: 6 header dropdowns are good, but login window is behind header menubar.  At z-index: 10 or higher, login window is on top, but forum menu buttons are on top of header dropdowns.  Will leave it like that until tonight, you can see it here.  Can move login window down with margin-top: 100px, but would rather fix it with z-index.

[Sesquipedalian]

Basically, you want to assign the highest z-index value to .popup_container, the second highest to the menu nearest the top of the page, the third highest to the next menu moving down the page, and so on.