Need help in modifying the following things :-

[shrawan bomjan]

I want to do the following tree things for now :-

1.

2.

3.

I have the following css codes in the custom css box 

.xg_theme #xg_masthead { *zoom:1; position:relative; padding-top:0px; padding-bottom:0px;}
.xg_theme .xg_module_head { padding-bottom:4px; padding:3px 10px 4px 10px; margin:0;}
#xn_bar {
background-color: #356AA0 !important;/*you can change any color*/
}
.xg_theme #xg_themebody {
border-top: medium none !important;
}
#xn_bar {
margin: 0 auto;
width: 1002px !important;
}
div.member_item h5 {text-transform:capitalize!important;}
.xg_widget_profiles .xg_headline .tb h1 {text-transform:capitalize!important;}

/************************* Forum Module Style ***********************/

/* Forum Text style */
.module_forum h3 {font-family: Myriad Pro;}

.module_forum .photo{display:none!important;}

.module_forum .topic {border-bottom:1px dashed #333; padding-bottom:20px!important;box-shadow: 0 0 10px #000; padding:20px; border-radius:6px; margin-bottom:20px!important;}

.module_forum .indent{margin:5px!important; text-align:justify;}

.module_forum .xj_expandable {margin:20px 0 0 0;}
/* Forum Text style */

/* Forum Background Color */
.xg_widget_main .module_forum {-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
background-color:#E6E6E6!important;}
/* Forum Background Color *

/************************* Forum Module Style ***********************/

/* Scroll Bar for Forums */ .xg_widget_main .module_forum .xg_module_body {height: 500px;overflow : auto;position:relative;} /* Scroll Bar for Forums */

* Blog Background Color */ .xg_widget_main .module_blog {-moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; background-color:#E6E6E6!important;} /* Blog Background Color *

/* Scroll Bar for Blog */ .xg_widget_main .module_blog .xg_module_body {height: 500px;overflow : auto;position:relative;} /* Scroll Bar for Blog */

.xg_widget_main .xg_module_activity .xg_module_body {height: 833px;overflow : auto;position:relative;}

.xg_widget_main .module_video .xg_module_body {height: 500px;overflow : auto;position:relative;}

Thank you for your kind help in advance.

[Mat]

To remove the bar: 

#xn_bar{display:none;}

I don't get your first and third question. 

[shrawan bomjan]

The code you give is the solution for my first question, many thanks,

The second question is that the blue gap, that denotes which page I am in, I want to remove it and the third one is the make the box border look like the box below.

[Bernard Lama]

Try to adjust height and width...

#xg_masthead {margin: auto; display: block;height:167px; width:955px; background-color:transparent ; background-image: url(image_ulr); background-repeat: no-repeat; background-position: top center}

[shrawan bomjan]

Thank you for your kind reply Bernard brother but that didn't help at all.

[shrawan bomjan]

Yes the Banner height is 125 pixel and I did that but still the blue line appeared.

[Bernard Lama]

I'm sure this code will help you 

Paste this directly into CSS Box

.xg_theme #xg_navigation li.this {
border-top: 0px solid #1386B0;}