2.1 CSS

[Sir Osis of Liver]

Where are the css gradients for title bars?

Why do Ant's sidebars not match title bars when they're changed with Curve2 color changer mod?

[Diego Andrés]

1- index.css? I don't think the titlebars have gradients, and neither the catbars, they do have shadows.

2- Is that the tutorial from the tips and tricks board? I suppose the code could not be matching the current code?

[Antechinus]

Lol. Probably because if you are using that override code I posted (without understanding it) it relies on some pretty large hammers to wallop existing code on this site.

TBH I have never looked at the colour changer mod, because obviously I can write my own CSS anyway. I prefer the cleaner approach, so really don't care what that mod does.

[Sir Osis of Liver]

I'd rather do it without the mod, but can't find the gradients, unless they're images, which I thought had been eliminated in 2.1.  Inspect element is not telling me anything.

[Diego Andrés]

TBH I have never looked at the colour changer mod, because obviously I can write my own CSS anyway. I prefer the cleaner approach, so really don't care what that mod does.

That's the thing, it doesn't do anything, it's just a color overwrite.
So it's an issue with your tutorial then.

[Antechinus]

I'd rather do it without the mod, but can't find the gradients, unless they're images, which I thought had been eliminated in 2.1.  Inspect element is not telling me anything.

Mate, if you can give me a direct link to the problem I can probably solve it in about ten seconds, but without knowing exactly what you are running...

And no, my sidebar code does not use any non-standard images. It's all CSS.

[Arantor]

The gradients are not really gradients on the category headers, for example. Look for the .cat_bar styling (for the container, not the .catbg itself) and you'll find a box-shadow defined on them that is inset.

It's really a shadow pulled inwards rather than outwards, so not *really* a gradient.

[Antechinus]

Yes, for default title bars, but if he is running one of the variations of my override code (and there have been several posted) then all bets are (probably) off.

[Sir Osis of Liver]

It's here, you can login and see it in profile -

user: csstest
pw: csstest

[Sir Osis of Liver]

The gradients are not really gradients on the category headers, for example. Look for the .cat_bar styling (for the container, not the .catbg itself) and you'll find a box-shadow defined on them that is inset.

Already tried commenting this out, has no effect -

Code Select Expand


div.cat_bar {
    background: #557ea0;
    border-bottom: 1px solid #777;
    padding: 0;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 16px 20px rgba(255, 255, 255, 0.15) inset;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}



It's really a shadow pulled inwards rather than outwards, so not *really* a gradient.

[Arantor]

Then whatever your override code has done has broken it - because this *is* how it's done in 2.1 CSS to have the gradient effect on catbgs.

Or you haven't refreshed hard enough.

[Antechinus]

Aha. Yep, I see it now. Those are not actually title bars as such. Bear in mind that this is a revamping of presentation for the default drop menu system, so it uses the markup of that.

Code Select Expand

                <div class="generic_menu">
                    <ul class="dropmenu dropdown_menu_1 sf-js-enabled sf-arrows" style="touch-action: pan-y;">
                        <li class="subsections"><a class="active sf-with-ul" href="****">Profile Info</a>
                            <ul style="display: none;">
                                /* This is the visible list of subsections. */
                                /* Summary, Show stats, etc.... */
                            </ul>
                        </li>
                    </ul><!-- .dropmenu -->
                </div><!-- .generic_menu -->
So the bits you are wanting to target are these:

Code Select Expand

  @media screen and (min-width: 720px)
#genericmenu .dropmenu > .subsections > a {
  padding: 0 0 0 12px;
  background: #557ea0 !important;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 36px;
  font-family: "Tahoma",sans-serif;
  text-shadow: -1px -1px 1px rgba(0,0,0,.2);
  border: 0 !important;
  border-bottom: 1px solid #777 !important;
  border-radius: 6px 6px 0 0 !important;
  box-shadow: 0 16px 20px rgba(255,255,255,.15) inset !important;
  pointer-events: none;
}
TBH this is really where you want to understand the code you are using, and how to make a cleaner version for use in custom themes. Which, I know, I should make, but TBH I have not been using 2.1 live myself on a site of my own, so have not got around to making yet. I'm after getting a converter script working first.

The joys of randomly taking code on the internet that looks cool, and using it without having a clue how it works.

[Sir Osis of Liver]

Is it loading css from minified?

[Diego Andrés]

Depends if you have enabled the setting to minimize files, then yes.
You'd want to remove it and temporarily disable the setting to avoid them while you make changes.

[Sir Osis of Liver]

Ok, if I do this, both changes take effect -

Code Select Expand


div.cat_bar {
background: #346699 !important;
border-bottom: 1px solid #777;
padding: 0;
border-radius: 6px 6px 0 0;
/* box-shadow: 0 16px 20px rgba(255, 255, 255, 0.15) inset;*/
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}

    #genericmenu .dropmenu > .subsections > a {
        padding: 0  0 0 12px;
        background: #346699 !important;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 36px;
        font-family: "Tahoma", sans-serif;
        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
        border: 0 !important;
        border-bottom: 1px solid #777 !important;
        border-radius: 6px 6px 0 0 !important;
/*        box-shadow: 0 16px 20px rgba(255, 255, 255, 0.15) inset !important;*/
        pointer-events: none;
    }


I'm matching main bg color on website, so gradient isn't really necessary.  2.1 css seems like an assways way of doing things.

[Antechinus]

If you want to know why it uses an inset box-shadow: back when I wrote the code for 2.1 Alpha, cross-browser support for CSS gradients was still a bit iffy. Since it was alpha code I just wanted something clean and simple, so instead of including all the current variations on CSS3 gradient syntax I used an inset box shadow. This worked, with one simple syntax, and gave the look I wanted at the time.

It's not necessary for anyone to use an inset box-shadow if they would prefer to use something else.

[Sir Osis of Liver]

So basically it's ten year old code.  Nice.

[Sir Osis of Liver]

Where are the board icons called (on.png, on2.png, off.png)?  I've replaced them, deleted them, nothing changes.

[Arantor]

Code Select Expand

.board_icon a {
background: url(../images/boardicons.png) no-repeat 0 0 / 90px;
display: inline-block;
width: 45px;
height: 45px;
}
.board_icon a.board_on2 {
background-position: -45px 0;
}
.board_icon a.board_off {
background-position: 0 -45px;
}
.board_icon a.board_redirect {
background-position: -45px -45px;
}
.board_icon {
text-align: center;
padding: 8px 0 0 0;
width: 60px;
flex-shrink: 0;
}
It's one image now. This makes it load faster and perform better against Google's ever whiny performance criteria which means SMF doesn't get downvoted *quite* so badly as it used to.

[Antechinus]

I was about to tell him that, with an added note that he would not have had to ask if he had used his browser's document inspector to grab the default CSS.

So basically it's ten year old code.  Nice.

Yes, but it's still a simple and efficient way of getting that look without using images. I assume that is why it hasn't been changed.