align the content on portal header

amaradiswamy
Kilo Sage

Hi All,

I am presently learning CMS in servicenow. Till now, i learnt using OOTB "Employee self service" site to create pages and all. Now, i want to create a site with new "Theme" and "Layout". I have created a basic layout to show 3 divisons(one for header, 2nd for welcome image and 3rd for menu). and i am using the below style sheet in the theme( i got this code from a text book)

style sheet:

body {

font-family: Lucida Grande, Verdana, 'Lucida Sans Unicode',

sans-serif;

}

/*

The corporate font is used throughout the page.

*/

.dropzone {

width: 900px;

margin: 0 auto;

}

.cms_title img {

margin: 0 auto;

display: block;

}

/*

Center the content areas, making them 900 pixels wide. The large

image in the content block is also centralized.

*/

#title {

font-size: xx-large;

padding: 10px 10px 10px 20px;

}

/*This alters the title text, enlarging the size of the characters

and adding some padding.

*/

.cms_header_container {

padding: 20px

}

/*

This rule ensures the header has some space around it.

*/

.cms_header_logo img {

width: 200px;

}

/*

The logo in the header is resized, and some padding is added at

the top and bottom.

*/

.cms_header_container,

.cms_header table,

.cms_header_login a,

.cms_menu_dropdown a {

background-color: green;

color: white !important;

}

/*

The text in the header is made white, and the header background is

made a burnt orange.

*/

.cms_content>div {

width: 700px;

margin: 0px auto

}

.cms_menu_section_blocks_image_left img {

width: 100px;

float: right

}

.cms_menu_section_blocks {

width: 350px;

float: left;

margin: 0 auto

}

.cms_menu_section_blocks_image_left {

width: 120px

}

.menu_bullet {

margin-left: 110px;

/*

This series of styles aligns the block menu, rearranging it to fit

in the middle of the screen. It ensures that two blocks can float

in the middle of the page, with the elements lining up nicely.

*/

.cms_menu_dropdown_container {

float: right;

height: 0px;

margin-top: -20px

}

/*

The header menu is moved to the right, and realigned to the bottom

of the banner.

*/

.cms_menu_dropdown li {

float: right;

margin: 0 5px 0 50px;

font-size: large

}

/*

The items in the header menu are arranged beside each other, with

a margin, and the text made bigger.

*/

.cms_header_login {

float: right;

height: 0px;

}

/*

The welcome message is floated to the right, and reduced in height

to align it with the logo.

*/

But now how to adjust "Global search" and "welcome, admin logout" to right side?

When i have created a navigation menu of the type "dropdown", they are coming vertically and i want to align them horizontally like for OOTB "Portal- Header". Please help me to acheive this.

find_real_file.png

Thanks & Regards,

swamy

3 REPLIES 3

Brad Tilton
ServiceNow Employee
ServiceNow Employee

I think you would need to text-align:right; or float:right; that element. If you're building a site from scratch, it's a really good idea to try to find a web designer/developer at your company to help you out with the html/css. I would also highly recommend starting with a bootstrap template rather than from scratch.



http://getbootstrap.com/


Hi Brad,



Thank you so much for reply.



How to use Bootsrap in Servicenow. Please provide me some insight so that i can explore and try. could you please provide me the resources because i am new to Servicenow CMS.



Thanks again.



Regards,


Swamy