Custom CSS Class Prefix for Modules

This is a forum to suggest new features for mojoPortal. 

This thread is closed to new posts. You must sign in to post in the forums.
4/10/2013 2:10:02 PM
Gravatar
Total Posts 92

mojoPortal Hosting & Design @ i7MEDIA!

Custom CSS Class Prefix for Modules

Joe,

I've noticed that when creating custom styles for the various modules aside from the initial style, that overriding the initial style can get really messy. For visual reference, this would be the initial styling for the .rsstitle:

.rsstitle {
	background: none repeat scroll 0 0 #F2F2F2; /* For Older Borwsers That Do Not Support Linear Gradients, AKA IE8 on Down */
	background: -webkit-linear-gradient(top, #F2F2F2, #EEE) repeat-x scroll 0 0 transparent; /* WebKit Browser Support */
	background:    -moz-linear-gradient(top, #F2F2F2, #EEE) repeat-x scroll 0 0 transparent; /* Older Mozilla Browser Support */
	background: 	 -o-linear-gradient(top, #F2F2F2, #EEE) repeat-x scroll 0 0 transparent; /* Older Opera Browser Support */
	background: 	    linear-gradient(to bottom, #F2F2F2, #EEE) repeat-x scroll 0 0 transparent; /* Standards Compliant */
	border: 1px solid #e9e9e9;
	-webkit-border-radius: 10px; /* WebKit Browser Support */
	   -moz-border-radius: 10px; /* Older Mozilla Browsers */
		border-radius: 10px; /* Standards Compliant */
	-webkit-box-shadow: 1px 1px 0 0 #000; /* WebKit Browser Support */
	   -moz-box-shadow: 1px 1px 0 0 #000; /* Older Mozilla Browsers */
		box-shadow: 1px 1px 0 0 #000; /* Standards Compliant */
	padding: 10px 20px;
}

But say we have a small feed on the home page that just needs rsstitles and a small excerpt, it doesn't need the background, box shadow, rounded corners, padding, or border. We can, as of now, use a custom class to override the styling it like this:

.customfeedmanager .rsstitle {
	background: none repeat scroll 0 0 transparent; /* Since All Browsers Understand "background: none;" there is no need for prefixes */
	border: 0 none;
	-webkit-border-radius: 0; /* WebKit Browser Support */
	   -moz-border-radius: 0; /* Older Mozilla Browsers */
		border-radius: 0; /* Standards Compliant */
	-webkit-box-shadow: none; /* WebKit Browser Support */
	   -moz-box-shadow: none; /* Older Mozilla Browsers */
		box-shadow: none; /* Standards Compliant */
	padding: 0;
}

While this works fine for small changes it's really not good if you have much bigger changes, the CSS can become very messy.  I was thinking about this and I came up with the idea of adding a custom prefix to the standard classes of the module in the settings that would allow for cleaner markup.

For example, say for my previous situation of the feed on the home page, we could click settings for the module, and before the "Custom Class" form there would be a "Module Classes Prefix" form that you could place a small prefix (like "hpf" - Home Page Feed) in and then it would render something like this on all of the module's specific classes:

class="hpf-rssfeedmodule"
class="hpf-rssnavright"
class="hpf-rsscenter-rightnav"
class="hpf-rsstitle"

That way the initial style will not apply because the classes are different so the CSS stays cleaner and is easier to style.  The prefix wouldn't have to apply to things like the moduletitles or any other mojo base classes, just the module's specific classes. That way the base site styling still applies to our global elements.

If we could implement this with all the modules I believe it would be a very valuable feature.

What do you think?
-Elijah

4/12/2013 11:43:38 AM
Gravatar
Total Posts 18439

Re: Custom CSS Class Prefix for Modules

The problem is that to do that every little bit of markup would need runat="server" and C# code added to add the prefix on every little thing. I don't really want to go there. Even aside from the mess it would be to implement it, it would add lots of string concatenation which impacts performance because strings are immutable which means they cannot be altered once created so when you do that you are really creating new strings on each modification of a string and each new string consumes server memory until it is later garbage collected by the runtime. That is why for most string concatenation we use StringBuilder to avoid the overhead.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.