Need help on Building CSS on Service Portal

[shaik_irfan]

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 · Accepted solution]

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

[shaik_irfan]

Thank David.

As suggested when i navigate to Portals and open a portal record and when i scroll down i dont see CSS Include and when i configure Related List i still dont see CSS Include. Can you please help me where to apply the CSS Include so i can see the changes in the complete Portal view.

[DScroggins]

My apologies I meant once you open the Portal theme you will see the CSS Includes related list.

[shaik_irfan]

I didnt get that. you mean navigae to Portals and open Portal and i will have CSS include Related List?