Get a first look at what's coming. The Developer Passport Australia Release Preview kicks off March 12. Dive in! 

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

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

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