MyBB Community Forums

Full Version: Problem with Space in Skin
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Our new forums are almost ready to go live. The one last niggling problem I have is with the gap between the forum header and top of the news bar.

Basically if you look at the screen shot you will see two red arrows. What I would like to do is half the size of that gap. I have looked through the templates and style sheets but cant seem to find where to change the size.

Does anyone know where to look or can anyone look for me?

[Image: forum-screen.jpg]
Check your index, header, and header_welcomeblock_member templates to see if there's any <br /> in there.
There was one in the header template which I have just removed but thats it. Its still a little for down though.

Any other ideas?
Look at your global.css in your admin cp because it looks like the id "container" is adding padding and that could be part of the problem.

Could you possibly set up a test account so we can see what it looks like as a logged in user and see the html and css code.
The gap is the same size when you are logged in or as a guest.

Heres the CSS for the global file Smile

body {
	background: #cfddfd;
	color: #4d528a;
	text-align: center;
	line-height: 1.4;
	margin: 0px;
	font-family: Tahoma;
	font-size: 12px;
}

a:link {
	color: #4d528a;
	text-decoration: none;
}

a:visited {
	color: #4d528a;
	text-decoration: none;
}

a:hover, a:active {
	color: #4d528a;
	text-decoration: underline;
}

#container {
	background: #fff;
	width: auto !important;
	color: #4d528a;
	border: 1px solid #e4e4e4;
	padding: 0px;
	margin: 0px;
	text-align: left;
}

#content {
	width: auto !important;
	padding: 15px;
}

.menu ul {
	color: #000000;
	font-weight: bold;
	text-align: right;
	padding: 4px;
}

.menu ul a:link {
	color: #000000;
	text-decoration: none;
}

.menu ul a:visited {
	color: #000000;
	text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
	color: #4874a3;
	text-decoration: none;
}

#panel {
	background: #feffe6;
	width: auto !important;
	color: #333333;
	border: 1px dotted #feecac;
	padding: 8px;
	margin: 15px;
	
	font-size: 11px;
}

table {
	color: #000000;
	font-family: Tahoma;
	font-size: 12px;
}

.tborder {
	background: #e2e1ea;
	width: 100%;
	margin: auto auto;
	border: 1px solid #7b81cd;
}

.thead {
	background: #97aad6 url(images/element/titleimage1.gif) top left repeat-x;
	color: #ffffff;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover, .thead a:active {
	color: #FFFF66;
	text-decoration: underline;
}

.tcat {
	background: #b8ccfb url(images/element/gradient_thead1.gif) top left repeat-x;
	color: #ffffff;
	font-size: 11px;
}

.tcat a:link {
	color: #ffffff;
}

.tcat a:visited {
	color: #ffffff;
}

.tcat a:hover, .tcat a:active {
	color: #FFFF00;
}

.trow1 {
	background: #EFF0F4;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
}

.trow2 {
	background: #F5F5FF;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
}

.trow_shaded {
	background: #ffdde0;
}

.trow_selected td {
	background: #FFFBD9;
}

.trow_sep {
	background: #e5e5e5;
	color: #000;
	font-size: 11px;
	font-weight: bold;
}

.tfoot {
	background: #97aad6 url(images/element/titleimage1.gif) top left repeat-x;
	color: #ffffff;
}

