MyBB Community Forums

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

Fiveous

2012-12-30, 08:34 AM
Hi, I installed a theme recently and the panel seems to be under the logo and what Im trying to do is move the panel beside the logo, I remember that I can play around with it long ago but now for some reason I forgot how to do all that. Here is a picture to help my explanation.
[spoiler]
[Image: 1H95y]
[/spoiler]
The panel is under the logo, but I want it to sit beside the logo and smaller the width to fit in.

Any ideas? All help will be appreciated.

Here is the css code on global, might help.
body {
	background: #cdcdcd ;
	color: #000000;
	text-align: center;
	line-height: 1.4;
	margin-bottom: 20;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

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

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

a:hover, a:active {
color: #8d0101;
	text-decoration: underline;
}

#games_background {
background:url(images/gamesmania/background.jpg) no-repeat;
height:147px;
               background-position: center top;
margin:auto auto;
}

#wrapper_container {
	padding: 20px;
width:910px;
margin:auto auto;
}

.logo {
	padding: 0px 0 0 0;
	float: left;
}

.advertise {
    padding: 10px 0 0 0;
float:right;
}

#header_bar {
height:111px;
background:url(images/gamesmania/wrapper-background.png);
}

#container {
	background: #e0e0e0;
	width: 910px;
	color: #000000;
	margin: auto auto;
	padding: 20px;
	text-align: left;
	border-right-style: solid;
	border-left-style: solid;
	border-bottom-style: solid;
	border-width: 1px;
	border-color: #000000;
}


}


}

#footer_stuff {
	padding: 20px;
width:910px;
margin:auto auto;
	color: #89857a;
	font-size: 11px;
	text-align: center;
}

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

#panel {
	background: #ffffff;
	color: #000000;
	border: 1px solid #43403A;
	padding: 10px;
	align: right;
	font-size: 11px;
}

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

.tborder {
	background: #38352E;
	width: 100%;
	margin: auto auto;
	border: 1px solid #43403A;
	padding: 15px;
}

.thead {
	border-bottom:2px solid #928B78;
	color:#4D9EA5;
	font-family:Arial,Helvetica,Sans-serif;
	font-size:16px;
	font-weight:bold;
	line-height:16px;
	margin:10px 0 0;
	padding:6px 0;
	text-transform:uppercase;
}

.thead a:link {
	color: #4D9EA5;
	text-decoration: none;
    text-shadow: 0 1px 0 #007c78;
}

.thead a:visited {
	color: #4D9EA5;
	text-decoration: none;
    text-shadow: 0 1px 0 #007c78;
}

.thead a:hover, .thead a:active {
	color: #ffffff;
    text-shadow: 0 1px 0 #007c78;
	text-decoration: underline;
}

.tcat {
	background: #38352E;
	color: #fff;
	font-size: 12px;
}

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

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

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

.trow1 {
	background: #38352E;
color:#BBB7AD;
}

.trow2 {
	background: #38352E;
color:#BBB7AD;
}

.trow_shaded {
	background: #ffdde0;
}

.trow_selected td {
	background: #FFFBD9;
}

.trow_sep {
	color: #BBB7AD;
	font-size: 12px;
	font-weight: bold;
}

.tfoot {
		background: #38352E;
	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 {
margin-top:10px;
	padding: 28px;
background:url(images/gamesmania/footer-background.png) left center repeat-x;
    color: #a29f97;
}

.navigation {
	color: #BBB7AD;
	font-size: 13px;
	font-weight: bold;
}

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

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

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

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

.smalltext {
	font-size: 11px;
}

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

input.textbox {
	background: #33302A;
	color: #A6A29B;
	border: 1px solid #4E4A42;
	padding: 4px;
}

textarea {
	background: #33302A;
	color: #A6A29B;
	border: 1px solid #4E4A42;
	padding: 4px;
	font-family: Verdana, Arial, Sans-Serif;
	line-height: 1.4;
	font-size: 13px;
}

select {
	background: #33302A;
	color: #A6A29B;
	border: 1px solid #4E4A42;
	padding: 4px;
}

input.button {
	background:#474339;
	color:#CFCBC0;
	font-size:12px;
	padding:4px 15px;
	text-decoration:none;
	text-shadow:0 1px 0 #322E23;
	border: none;
}

input.button:hover {
	background:#676256;
	color:#CFCBC0;
	font-size:12px;
	padding:4px 15px;
	text-decoration:none;
	text-shadow:0 1px 0 #322E23;
	border: none;
}

.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;
	padding: 10px 0 0 0;
}

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

blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}

.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;
color:#2A2721;
}

.pm_alert a:link {
color:#2A2721;
}

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

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

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

.pagination .pages {
	background:none repeat scroll 0 0 transparent !important;
	border:0 none !important;
	color:#CFCBC0 !important;
	font-size:13px !important;
	padding:4px 8px !important;
}

.pagination .pagination_current, .pagination a {
	background:none repeat scroll 0 0 transparent !important;
	border:0 none !important;
	color:#CFCBC0 !important;
	font-size:13px !important;
	padding:4px 8px !important;
}

.pagination a {
	background:none repeat scroll 0 0 transparent !important;
	border:0 none !important;
	color:#CFCBC0 !important;
	font-size:13px !important;
	padding:4px 8px !important;
}

