How to apply styling to dynamic content block?

rev
Kilo Contributor

I'm currently studying from a CMS training book from my work and I'm currently not able to have something clarified.

The instructions stated to create a new dynamic block to use as a header dashboard. I went to Content Management > Block > Dynamic and coded in the javascript and xml and applied the block to a   test page. Then the book states I should "Add styles". However, I'm not sure how a CSS sheet would be linked and applied to the dynamic content block that I created for pages in my CMS site. Any tips on where I would enter the required CSS so that it is applied to the dynamic content block I made?

Thanks,

Rob

1 ACCEPTED SOLUTION

Brad Tilton
ServiceNow Employee
ServiceNow Employee

Style sheets are not directly associated with content blocks typically. The style sheets should be associated with a theme, and a theme can be associated with a site or a page. Content blocks are then added to a page, so the styles will be applied to anything within a page or site.



Does that help?


View solution in original post

6 REPLIES 6

Joe Wilmoth
ServiceNow Employee
ServiceNow Employee

Hi rev,



If you do have to add styles directly to a Dynamic Block, you can use a Processor.



It would look like this:



<!-- Dynamic Block Code -->



<link type="text/css" rel="stylesheet" href="PROCESSOR_PATH_GOES_HERE.do?name=NAME_OF_CSS_FILE.css$[AMP]sysparm_stack=no"></link>




/*Processor Script*/



String.prototype.replaceAll = function (stringToFind, stringToReplace) {


        if(stringToFind == stringToReplace) return this;


        var temp = this;


        var index = temp.indexOf(stringToFind, stringToReplace);


        while (index != -1) {


                  temp = temp.replace(stringToFind, stringToReplace);


                  index = temp.indexOf(stringToFind);


        }      


        return temp;


}



/* Get the CSS Record - IT SHOULD NOT BE INCLUDED IN THE THEME */


var c = new GlideRecord('content_css');


/* Take the CSS name as the URL argument */


if(c.get('name', g_request.getParameter('name'))) {


        /* Get the Stylesheet */


        var text = c.style;


        /* Return the modified Stylesheet */


        g_processor.writeOutput('text/css', text);


}



Thank you,


russell_miller
Kilo Guru

This will work too...



<link type="text/css" rel="stylesheet" href="/<SITE_NAME>/<SHEET SYS_ID>.cssdbx?"></link>



R