I've created some changes to stylizer.inc so it will support newer, more popular CSS3 techniques, such as:
It will output -moz, -o, -webkit, and the generic W3C properties for each.

  • box-shadow (supports spread and blur)
    • inset doesn't seem to work on Chrome
  • border radius (supports all 4 corners or 1 radius)
    • still buggy

More to come as I explore this a little more.

More properties to add:

  • transform
  • transform-origin

Code to follow soon.

CommentFileSizeAuthor
#8 ctools-1128960-8.patch25.21 KBtim.plunkett
#5 1128960-add-css3-support-to-stylizer.patch25.2 KBwjaspers
#3 1128960-ctools-add-css3-support.region_css3.zip10.63 KBwjaspers
#3 1128960-ctools-add-css3-support.stylizer.inc_.txt70.69 KBwjaspers
#2 1128960-ctools-add-css3-support.pane_css3.zip10.26 KBwjaspers
#2 1128960-ctools-add-css3-support.stylizer.inc_.txt70.34 KBwjaspers
#1 1128960-ctools-add-css3-support.stylizer.inc_.txt55.6 KBwjaspers
#1 1128960-ctools-add-css3-support.pane_css3.zip9.96 KBwjaspers

Comments

wjaspers’s picture

wjaspers commented
StatusFileSize
new 1128960-ctools-add-css3-support.pane_css3.zip9.96 KB
new 1128960-ctools-add-css3-support.stylizer.inc_.txt55.6 KB

Here's my ctools/includes/stylizer.inc file as it stands.
The new properties as mentioned above won't work without putting the contents of the attached pane-css3.zip into "panels/plugins/style_bases/pane".
I'm also working on a css3 style for regions.

NOTE: The stylizer.inc I've attached is NOT a patch. When i'm finished tuning this, I'll generate one.

wjaspers’s picture

wjaspers commented
StatusFileSize
new ctools/includes/stylizer.inc70.34 KB
new panels/plugins/style_bases/pane/pane_css310.26 KB

Added: CSS3 colums, text-shadow, box-resize; transform: skew, rotation, scale. I think that will be all for now.
My stylizer.inc is included below, as well as my CSS3 Pane Panel base style. I still have to build a CSS3 region pane.
Otherwise, this all works.
My code generates vendor specific output first, and then the W3C recommended format, so everything should work across most browsers trying to accomplish some CSS3.

Whoops: Column rule color doesn't grab the color property-will be fixed.

wjaspers’s picture

wjaspers commented
StatusFileSize
new ctools/includes/stylizer.inc70.69 KB
new panels/plugins/style_bases/region/region_css310.63 KB

Here's the Region CSS3 style base, and a fixed Stylizer.inc.

wjaspers’s picture

wjaspers commented
Status: Active » Needs review
wjaspers’s picture

wjaspers commented
StatusFileSize
new 1128960-add-css3-support-to-stylizer.patch25.2 KB

forgot to include the patch file itself.

Should I submit patches for the style bases here or in the Panels queue?

merlinofchaos’s picture

merlinofchaos commented

Panels queue, but please link.

I'm doing some serious CTools work this week so I should look at this patch in detail within the next few days.

wjaspers’s picture

wjaspers commented

Link to Style bases for Pane_CSS3 and Region_CSS3: http://drupal.org/node/1134092

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
StatusFileSize
new ctools-1128960-8.patch25.21 KB

Rerolled the patches, but this a HUGE addition. Not so sure it's worth it.
1 files changed, 739 insertions(+), 9 deletions(-)

wjaspers’s picture

wjaspers commented

WHOA. Thanks for re-rolling this.
I agree with you, especially after seeing some nonos in my prior patches, inaccurate comments/documentation, and things I'd probably do differently today.

We might be able to drop things like vendor prefixes, as generic support across the major browsers seems to have covered most of it. If I'm not mistaken, additional support for some of these things can be provided through javascript libraries.

Just out of curiosity, were these features helpful, or more of a just-looking-to-see-if-it-works?

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented

Oh I didn't actually test this. Just queue farming.

I agree about the vendor prefixes. Which removes a lot of the complexity here.

philsward’s picture

philsward commented

Kind of curious where this stands? I would love to see some CSS3 love added to stylizer myself, though I am at the mercy of manually coding each region by hand (can't help in the programming area).

I was just browsing the issue queue to see if there is a reason ctools creates a gazillion files for rounded corner and box-shadow images and ran across this.

Creating a .tar.gz backup of my file structure takes about 6-7 min and it's nothing but ctools temp files for the stylizer images :-/ Moving this to the CSS3 method would be nice for getting rid of the dozen or so requests for each file download.

DamienMcKenna queued 8: ctools-1128960-8.patch for re-testing.

chris matthews’s picture

chris matthews commented
Issue summary: View changes

The 7 year old patch in #8 to stylizer.inc still applies to the latest ctools 7.x-1.x-dev, but still needs to be officially reviewed and tested by the community.

Checking patch includes/stylizer.inc...
Applied patch includes/stylizer.inc cleanly.
philsward’s picture

philsward commented

@Chris2 Just tried it out and unless I'm missing something, it doesn't work as expected.

The problem with stylizers way of dealing with rounded corners back when stylizer was created, was to more-or-less handle IE6. Every edge, every corner is a .png file. Back then, rounded corners and box-shadows were in a proposed state for css3 even though major browsers accepted some form of them. Fastforward a decade and we have HTML5 + CSS3 which have rounded corners and box shadows officially supported. We really don't need the old .png method for backwards compatibility anymore.

After installing the patch and when setting a pane to "Rounded Corners", I would expect the pane to have the styling accomplished through css, not the old way of PNGs. I'm still seeing the PNGs. Maybe you can point me in the right direction? Otherwise, the patch doesn't work the way I nor most people might expect it to :-/

I think more folks would have used stylizer if it were up-to-date but since D7 is gone in 3 years and a lot of folks are jumping to D8 and panels is officially defunct in D8, I honestly don't see the need to keep this issue open anymore. I quit using stylizer years ago when CSS3 officially dropped due to the lack of forward compatibility that was hopefully supposed to be addressed by this issue. I just code the panes myself by hand now and I have a feeling most folks do too.

I do know one older gentleman who does still use stylizer, so maybe it's all-for-not by fixing this properly and getting rid of the outdated png method which generates a crazy amount of files. I got tired of backing up MB worth of stylizer pngs which was my motivation to dump it altogether.

I'm good to help test, but won't be any help on the patches.

japerry’s picture

japerry
Location KOMK
commented
Status: Needs review » Closed (outdated)

Drupal 7 is no longer supported, closing.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.