#2530 - Unique CSS IDs for each plan DIV

12 years 10 months ago - 12 years 10 months ago #163381 by cvoogt
It is a major pain to style the CB Subs registration page. Since the source files are encoded, I have little control over this. In some cases it might be desirable to style individual plans different from each other .. but this is near impossible since they have no individual IDs. The checkboxes do, but the parent DIVs don't. This should not be a hard thing to add, and it would help a lot with styling.

Please Log in to join the conversation.

12 years 10 months ago #163382 by cvoogt
Replied by cvoogt on topic Re: Unique CSS IDs for each plan DIV
update; I found the CSS class parameters in the plan settings ... that is very useful indeed. One small suggestion would be to use the plan alias or numeric ID by default, but let people override it with this class. Also, assigning an id attribute could hold value for anyone wanting to things with JavaScript.

Please Log in to join the conversation.

12 years 10 months ago #163390 by beat
Replied by beat on topic Re: Unique CSS IDs for each plan DIV
- Good idea regarding unique ids and default class with id.

Btw:
- The templates and the module are not encoded. Check the rounded template of the package for an example of a CBSubs template: it's also overridable in site joomla template.

Beat - Community Builder Team Member

Before posting on forums: Read FAQ thoroughly -- Help us spend more time coding by helping others in this forum, many thanks :)
CB links: Our membership - CBSubs - Templates - Hosting - Forge - Send me a Private Message (PM) only for private/confidential info

Please Log in to join the conversation.

12 years 10 months ago #163394 by cvoogt
Replied by cvoogt on topic Re: Unique CSS IDs for each plan DIV
I did find the templates, and looked around a bit.
I started doing some str_replace changes on $this->htmlPlans, but then I realized I could set the CSS class. The templates don't contain much, as far as I can tell. Only;
echo $this->htmlPlans;


I looked in the default and rounded templates. Is this all the code there is or am I missing something? Just curious ... my problem was solved with the CSS classes.

Please Log in to join the conversation.

12 years 10 months ago #164141 by cvoogt
Replied by cvoogt on topic Re: Unique CSS IDs for each plan DIV
unique IDs would still be useful for JavaScript reasons .. though it's possible to select all HTML tags using a certain CSS class ... it's just a pain to do so.
Anyone wanting to select an HTMl tag or tags by CSS class could use this JavaScript;
/*
	Developed by Robert Nyman, http://www.robertnyman.com
	Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm){
	if (document.getElementsByClassName) {
		getElementsByClassName = function (className, tag, elm) {
			elm = elm || document;
			var elements = elm.getElementsByClassName(className),
				nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
				returnElements = [],
				current;
			for(var i=0, il=elements.length; i<il; i+=1){
				current = elements[i];
				if(!nodeName || nodeName.test(current.nodeName)) {
					returnElements.push(current);
				}
			}
			return returnElements;
		};
	}
	else if (document.evaluate) {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || "*";
			elm = elm || document;
			var classes = className.split(" "),
				classesToCheck = "",
				xhtmlNamespace = "http://www.w3.org/1999/xhtml",
				namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
				returnElements = [],
				elements,
				node;
			for(var j=0, jl=classes.length; j<jl; j+=1){
				classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
			}
			try	{
				elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
			}
			catch (e) {
				elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
			}
			while ((node = elements.iterateNext())) {
				returnElements.push(node);
			}
			return returnElements;
		};
	}
	else {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || "*";
			elm = elm || document;
			var classes = className.split(" "),
				classesToCheck = [],
				elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
				current,
				returnElements = [],
				match;
			for(var k=0, kl=classes.length; k<kl; k+=1){
				classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
			}
			for(var l=0, ll=elements.length; l<ll; l+=1){
				current = elements[l];
				match = false;
				for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
					match = classesToCheck[m].test(current.className);
					if (!match) {
						break;
					}
				}
				if (match) {
					returnElements.push(current);
				}
			}
			return returnElements;
		};
	}
	return getElementsByClassName(className, tag, elm);
};

This is from robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/ . Note you can select a tag that has *two* or more classes at the same time, as a way of getting around the lack of a unique ID. As you can see, having a unique ID would simplify this a good deal.

Please Log in to join the conversation.

12 years 10 months ago #164167 by nant

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.182 seconds

Facebook Twitter LinkedIn