Interesting CSS stuff, part 3

[Bloc]

The former 2 topics I posted in here about interesting stuff in CSS, were really more of the news kind, this time I like to put out a few things I've learned during making of ModernStyle. Its nothing groundbreaking, but could be useful for others as well in specifically making themes for SMF, and more generally in using CSS.

Overrriding inline styles through the stylesheet
Did you know you can actually override a inline CSS style? I didn't lol, but as the case is: you can. Maybe someone did figure out this quite a while ago..but I never really found a good way of getting that inline stye of the SMF copyright, you know, the nice span-with-inline-styles. I know the reason it was made like that, and the display: inline etc. part doesn't concern me - but the "font-family" does. So how to make this little bit share the same font as the rest of the theme? Easy, just target a (presumed) parent container, preferably with a ID in it and add it to index.css:

Code Select Expand


#myfooter span.smalltext[style] {
  font-family: inherit !important;
}


Problem solved, the copyright will now share font style as the rest of the theme. Dont forget the "!important" keyword in there.It will not work on IE6-7..but who cares about those anyway.

Making a "lightbox" image function with CSS
This is more of an experiment, derived from several sources but as it is works great as a lightbox NOT using javascript. And its fast too. Initially you have a thumbnail picture + the original and you want to show the original in full width when clicking the thumbnail and be able to close it too with one click.(...Not unlike the attachment thumbnail routine in SMF posts ) The key here is that you need to show BOTH things in the markup, hide the original and only show that when clicking the thumbnail. Once its shown you have to have a way to "go back".

The code below is taken directly from the ModernStyle theme and shows how its done. Display.template attachment code:

Code Select Expand


// first off, the pictures
foreach($message['attachment'] as $ti => $temp)
{
echo '
<a href="#att', $temp['id_attach'], '" style="height: ' , $maxheight , 'px;" class="attbox">
<img src="', $temp['thumb'], '" alt="" style="width: ' , $modSettings['attachmentThumbWidth'] , 'px;" id="thumb_', $temp['id_attach'], '" />
</a>
<a href="#_" id="att', $temp['id_attach'], '" class="lightbox2" style="background-image: url(', $temp['original'], ');"><span>' , $txt['find_close'] , '</span></a>';
}

Notice that I use a CSS background for the thumbnail, to be able to control it better..but you can easily just use an image tag for the thumbnail part.

..and the CSS:

Code Select Expand


.lightbox2 {
visibility: hidden;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
line-height: 100%;
border: inset solid 50px #000;
text-align: center;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.95);
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
opacity: 0;
vertical-align: middle;
background-repeat: no-repeat;
background-position: top center;
background-size: contain;
}
.lightbox2 span { z-index: 1000; position: absolute; display: inline-block; padding: 3px 15px; border-radius: 0 0 15px 15px; text-transform: uppercase; font-size: 0.8em; background: black; color: white; opacity: 0.5; }
.lightbox2:target {
outline: none;
visibility: visible;
opacity: 1;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}



Tweaks can be made this of course, the transition can be made slower, different background etc. The "span" part shows a visible item to click, but actually the whole picture responds on the click.

And thats it, 2 small tips to use if you find yourself needing them.

[Antechinus]

Nifty lightbox trick. Copyright trick makes sense too, although I had never bothered trying it.

What were the previous two topics?

[Bloc]

The difference in fonts used on the copyright is not normally any big deal really - but I am using google fonts in this theme and it just stood out. Didn't want to fix it with PHP either, so went looking for a CSS solution.

The first two topics were almost a year ago(..)
http://www.simplemachines.org/community/index.php?topic=535283
http://www.simplemachines.org/community/index.php?topic=535326

[Antechinus]

Beats me why the copyright has an inline style anyway. Makes no sense at all. There are so many things themers or site admins can do to mutate it, up to and including total removal, that the inline style should just be ditched to save code.

[live627]

I hear it was done that way to force visibility. But yeah, whatevs...

Those odd styles have been completely removed from 2.1; no more pesky inline style, only CSS.

https://github.com/SimpleMachines/SMF2.1/blob/release-2.1/Themes/default/css/index.css#L1247

[Antechinus]

Good that it's gone from 2.1, but it beats me why it was ever kept in 2.0. I'm trying to remember if there was any discussion about it during 2.0 development, but can't recall any.

The thing is that it doesn't force visibility anyway. For example you can change the colour to match the background, thereby rendering the copyright effectively invisible. You can set opacity: 0; on it, which has the same effect. You can even set absolute positioning and a negative z-index if you want to, and these three are just for starters. I'm sure I could think up half a dozen more if I could be bothered.

[Bloc]

Different times then I guess.