Forums

Need CSS advice - please

Permalink
I am using theFramework theme, but this problem is not theme specific.

the problem is: if I add two instances of the same block (in my case, a pagelist block), the CSS conflicts because now there are two instances of every class with the same name, one seg for each block instance.

This has weird side effects such as, if I press the left arrow in the second pagelist carousel, it rotates the first pagelist carousel :/

I have copied the pagelist block to a new block wherein I have been trying to create unique classnames using the uniqid() function, but so far this has not worked out, plus I have to manage super ugly inline CSS wildcards, like

$('[class*="<?= $uid ?>"]').css({


in order to allow functions that worked on, for example 

$('#fourcolumn-carousel .item').each(function(){


to continue to work on what is now multiple classnames

$('#fourcolumn-carousel_1234567 .item').each(function(){
$('#fourcolumn-carousel_4685734 .item').each(function(){
$('#fourcolumn-carousel_7504359 .item').each(function(){
etc...


I am wondering if there is a simpler way that I may be overlooking.

surely I am not the first person to run into this problem, but I have seen no other posts on this issue

Thoughts?

p.s. I tried using the .ccm-page wrapper, which is specifically designed to stop CSS issues, but only on a page level (as it did not work for a block... didn't think it would, but just mentioning it anyway)

Thanks
ntisithoj
 
Gondwana replied on at Permalink Reply
Gondwana
I'm probably misunderstanding, but I don't think there should be any requirement for classes to be used only once. In fact, the whole point of CSS classes is to allow multiple elements to be styled in one go.

It kinda sounds like the code should be identifying specific instances by id, but it's actually using class. Is it a core block that you're using?
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi ntisithoj,

Do you have a website link for a page where this is happening?

Here is a core example of creating a "unique" class and calling it with JavaScript:
https://github.com/concrete5/concrete5/blob/develop/concrete/blocks/...
https://github.com/concrete5/concrete5/blob/develop/concrete/blocks/...
Gondwana replied on at Permalink Reply
Gondwana
Aren't these id (rather than class) selectors?
ntisithoj replied on at Permalink Reply
ntisithoj
Both. "carousel", "slide" and "carousel-inner" are classes. "fourcolumn-carousel" is an ID
ntisithoj replied on at Permalink Reply
ntisithoj
Yes, there is a URLhttp://admin.istand.tv ... click the left/right arrows in either of the lower two 4col pagelists to see the issue


I see what they are doing in your example, which is the same thing I was doing with UIDs. One of the problems, however, is that the slider code in the pagelist block, at least the pagelist block that comes with the Framework theme, is all bound to the class objects. Of course, I could add ID's but then I still have the headache of creating ugly CSS wild card filters with PHP.. which, if I resorted to, would eliminate the advantage of even using IDs as I could use unique classes. Additionally, at least with the page list block, it is not as simple as using something like "#ccm-image-slider-<?php echo $bID ?>" because there are numerous classes directly referenced in the code, such as "carousel", "slide", "fourcolumn-carousel", "carousel-inner", and others, so each of those would need a unique ID added to the class.
ntisithoj replied on at Permalink Reply
ntisithoj
There was an excellent reply posted in the block forum

https://www.concrete5.org/community/forums/block_requests/how-do-i-r...