.pagination .pagination_current {
	background:none repeat scroll 0 0 #CFCBC0 !important;
	border:0 none !important;
	color:#171511 !important;
	font-size:13px !important;
	font-weight:bold;
	padding:4px 8px !important;
	font-weight: bold;
}

.pagination a:hover {
	background:#4d9ea5!important;
	border:0 none !important;
	color:#ffffff !important;
	font-size:13px !important;
	padding:4px 8px !important;
}

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

MyBB Tuneup

2012-12-30, 08:37 AM
Your website URL ?

effone

2012-12-30, 08:46 AM
Find in your global css:

#panel {
background: #ffffff;

Make it:

#panel {
float: right;
background: #ffffff;

Next, open your header template and move up this chunk of code:

			<div id="panel">
				{$welcomeblock}
			</div>

Just after:

<div id="header">

Now adjust the elements of welcomeblock (member and guest) to match the look.

Fiveous

2012-12-30, 09:02 AM
(2012-12-30, 08:37 AM)MyBB Tuneup Wrote: [ -> ]Your website URL ?
Sorry, its not online yet. Still designing theme on localhost.

(2012-12-30, 08:46 AM)effone Wrote: [ -> ]Find in your global css:

#panel {
background: #ffffff;

Make it:

#panel {
float: right;
background: #ffffff;

Next, open your header template and move up this chunk of code:

			<div id="panel">
				{$welcomeblock}
			</div>

Just after:

<div id="header">

Now adjust the elements of welcomeblock (member and guest) to match the look.

Ok I got it all working, its now beside the logo and stretched down. Thank you for the help. Any ideas how to edit the panel content? I want to remove like last visit and stuff.

effone

2012-12-30, 09:20 AM
The template to edit is:

header_welcomeblock_member

The elements are easily identifiable.

Fiveous

2012-12-30, 09:32 AM
(2012-12-30, 09:20 AM)effone Wrote: [ -> ]The template to edit is:

header_welcomeblock_member

The elements are easily identifiable.

How do I edit the actual text? text that are echoed. Cause this is messy. Or maybe you got other idea how to clean this up.
[Image: 1H9UF]

effone

2012-12-30, 09:37 AM
Add this more under
#panel {

text-align: left;

Find the language settings under Configurations to change narrations.

Fiveous

2012-12-30, 09:42 AM
(2012-12-30, 09:37 AM)effone Wrote: [ -> ]Add this more under
#panel {

text-align: left;

Find the language settings under Configurations to change narrations.

Thank you very much, again. That was really helpful.

tamnguyen949

2012-12-30, 10:02 AM
Here you are!

Home » Template Sets » Your Templates
Edit Template: header

Quote:<div id="games_background">
<div id="menu_container">
<div id="pagemenucontainer">
<ul id="pagemenu">
<li class="home"><a href="index.php">Home</a></li>
<li class="search"><a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></li>
<li class="memberlist"><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>
<li class="calendar"><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
<li class="help"><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
</ul>
</div>
</div>
</div>
<div id="header_bar">
<div id="wrapper_container">
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

{$welcomeblock}

</div>

</div>
<br />
<div id="container">
<a name="top" id="top"></a>
<div id="header">


<hr class="hidden" />
<!--div id="panel">
{$welcomeblock_backup}
</div-->
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
<navigation>
<br />

Home » Template Sets » Your Templates
Edit Template: header_welcomeblock_guest
Quote:<form action="member.php" method="post">
<input type="hidden" name="action" value="do_login" />
<input type="hidden" name="url" value="{$redirect_url}" />
<span class="smalltext"><strong>{$lang->quick_login}</strong></span>
<input type="text" class="textbox" name="username" title="{$login_username}" value="{$lang->login_username}" onfocus="if(this.value == '{$lang->login_username}') { this.value=''; }" onblur="if(this.value=='') { this.value='{$lang->login_username}'; }" />
<input type="password" class="textbox" name="password" title="{$lang->login_password}" value="{$lang->login_password}" onfocus="if(this.value == '{$lang->login_password}') { this.value=''; }" onblur="if(this.value=='') { this.value='{$lang->login_password}'; }" />
<input name="quick_remember" id="quick_login_remember" type="checkbox" value="yes" class="checkbox" checked="checked"><label for="quick_login_remember">{$lang->remember_me}</label>
<input type="submit" class="button" value="{$lang->go}" />
</form>

Home » Template Sets » Your Templates
Edit Template: header_welcomeblock_member
Quote:<fieldset style="border: 2px solid #bde1fd;
border-radius: 8px;
-moz-border-radius:5px;
-webkit-border-radius:5px;">
<!--span style="float:left;">{$lang->welcome_current_time}</span><br /-->
<span style="float:left;">{$lang->welcome_back} </span><br />
<span style="float:left;">(<a href="{$mybb->settings['bburl']}/usercp.php"><strong>{$lang->welcome_usercp}</strong></a>{$modcplink}{$admincplink} &mdash; <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a>)</span><br />
<span style="float:left;">
<span class="links">
<a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a>
</span>
|<a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a> {$lang->welcome_pms_usage}</span>
</fieldset>

[Image: MyBB.vn-1.PNG]

[Image: MyBB.vn-2.PNG]
MyBB Community Forums > Extensions > Themes > Theme Support > Moving panel beside logo?