Custom CSS and images

Include custom CSS and images

Make sure that you do not use an existing file name, because the uploaded file overwrites older versions without further inquiry. Images (e.g. *.jpg, *.png) requested by your CSS can be uploaded through the same upload form.

After uploading your CSS, you can select the uploaded stylesheet file for the current page in the Page Settings tab under the Layout selector. To edit multiple pages you can go to the Page-Management tab and edit a page. Click on the wrench icon and it will open a dialog, allowing you to specify a CSS for each page.

Create custom CSS

The instruction given in this documentation demands basic CSS knowledge. A free CSS online-guide can be found on http://www.w3schools.com/css/.

You can customize the appearance of nearly every visible element of your Connections Engagement Center. CSS language depends on order and specificity. To detect which selector you have to use to change an attribute (color, size, etc.) we recommend you to use either the Developer-Tools of Google Chrome (https://developer.chrome.com/devtools) or the Developer-Toolbar of Mozilla Firefox (https://developer.mozilla.org/docs/Tools).

Your customized CSS is loaded last. This way using the same selector as the one that is applied should change the appearance of the element. If not, and even an increased specificity does not result in the desired behavior the important-keyword will grant you access to the attribute.

Uploaded images are located in the same folder as the CSS. No path has to be specified.

CSS for all pages

If you are using one Connections Engagement Center page only or want all Connections Engagement Center pages to behave and appear in the same way, it is recommended to use CSS selectors starting with the .xccstyle body-class.

.xccstyle {
	background-color: #f00;
}

CSS by page-id

Through the .{page-id} body-class you can set styles that exclusively apply to the Connections Engagement Center page having the page-id. This way you can avoid uploading CSS files for each Connections Engagement Center page you want to appear different from the standard.

.my-special-page {
	background-color: #0f0;
}

CSS by grid layout

If you want your pages to behave differently depending on what grid layout is selected, we recommend that you select by .Layout{#} body-class in your CSS.

.Layout17 {
	background-color: #00f;
}

CSS for widgets

<div class="widget" position="{grid-positon}">
	<div class="xccWidget" data-wtype="{widget-type}">
		<div class="wheader">
			<div class="wtitle">
				<!-- Title here --!>
			</div>
		</div>
		<div class="wbody">
			<div class="{widget-type}">
				<!-- Content here --!>
			</div>
		</div>
	</div>
</div>