Recent Topics

1 Mar 28, 2009 17:50    

My b2evolution Version: 2.x

Hi,

I modified a skin to create the one on my wife's blog -- www.stylefool.com -- but the CSS is very messy. I define / redefine tags in multiple places

Does anyone have suggestions for an cleaning up the style.css?

I'm looking for:
1). An editor that will clearly show tag precedence?
2). Help / suggestion to clean up the code

I'd like to do clean up the code to make it easier to maintain / tweak.

thanks,

RocketDude

2 Apr 11, 2009 21:17

Can't help you with item 1 but maybe with item 2...

Check out your skin's stylesheet and see how many other sheets it is importing in the top of the document. That'll be the order they get read and therefore used, so let's start by turning it into one monstrously large style.css sheet.

In v246, /custom/style.css starts with this:

@import url("../../rsc/css/basic.css");	/* Import basic styles */
@import url("../../rsc/css/img.css");	/* Import standard image styles */
@import url("../../rsc/css/blog_elements.css");	/* Import standard blog elements styles */
@import url("../../rsc/css/forms.css");	/* Import default form styles */
@import url("../../rsc/css/comments.css");	/* Import default comment styles */


What I did just now was to open the first one, copy all the content, then paste it right below that whole block of imports. I then deleted the import line. Did that till I had all of them, then started looking and thinking. I got rid of all the tabs and put all the same ... thingies on one line and put a space between each definition (declaration?) In other words this

div.pageHeader h1 a,
div.pageHeader h1 a:visited {  /* IE6 */
	color: #fff;
	text-decoration: none;
}
div.pageHeader h1 a:hover {
	text-decoration: underline;
}

became this:

div.pageHeader h1 a, div.pageHeader h1 a:visited {  /* IE6 */
color: #fff;
text-decoration: none;
}

div.pageHeader h1 a:hover {
text-decoration: underline;
}


To me that makes it easier to *see* the style sheet and it is still functionally identical.

Oh hey just getting rid of all the imports means my web developer bar in firefox doesn't cause odd freakouts when I use the css editor. Kinda nice little benefit there eh?

ANYWAY now you can start reviewing your style sheet for duplication and maybe putting things together and getting rid of things you don't need. For example the body is defined twice in mine so obviously I can make that happen only once. The first came in with basic.css and is completely over-ruled by my later definition in the real style sheet. bye-bye extra lines!

You'll find FigZone definitions that exist only in the style sheet. Bye-bye FigZone! You'll find styles for the calendar scattered throughout core files. If you don't use the calendar then delete the definitions. If you do then you might consider putting them in the plugin like they should be, but that would mean hacking the plugin itself.

Oh another thing I did was remove lots of commented out bits. Like borders that may have been part of developing but obviously aren't worth having in there. Kept shrinking the file to something more manageable is the thing.

I figure it's a start. A *small* start on a major piece of cleanup, but a start nonetheless. Hey just having web developer tool bar not jack up when editing css was worth pulling everything into one file - to me.


Form is loading...