MyBB Community Forums

MyBB Community Forums > Extensions > Themes > Theme Support > Expanding header
Full Version: Expanding header
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

bigoliver

2011-01-12, 06:01 PM
Hi,

I would like to make the header on my forum expand, you know as the web browser page expands, but I have no idea Huh how to do this?

I am New to websites, forums and html, so please be kind.

If someone has a guide or could give me simple steps I would v much appreciate that Smile

Regards,

Oliver

Ps I have v 1.6.1 if that matters?

Yaldaram

2011-01-12, 06:03 PM
Do you want to change its width ? I'm not sure what do you mean by "forum expand".

bigoliver

2011-01-12, 06:44 PM
(2011-01-12, 06:03 PM)Yaldaram Wrote: [ -> ]Do you want to change its width ? I'm not sure what do you mean by "forum expand".

Thanks for your quick reply, I want the header to extend wider when you make ur browser window wider, so that the header always stretches the full width of the browser just like my forum does.

Regards,

Oliver

Jen_Vuongyen

2011-01-13, 11:23 AM
Well ~ I have the same question ^^
Yes the width of my forums is now 730px ~ It's too tiny I think.. Because we use many letters, and 730px of width only makes it harder to read...~ I'm trying to change it to 900px. I edit the Global Css and my forums turns out like that:

http://jen_vuongyen.freevnn.com/forums/index.php

Haahahhaha~ I guese I did something wrong ^^
Please tell me what I have to change and how?
Here my Global Css if u need it (And just ask me to provide anymore infos, I'll be happy to give out)

body
{
	background: url(styles/rainbow/rbbg.gif) fixed center;
	color: #000000;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}


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

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

a:hover, a:active {
	color: #ff8c00;
	text-decoration: none;
}

#container {
	background: #fff;
	color: #000000;
	padding: 0px 20px 10px 20px;
        text-align: left; /* IE 5 fix */
}

#content {
	/* FIX: Make internet explorer wrap correctly */
	width: auto !important;
}

.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;
}


table {
	color: #000000;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

.tborder {
	background: #f1f1f1;
        width: 100%;
        color: #000000;
}

.thead {
	background: #82ba00 url(styles/rainbow/thead_bg.gif) top no-repeat;
	color: #ffffff;
        font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

.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: none;
}

.tcat {
	background: #fed227 url(styles/rainbow/tcat_bg.jpg) repeat-x top;
	color: #000000;
        font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
        padding: 4px;
}

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

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

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

.trow1 {
	background: #ffffff;
}

.trow2 {
	background: #ffffff;
}

.trow_shaded {
	background: #ffdde0;
}

.trow_selected td {
	background: #FFFBD9;
}

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

.tfoot {
	background: #ffe69e url(styles/rainbow/foot_bg.gif) top left repeat-x;
	color: #cc0000;
}

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

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

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

.bottommenu {
	background: #fffaec;
	color: #000000;
	border: 1px dashed orange;
	padding: 6px;
}

.navigation {
	color: #000000;
	font-size: 13px;
	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: 16px;
	font-weight: bold;
}

input.textbox {
	background: #ffffff;
	color: #000000;
	border: 1px solid #0f5c8e;
	padding: 1px;
}

textarea {
	background: #ffffff;
	color: #000000;
	border: 1px solid #0f5c8e;
	padding: 2px;
	font-family: Verdana, Arial, Sans-Serif;
	line-height: 1.4;
	font-size: 13px;
}

select {
	background: #ffffff;
	border: 1px solid #0f5c8e;
}

.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;
}


.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;
}


#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;
}

.menu_control
{
	background: #82ba00 url(styles/rainbow/thead_bg.gif) no-repeat top left;
	color: #FFFFFF;
	font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	padding: 3px 6px 3px 6px;
	white-space: nowrap;
}
.menu_control a:link, .menu_control_alink
{
	color: #FFFFFF;
	text-decoration: none;
}
.menu_control a:visited, .menu_control_avisited
{
	color: #FFFFFF;
	text-decoration: none;
}
.menu_control a:hover, .menu_control a:active, .menu_control_ahover
{
	color: #FFFF00;
	text-decoration: underline;
}

.box1
{
	background: #fffaec;
border: 1px dashed orange;
padding: 6px;
}

.smallfont
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

.foot_l
{
background: url(styles/rainbow/foot_l.gif) no-repeat top left;
height: 11px;
}
.foot_r
{
background: url(styles/rainbow/foot_r.gif) no-repeat top right;
height: 11px;
}
.foot_c
{
background: url(styles/rainbow/foot_c.gif) repeat-x top;
height: 11px;
}

.cat_cen
{
background: url(styles/rainbow/cat_cen.gif) no-repeat center;
width: 900px;
height: 50px;
}
.cat_foot
{
background: url(styles/rainbow/cat_foot.gif) no-repeat center;
width: 900px;
height: 27px;
}
.cat_top
{
background: url(styles/rainbow/cat_top.gif) no-repeat center;
width: 900px;
height: 21px;
}
.cat_bg
{
background: url(styles/rainbow/cat_bg.gif) repeat-y center;
width: 900px;
}

.foot_rb
{
background: url(styles/rainbow/foot_rb.gif) no-repeat center bottom;
}

.indextp {

    background: #EBEBEB;

    border: 1px solid #F8A613;

        border-style: dashed;

    padding: 3px;

    text-align: center;

    font-size: 9px;

}
By the way, I want my forums' width to expand, not only the header ^^ Hope you get my point Smile

Thanks!

bigoliver

2011-01-13, 04:06 PM
Hi,

I think what I need to do is to change the header background colour to the same as my header colour, giving the illusion that the header is expanding when expanding the web broswer.
Can anyone help with changing the header background colour?

Cheers,

Oliver
Hi I managed to change the header background colour, I had to add a new custom css to give the header its own (expanding) box, like a banner, then I added a picture to this box (just a colour, the same as the edges of my logo).

Now when I adjust the browser the header appears to adjust too. Big Grin Im happy!

I found this really good guide and it helped me a lot, thank you Euantor....

"Ok. I'll sort you out a quick guide that should sort things out for you =P
By default, the MyBB logo is positioned within the COntainer div. To add a banner, that's going to need to change.

First steps first. Go to "Templates and Styles" within the admin area. Select your theme that you wish to change the header of. Click "Add Stylesheet". Call it "custom.css", set it "Globally" and select "Write my own content". In the box that appears, add this code:

Code:
#topheader {
width: 95%;
background: #fff url(images/gfxpalace/misc/head_bg.png) no-repeat;
background-position: center top;
border: 0px solid #e4e4e4;
color: #000000;
margin: auto auto;
padding: 20px;
text-align: left; /* IE 5 fix */
}

(You can customise this however you wan, obviously).

Now, save that and go back to "STyles and Templates". Now to edit the template.

Click on Templates at the left and select the template set for your theme. Edit the template called "header".

Right at the top, add:

Code:
<div id="topheader">
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
</div>

Now, find the next recurrence of
Code:
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
and delete it. Save and you should be done. it doesn't look great - but it's up to you to customise it exactly how you want =D I can help with that too if you wish.



NOTE: you may want to edit the logo image so it has a transparent background. Otherwise it will look not too good."
MyBB Community Forums > Extensions > Themes > Theme Support > Expanding header