Advertisement:

Author Topic: Has anyone improved /main_block.png to have transparent rounded edges?  (Read 13746 times)

Offline Biology Forums

  • SMF Hero
  • ******
  • Posts: 3,747
    • StudyForcePS on Facebook
    • @studyforceps on Twitter
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?

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 71,650
    • StoryBB/StoryBB on GitHub
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #1 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.
Don’t try to tell me that some power can corrupt a person. You haven’t had enough to know what it’s like.

No good deed goes unpunished / No act of charity goes unresented.

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,951
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @XinYenFon on Twitter
    • WoWSnips
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #2 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).
You can support me directly via Patreon

In Catnip We Trust.
The solution is Catnip!
Vote for Catnip!

Current Project(s): [ WoWSnips ]
Past Project(s): [ ezPortal ] # [ Lunarfall ] # [ RDD (HTML5) ]

Offline Biology Forums

  • SMF Hero
  • ******
  • Posts: 3,747
    • StudyForcePS on Facebook
    • @studyforceps on Twitter
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #3 on: August 30, 2019, 12:30:37 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.

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

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,311
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #4 on: August 30, 2019, 01:04:18 PM »
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.

Offline Biology Forums

  • SMF Hero
  • ******
  • Posts: 3,747
    • StudyForcePS on Facebook
    • @studyforceps on Twitter
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #5 on: August 30, 2019, 01:09:21 PM »
Yeah, curve is absolutely annoying to work on. It needs a complete rewrite

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,311
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #6 on: August 30, 2019, 01:14:41 PM »
It needs a complete rewrite

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

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,951
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @XinYenFon on Twitter
    • WoWSnips
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #7 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.
You can support me directly via Patreon

In Catnip We Trust.
The solution is Catnip!
Vote for Catnip!

Current Project(s): [ WoWSnips ]
Past Project(s): [ ezPortal ] # [ Lunarfall ] # [ RDD (HTML5) ]

Offline Biology Forums

  • SMF Hero
  • ******
  • Posts: 3,747
    • StudyForcePS on Facebook
    • @studyforceps on Twitter
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #8 on: August 30, 2019, 07:10:59 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?

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?

Offline lurkalot

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 1,448
  • Gender: Male
  • Tinyportal Support
    • guitaristguild on Facebook
    • Tinyportal on GitHub
    • @GuitaristGuild on Twitter
    • Guitarist Guild
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #9 on: August 30, 2019, 07:26:20 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?

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

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 58,502
  • Gender: Male
    • Kindred-999 on GitHub
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #10 on: August 30, 2019, 09:36:08 PM »
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,767
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #11 on: August 30, 2019, 09:56:19 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.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,311
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #12 on: August 30, 2019, 10:14:36 PM »
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.



Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,767
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #13 on: August 30, 2019, 11:14:02 PM »
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.

Offline Biology Forums

  • SMF Hero
  • ******
  • Posts: 3,747
    • StudyForcePS on Facebook
    • @studyforceps on Twitter
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #14 on: August 30, 2019, 11:18:03 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

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,767
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #15 on: August 31, 2019, 02:41:52 AM »
I 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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,767
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #16 on: August 31, 2019, 07:57:55 AM »
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.

Offline lurkalot

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 1,448
  • Gender: Male
  • Tinyportal Support
    • guitaristguild on Facebook
    • Tinyportal on GitHub
    • @GuitaristGuild on Twitter
    • Guitarist Guild
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #17 on: August 31, 2019, 08:06:26 AM »
Cool. Thanks Antechinus.  8)

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

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,767
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #18 on: August 31, 2019, 09:12:42 AM »
It's nothing to do with that mod, but it shouldn't be hard to make it compatible.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,767
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #19 on: August 31, 2019, 10:38:27 AM »
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. :)