Need help on Building CSS on Service Portal

shaik_irfan · ‎11-01-2019

Hi,

I am new to Service Portal one of my Customer gave me a CSS file which contains more 2000 lines code and asking me to apply on the portal. I never worked on Portal and i am not sure how & Where to apply the given code.

Sample snapshot is pasted below:

/* Universal NAV */
.navbar{height:85px; width:100%; background-color:#0568ac; border-bottom:1px solid #d2d2d2;}
.navbar .btn-menu{line-height:1; background-color:transparent; border:none !important; margin:5px 0 0 0 !important; padding:0 !important; min-width:45px !important; display:none}
.navInner{height:85px; position:relative;}
.navbar .container{height:85px; transition:none;}
.navbar .container:after {
	content: "";
	display: block;
	height: 0;
	position: relative;
	top: 85px;
}
.brand {
	color: #ffffff;
	display: block;
	float: left;
	font-family: "font-light", "Omnes-ATT-W02-Light";
	font-size: 2.3rem;
	height: 45px;
	line-height: 44px;
	margin: 20px 0 0 -5px;
	padding: 0 15px 0 5px;
	position: absolute;
}
.brand:active{color:#fff;}
.brand sup {
	color: #fcb314;
	font-family: "font-regular", "Omnes-ATT-W02";
	font-size: 1.4rem;
	position: relative;
	right: 0;
	top: 12px;
}
.brand:hover,
.brand:focus{text-decoration:none;}
.brand[data-focus-method="key"]:focus{outline:1px dotted white; outline-offset:8px;}
.brand .icon-att-globe {
	color: #fff;
	float: left;
	font-size: 44px;
	left: -2px;
	margin-right: 25px;
	position: relative;
	top: 0;
}
.brand .icon-att-globe:before{color:#fff;}
.brand strong {
	font-family: "font-medium", "Omnes-ATT-W02-Medium";
	font-weight: normal;
}
.navbar .btn-menu {
	color: #fff;
	font-size: 3rem;
	height: 45px;
	width: 45px;
	position: absolute;
	right: 10px;
}
.navbar button:hover,
.navbar button:focus {
	outline-offset: 2px !important;
}
.navbar button:focus {
	outline: 1px dotted white !important;
}

can anyone please help me in understanding where to apply this code and show the changes ?

DScroggins · ‎11-01-2019

Hi,

There are several places where CSS can be applied in a Service Portal so it will depend on the CSS and how you want it applied. If you want it applied to the entire portal than you can apply it to the Portal theme as a CSS includes. If you only want the CSS to be applied to a particular page within the portal then you can apply to the page specific CSS located on the portal page record. If you only want it applied to a particular widget then you can apply it to the widget CSS.

To create a Portal CSS Includes open the portal record and then click 'New' in the CSS Includes Related list. Give the record a name and select 'Style Sheet' for the source. Under the style sheet reference field click the search icon then click 'New'. A new window will popup where you can give it a name and then paste in the CSS which was supplied to you. Save all the records then the CSS will be applied to the Portal.

Hope this helps.

--David

View solution in original post

DScroggins · ‎11-01-2019

Navigate to Portals - > Open the Portal Record - > then open the theme record whcih is where the CSS Includes is:

In the Portal theme record you will then be able to add the Portal CSS:

Fuse Henry · ‎08-26-2022

This question, and answer is three years old now, and things seem to have changed. I'm using ROME at the moment, and will upgrade to Tokyo in the near future.

I am developing a portal, but "CSS Includes" are nowhere to be found in the portal record. I do see CSS Variables, but pasting my CSS in there had no effect. Can someone share the new process for adding custom CSS to a portal? Or point me to the easiest, clearest resource for learning to use CSS Variables, if that's what I need to do. Thank you!