Styling Custom Parts

Scott Salhanick

Hello,


I am wondering if anyone else who has created a custom part for their BBNC site has had any issues with styling those parts.

The part in question contains a table with cells populated from RE, but the containing div has an id populated by BBNC, which will change based on its position on the page. For example I placed a custom part on the page by itself and when I inspected it, the id was PC13040_ctl00_EventListingDiv. This is fine when styling the part to be on a very specific page; however, when I try and add the part to another page, I am going to have to re-write all of the styling again, which really goes against my Don't Repeat Yourself (DRY) mantra that I code by.


I feel like the easiest solution would be to place place a static class on the outermost container, but unfortunately, I don't have access to the source code. I could inject with with javascript, but we are afraid that tampering with that source code would void any support clause we have.


Does anyone have a good solution to this quandry?


Thank you,

Scott

Emily Stooksberry

Hopefully this gives you the solution I think you are looking for.


If the code on the page is something like <div id="PC13040_ctl00_EventListingDiv">thing you want styled</div> then you can call it in a style sheet by using the not unique part of the ID. Your stylesheet would use div[id$="_EventListingDiv"] { }  instead of #C13040_ctl00_EventListingDiv { }


In jquery the format is $("element[id$='partial']) and in CSS the format is element[id$=partial] { }


 

Ryan Dunwiddie

Scott Salhanick:

Hello,


I am wondering if anyone else who has created a custom part for their BBNC site has had any issues with styling those parts.

The part in question contains a table with cells populated from RE, but the containing div has an id populated by BBNC, which will change based on its position on the page. For example I placed a custom part on the page by itself and when I inspected it, the id was PC13040_ctl00_EventListingDiv. This is fine when styling the part to be on a very specific page; however, when I try and add the part to another page, I am going to have to re-write all of the styling again, which really goes against my Don't Repeat Yourself (DRY) mantra that I code by.


I feel like the easiest solution would be to place place a static class on the outermost container, but unfortunately, I don't have access to the source code. I could inject with with javascript, but we are afraid that tampering with that source code would void any support clause we have.


Does anyone have a good solution to this quandry?


Thank you,

Scott

Hi Scott,


You can style the part based on the attribute selector. So in your case you can target your specific div with Selector (div), Attribute (id), contains (*) :

https://www.w3schools.com/css/css_attribute_selectors.asp

I.E.

div[id*="EventListingDiv"] { color:red;}


Hope This Helps,

Ryan