.tfoot a:link {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:visited {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
	color: #ffffff;
	text-decoration: underline;
}

.bottommenu {
	background: #97aad6 url(images/element/titleimage1.gif) top left repeat-x;
	color: #ffffff;
	border: 1px solid #4874a3;
	padding: 10px;
	text-align: left;
	font-family: Tahoma;
	font-size: 11px;
	font-weight: bold;
}

.bottommenu a:link {
	color: #ffffff;
	text-decoration: none;
}

.bottommenu a:visited {
	color: #ffffff;
	text-decoration: none;
}

.bottommenu a:hover, .tfoot a:active {
	color: #ffffff;
	text-decoration: underline;
}

.navigation {
	color: #000000;
	font-size: 11px;
	font-weight: bold;
}

.navigation a:link {
	text-decoration: none;
}

.navigation a:visited {
	text-decoration: none;
}

.navigation a:hover, .navigation a:active {
	text-decoration: none;
}

.navigation .active {
	color: #000000;
	font-size: small;
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 13px;
	font-weight: bold;
}

input.textbox {
	background: #ffffff;
	color: #000000;
	border: 1px solid #0f5c8e;
	padding: 1px;
	
	font-family: Tahoma;
	font-size: 11px;
}

textarea {
	background: #ffffff;
	color: #000000;
	border: 1px solid #0f5c8e;
	padding: 2px;
	line-height: 1.4;
	
	font-family: Tahoma;
	font-size: 11px;
}

select {
	background: #ffffff;
	border: 1px solid #0f5c8e;
	
	font-family: Tahoma;
	font-size: 11px;
}

.button {
	font-family: Tahoma;
	font-size: 11px;
}

.editor {
	background: #f1f1f1;
	border: 1px solid #ccc;
}

.editor_control_bar {
	background: #fff;
	border: 1px solid #0f5c8e;
}

.autocomplete {
	background: #fff;
	border: 1px solid #000;
	color: black;
}

.autocomplete_selected {
	background: #adcee7;
	color: #000;
}

.popup_menu {
	background: #ccc;
	border: 1px solid #000;
}

.popup_menu .popup_item {
	background: #fff;
	color: #000;
}

.popup_menu .popup_item:hover {
	background: #C7DBEE;
	color: #000;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.invalid_field {
	border: 1px solid #f30;
	color: #f30;
}

.valid_field {
	border: 1px solid #0c0;
}

.validation_error {
	background: url(images/invalid.gif) no-repeat center left;
	color: #f30;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_success {
	background: url(images/valid.gif) no-repeat center left;
	color: #00b200;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_loading {
	background: url(images/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

/* Additional CSS (Master) */
img {
	border: none;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.menu ul {
	list-style: none;
	margin: 0;
}

.menu li {
	display: inline;
	padding-left: 5px;
}

.menu img {
	padding-right: 5px;
	vertical-align: top;
}

#panel .links {
	margin: 0;
	float: right;
}

.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
	margin-top: 3px;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}

#copyright {
	font: 11px Verdana, Arial, Sans-Serif;
	margin: 0;
	text-align: center;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 0;
}

blockquote {
	border: 1px solid #ccc;
	margin: 0;
	background: #fff;
	padding: 4px;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-style: normal;
	display: block;
	margin: 4px 0;
}

blockquote cite span {
	float: right;
	font-weight: normal;
}

.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 4px;
}

.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	margin: 4px 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.subforumicon {
	border: 0;
	vertical-align: middle;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

form {
	margin: 0;
	padding: 0;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 3px;
	text-decoration: none;
	white-space: nowrap;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.autocomplete {
	text-align: left;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding: 3px;
}

.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;
	text-align: center;
	padding: 5px 20px;
	font-size: 11px;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	font-size: 11px;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
}

div.error p {
	margin: 0;
	color: #000;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(images/error.gif) no-repeat 0;
}

div.error.ul {
	margin-left: 24px;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
	padding-top: 0;
}

.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current, .pagination a {
	padding: 2px 6px;
	margin-bottom: 3px;
}

.pagination a {
	border: 1px solid #81A2C4;
}

.pagination .pagination_current {
	background: #F5F5F5;
	border: 1px solid #81A2C4;
	font-weight: bold;
}

.pagination a:hover {
	background: #F5F5F5;
	text-decoration: none;
}

.thread_legend, .thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.post_body {
	padding: 5px;
}

.post_content {
	padding: 5px 10px;
}

.quick_jump {
	background: url(images/jump.gif) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	vertical-align: middle;
	border: none;
}

/* ***** Header and Nav  ***** */
.header_bg {
background: #FFFFFF url(images/element/header_bg1.gif) ;
}

.nav_menu_control {
color:  #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}

.nav_menu_control a:link {
color:  #FFFFFF;
text-decoration: none;
}

.nav_menu_control a:visited {
color:  #FFFFFF;
text-decoration: none;
}

.nav_menu_control a:hover, .nav_menu_control a:active {
color:  #FFFFFF;
text-decoration: underline;
}

.nav_border_out {
background-color: transparent;  
border: 1px dotted #feecac;
}

.nav_border_in {
background-color: #feffe6;
border: 1px solid #FFFFFF;  
padding: 4px;
}

.navbar_forms {
background-color: #FFFFFF;
color: #4D528C;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border: 1px solid #feecac;
padding: 2px;
margin: 5px;
vertical-align: middle;
}

.navbar_forms:focus {
background-color: #FFFFFF;
color: #4D528C;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border: 1px solid #7b81cd;
padding: 2px;
margin: 5px;
vertical-align: middle;
}
That shouldn't be all of it.

You should see this in the file

#content {
	width: auto !important;
	padding: 15px;
}

The padding is what I think you need to change.
Yes that is in there. You need to scroll down Big Grin
My bad, did you try changing the value?
Changed to this:

#content {
	width: auto !important;
	padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
}

Which did reduce the size of the space a little. But its still like there is a hidden <br /> or padding somewhere?
What about this one ?
		<br class="clear" />

header template;
Pages: 1 2