CMS - Change Font Color/Size in Jelly Script

richelle_pivec · ‎09-23-2014

I have been trying for a few hours now to change the font size (14 pt) and font color (#007CC3) in this script. No matter where I place it, the font continues to stay black and normal size. I have tried to figure out if the list (Navigational List) is being effected by the CSS base page, but cannot find a spot where that might be. Any ideas?

I took an existing List Definition and saved it as a different name to modify the border-color and box size. I even added the font-weight:bold (which worked). I just can't make the font big and a different color.

<?xml version="1.0" encoding="utf-8"?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<style>
div.cms_cat_list_element {font-weight:bold;padding-left:2.3em;padding-right:2.3em;background-color:#FFFFFF;border-width:2px 2px 2px 2px;border-style:solid;border-color: #E0E0E0;}
div.cms_cat_list_element_hover {font-weight:bold;padding-left:2.3em;padding-right:2.3em;background-color:#FFFFFF;border-width:2px 2px 2px 2px;border-style:solid;border-color:#E0E0E0;}
</style>
<div class="catalog_list">
<g:for_each_record file="${current}" max="${jvar_max_entries}">
<div class="cms_cat_list_element" onmouseover="this.className='cms_cat_list_element_hover'" onmouseout="this.className='cms_cat_list_element'">
<div style="padding-top:10px; padding-bottom:10px;">
<g:content_summarizer content="${current}"/>
</div>
</div>
</g:for_each_record>
</div>

</j:jelly>

thanks, Richelle

richelle_pivec · ‎09-24-2014

I actually created a new style and added the code for it in the Menu CSS page under the Navigational List section. Then I made a copy of the navigational_list_style List Definition and changed the div langauge to match the language I added in the CSS page. Worked like a charm to keep the original navigational_list_style the way it was (the way we want it) and to have a new "catalog_list_style" for my catalog items.

View solution in original post

rgm276 · ‎09-24-2014

You have several options I can think of

1) if the items in question are part of an existing CLASS tag in css, then create a new CSS that you can reference and 'overrdie' those values in the new CSS, just be sure in the SITE THEME you add the new CSS and add it last

but this will change they values for ALL pages under that site

2) you can override the class if there is an ID, here is sample code I have used in a dynamic page

in this example I always override the color of the header and footer to match the theme color for the instance on service-now I am

<g:evaluate>

var bg = gs.getProperty('css.base.color');

</g:evaluate>

var div1 = document.getElementById( 'topHeaderContainer' );

div1.style.backgroundColor = "${bg}";

var div2 = document.getElementById( 'footerContainer' );

div2.style.backgroundColor = "${bg}";

</script>

3) you can override a CSS style sheet CLASS style, here is sample code from one of our pages

<style>

UL.cms_menu_dropdown A.cms_menu_dropdown_link, DIV.cms_menu_super_menu_bar_item SPAN.menu_section A {

background-color: ${bg} !important; }

</style>

richelle_pivec · ‎09-24-2014

I actually created a new style and added the code for it in the Menu CSS page under the Navigational List section. Then I made a copy of the navigational_list_style List Definition and changed the div langauge to match the language I added in the CSS page. Worked like a charm to keep the original navigational_list_style the way it was (the way we want it) and to have a new "catalog_list_style" for my catalog items.

sLuintel · ‎12-04-2015

Hi

I am having a similar issue. I have no idea about jelly and xmls. I am wanting to chang th font sze on the ess. Currently its realy tiny.

Would you be able to explain or advise more.

Thank you.

richelle_pivec · ‎12-04-2015

Hi, Here's a little more detail around the process I followed:

Under the List Definitions, I created a new one called "Catalog Lists".

Application: Global

Category: List Definition

I put this code in the XML section:

<?xml version="1.0" encoding="utf-8"?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<div class="catalog_list_title">${jvar_title}</div>

<ul>

<g:for_each_record file="${current}" max="${jvar_max_entries}">

<li>

<g:content_summarizer content="${current}"/>

</li>

</g:for_each_record>

</ul>

</div>

</j:jelly>

Under the Style Sheets, I opened my "Menu" style (in mine it's called "North- Gray CSS — Menu")

I scrolled down to the "Navigation List Style" section and added this code right at the bottom of what was in that section (right above the Tab Menu Styles (UI Macro cms_menu_tab_content_block section header:

div.catalog_list_container {

margin-bottom: 12px;

width: 800px ;

}

div.catalog_list_title {

padding: 0px 0px;

border-bottom:0px solid #FFFFFF;

font-weight: bold;

color: #FFF;

background: #FFF url(gray_catalog_list_title.pngx) repeat-x center center;

}

div.catalog_list_menu_items a.catalog_list_link, div.catalog_list_menu_items a {

display: block;

font-size: 14pt;

background-color: #FFF;

padding: 10px 10px 10px 10px;

color: #007CC3;

}

div.catalog_list_menu_items ul li {

list-style-type: none;

margin: 0px;

padding: 0px;

color: #007CC3;

}

div.catalog_list_menu_items ul {

list-style-type: none;

margin: 0px;

padding: 0px;

color: #007CC3;

}

div.catalog_list_menu_items a.catalog_list_menu_items:hover, div.catalog_list_menu_items a:hover {

background-color: #f7f7f7;

color:#007CC3;

}

div.catalog_list_menu_items a.catalog_list_menu_items:active, div.catalog_list_menu_items a:active {

background-color: #f7f7f7;

color:#007CC3;

}

Next, for my Block "Lists" I chose the "Type" of "Catalog Lists" to pull in the List Definition I had created. This made it so that it used the code in the "Catalog Lists" List Definition I had created…which looked to the added code in the Menu Style Sheet I use.

I didn't really write anything new, I just copied a different list definition and copied the code that was in the menu style sheet for it...then modified them to get my needed font size and color.

I hope that's helpful.

thanks,

Richelle