• Welcome to Simple Machines Community Forum. Please login or sign up.

Has anyone improved /main_block.png to have transparent rounded edges?

Started by Biology Forums, August 30, 2019, 11:35:58 AM

Previous topic - Next topic

Biology Forums

Adding a background to the Curve theme is very annoying with they rounded edge effect that comes with this file. Has anyone improved the file in one of their projects and would like to share it here?

Arantor

The problem is that the CSS in 2.0 relies on it not having transparency as part of how it was built for IE6 back in 2009 when it was first released, so you'd need to change a lot more than just the image.

Of course this is a non issue in 2.1.
No good deed goes unpunished
All helpful urges should be circumvented

Antes

You should get rid of images & use CSS for those blocks, instead of upgrading the image itself (which btw easier to do).

Biology Forums

Quote from: Antes on August 30, 2019, 12:13:41 PM
You should get rid of images & use CSS for those blocks, instead of upgrading the image itself (which btw easier to do).

I've started to, it's actually easier than I thought.

Quote from: Arantor on August 30, 2019, 12:09:23 PM
The problem is that the CSS in 2.0 relies on it not having transparency as part of how it was built for IE6 back in 2009 when it was first released, so you'd need to change a lot more than just the image.

Of course this is a non issue in 2.1.

Client is using 2.0; would prefer 2.1 though I wouldn't recommend it right now given its status

Sir Osis of Liver

I've done a couple of Curve customizations that involved modifying the sprite, it's really not worth the effort.  (I'm so sick of Curve :P, I guess from spending too much time here.)  More recently have been doing a lot of work with backgrounds and transparent elements, all based on other themes.  Just finishing up this one, based on mobile-desktop (responsive).  This one is based on SychO's NightBreeze (responsive).  This is Crip's BacknBlack (not responsive).  I always encourage forums to select a custom theme from the many available here, and then work with that, rather than Curve.
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Biology Forums

Yeah, curve is absolutely annoying to work on. It needs a complete rewrite

Sir Osis of Liver

Quote from: Study Force on August 30, 2019, 01:09:21 PM
It needs a complete rewrite

Well, it has been rewritten, to Curve2.  Have you tried working with that? :P ??? >:(
"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Antes

I created RDD theme exactly for this, so people can actually take its parts and/or adapt their themes.

Curve is not going to get any patches actually unless something gets horribly broken.

Biology Forums

Quote from: Sir Osis of Liver on August 30, 2019, 01:14:41 PM
Quote from: Study Force on August 30, 2019, 01:09:21 PM
It needs a complete rewrite

Well, it has been rewritten, to Curve2.  Have you tried working with that? :P ??? >:(


Is that the name for SMF 2.1's default theme?

Quote from: Antes on August 30, 2019, 01:43:54 PM
I created RDD theme exactly for this, so people can actually take its parts and/or adapt their themes.

Curve is not going to get any patches actually unless something gets horribly broken.

Is RDD a theme of yours?

lurkalot

Quote from: Study Force on August 30, 2019, 07:10:59 PM
Quote from: Sir Osis of Liver on August 30, 2019, 01:14:41 PM
Quote from: Study Force on August 30, 2019, 01:09:21 PM
It needs a complete rewrite

Well, it has been rewritten, to Curve2.  Have you tried working with that? :P ??? >:(


Is that the name for SMF 2.1's default theme?

Quote from: Antes on August 30, 2019, 01:43:54 PM
I created RDD theme exactly for this, so people can actually take its parts and/or adapt their themes.

Curve is not going to get any patches actually unless something gets horribly broken.

Is RDD a theme of yours?

Yep Curve2 is the 2.1 default theme.

And the RDD theme Antes mentioned, https://custom.simplemachines.org/themes/index.php?lemma=2929

Kindred

I use block's studio003 as a baseline... almost all css and no images

Fx-sabers.com/forum
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.<br /><br />"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antechinus

Quote from: Antes on August 30, 2019, 12:13:41 PM
You should get rid of images & use CSS for those blocks, instead of upgrading the image itself (which btw easier to do).

Back when I was on the team I came up with complete CSS for this. I think it's posted somewhere in one of the team boards, but offhand I can't remember where.

IIRC, JBlaze also came up with his own code for the same thing. Anyway, it's not hard to do.

Sir Osis of Liver

mobile-desktop uses linear-gradient for title bars and backgrounds, instead of sprite.  The css is badly organized, but once you figure it out you can see how things work.


"The best laid schemes o' mice an' men / Gang aft a-gley." - Robert Burns

Antechinus

Yup, that's the way to do it, but you can get an exact visual duplicate of the original Curve too. Not that many people are likely to want that, but it can be done.

Biology Forums

Quote from: Antechinus on August 30, 2019, 09:56:19 PM
Quote from: Antes on August 30, 2019, 12:13:41 PM
You should get rid of images & use CSS for those blocks, instead of upgrading the image itself (which btw easier to do).

Back when I was on the team I came up with complete CSS for this. I think it's posted somewhere in one of the team boards, but offhand I can't remember where.

IIRC, JBlaze also came up with his own code for the same thing. Anyway, it's not hard to do.

I want 🤤

In retrospect, best had I started with a theme that's already stripped down. However, I ended up eliminating all those sprites with 2 hours, so either way it's not completely terrible.

Some sprites still remain, and they look blurry up close in mobile

Antechinus

Quote from: Study Force on August 30, 2019, 11:18:03 PMI want 🤤

Then you'll have to get a team member to dig it up for you. I no longer have access to the relevant board. IRC though it was pretty easy to do.

The basic theme wrapper is a piece of cake. That's just a div with a 1px grey border and a bit of border-radius. Some of the internal detailing was a bit trickier, if you want an exact match of all the original gradients.

The category/title header bars and the post backgrounds are as easy as the basic wrapper. They're only a few classes, and you just use border-radius instead of the extra spans, etc. The spans can be either set to display: none; or left with default sizing and positioning, but set to no background.

It is possible that the code in question may have made it into an early 2.1 alpha build, but I can't remember whether it did or not.

Antechinus

Ok, just for the heck of it I resurrected the thing from scratch. Note that this has not been optimised yet (there is commented-out CSS that could easily be removed entirely, among other things) but it all works as far as I can tell (have not checked absolutely everywhere).

Edited index.css file is attached so you can take a look. I haven't done the menu and other buttons yet (they are still using menu_gfx.png) but it's easy to do those just with CSS too.

lurkalot

Cool. Thanks Antechinus.  8)

Does it require, or work with the responsive Curve mod?

Antechinus

It's nothing to do with that mod, but it shouldn't be hard to make it compatible.

Antechinus

Updated it to sort the menu buttons, drop menus and buttonlists. The drop menus aren't an exact match for the originals, but are pretty close (can't do an exact match with the default markup and no images).

Updated index.css attached. Ignore the previous one. :)

Advertisement: