2957 posts
  • Football Contest Participant/Runner-up
  • Australia
  • Community Moderator
  • Elite Author
  • Author had a Free File of the Month
  • Most Wanted Bounty Winner
  • Author had a File in an Envato Bundle
  • Has been a member for 5-6 years
  • Contributed a Blog Post
+11 more
dtbaker Volunteer moderator says

How many authors split their CSS file into layout (width, height, margin, padding, float, etc..) and design (color, background-image, etc..) files? To make it easier to update the layout if you have multiple color options in a theme?

I just created a basic “splitter” tool that will take a single CSS file and spit out two CSS files. One with all your layout in it, one with all your design colors/images in it.

http://dtbaker.com.au/css_splitter/

Hopefully someone finds it useful, I certainly find it easier in the long run to have a layout.css file then separate green.css, blue.css, red.css etc… stylesheets.

Enjoy!

385 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 4-5 years
  • United Kingdom
  • Referred between 100 and 199 users
  • Bought between 10 and 49 items
  • Exclusive Author
EugeneO says

This could be very useful. I’ll be giving it a whirl.

491 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Won a Competition
  • Referred between 1000 and 1999 users
  • Author had a Free File of the Month
  • Author had a File in an Envato Bundle
  • Bought between 10 and 49 items
+3 more
pixelentity says

Hey, Yeah we do this for our work, so will defo give this a try, could save us a few hours of mind numbing work :D Cheers dtbaker

332 posts
  • Exclusive Author
  • Sold between 5 000 and 10 000 dollars
  • Has been a member for 4-5 years
  • Europe
  • Envato Studio (Microlancer) Beta Tester
  • Bought between 1 and 9 items
  • Referred between 1 and 9 users
dekciw says

Awesome! Perfect tool for skinning ;) Thanks, man!

988 posts It's in the pipeline!
  • Elite Author
  • Exclusive Author
  • Europe
  • Has been a member for 5-6 years
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Envato Studio (Microlancer) Beta Tester
+2 more
purethemes says

Awesome! I always do it manually. These could save me a lot of time!

814 posts
  • Author had a Free File of the Month
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 1 and 9 items
  • Referred between 1 and 9 users
  • Serbia
  • Has been a member for 5-6 years
rvision_ says

Awesome, just what I needed, thank you dtbaker.

Any chance of improving output formatting?

EDIT : it depends on a file, sorry

814 posts
  • Author had a Free File of the Month
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 1 and 9 items
  • Referred between 1 and 9 users
  • Serbia
  • Has been a member for 5-6 years
rvision_ says

Please let me know if a particular “design” element is missed (eg: border color).

-moz-box-shadow:0px -1px 2px rgba(0, 0, 0, .085), 1px 1px 0px rgba(0, 0, 0, .085); -webkit-box-shadow:0px -1px 2px rgba(0, 0, 0, .085), 1px 1px 0px rgba(0, 0, 0, .085); box-shadow:0px -1px 2px rgba(0, 0, 0, .085), 1px 1px 0px rgba(0, 0, 0, .085);

2024 posts
  • Elite Author
  • Author had a Free File of the Month
  • Has been a member for 4-5 years
  • Austria
  • Exclusive Author
  • Interviewed on the Envato Notes blog
  • Envato Studio (Microlancer) Beta Tester
+3 more
revaxarts says

Great work man! This is bookmarked!

2957 posts
  • Football Contest Participant/Runner-up
  • Australia
  • Community Moderator
  • Elite Author
  • Author had a Free File of the Month
  • Most Wanted Bounty Winner
  • Author had a File in an Envato Bundle
  • Has been a member for 5-6 years
  • Contributed a Blog Post
+11 more
dtbaker Volunteer moderator says


Please let me know if a particular “design” element is missed (eg: border color).
-moz-box-shadow:0px -1px 2px rgba(0, 0, 0, .085), 1px 1px 0px rgba(0, 0, 0, .085); -webkit-box-shadow:0px -1px 2px rgba(0, 0, 0, .085), 1px 1px 0px rgba(0, 0, 0, .085); box-shadow:0px -1px 2px rgba(0, 0, 0, .085), 1px 1px 0px rgba(0, 0, 0, .085);

thanks. forgot about rgba colors and shadows :) I’ll try to add these in.

2024 posts
  • Elite Author
  • Author had a Free File of the Month
  • Has been a member for 4-5 years
  • Austria
  • Exclusive Author
  • Interviewed on the Envato Notes blog
  • Envato Studio (Microlancer) Beta Tester
+3 more
revaxarts says

I would love to see a textarea where I can simple paste my style from the editor cause the file is always deep down in my file jungle :)

by
by
by
by
by
by