MyBB Community Forums

MyBB Community Forums > Resources > MyCodes > Tutorial how theme background
Full Version: Tutorial how theme background
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

Dragonzsoul

2011-01-23, 05:26 AM
I wonder sense smiliar on background I tried code not work

I am mess cause on give up on

How who is experiecne template graphic on! I wonder

I figure out think so good background shape on color

I wonder

global.css

THank help me

mess my code how figure out headache

Yaldaram

2011-01-23, 05:35 AM
Do you want to change background of your forum ? If so then;

Go to: ACP > Themes > Your theme > global.css ? edit in advanced mode > and find;
body {
	background: #efefef;
	color: #000;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
	text-align: center; /* IE 5 fix */
	line-height: 1.4;
}
or something similar to that, (if you have any custom theme) and change the background: #efefef; attribute to the image URL you want to use as your background. So your new style will be like this;
body {
	background: #efefef url(images/logo.gif);
	color: #000;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
	text-align: center; /* IE 5 fix */
	line-height: 1.4;
}

Change images/logo.gif to your image path.

Dragonzsoul

2011-01-23, 06:06 AM
I think so on center sure try It tough! on line,
(2011-01-23, 06:06 AM)smithtrd Wrote: [ -> ]I think so on center sure try It tough! on line,


I tried it seems on not understand how on not work

center?
code not sure

Thank



@charset "utf-8";
/* CSS BlackEvo4 by: cwis */
body {
background-color: #0a0a0a;
color: #a2a2a2;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.4;
margin: 0;
padding: 0;
background-image: #efefef url(images/whitesnow.gif);
background-repeat: no-repeat;
background-position: center top;
}

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

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

a:hover, a:active {
color: #369f98;
text-decoration: underline;
}

#wrapper {
width: 1020px;
padding: 0;
background-color: #121212;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #2b2b2b;
border-left-color: #2b2b2b;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
}

#logo {

height: 95px;
text-align: left;
margin: 0;
padding: 0 15px 10px 15px;
}

.logo {
width: 250px;
height: 80px;
position: absolute;
margin-top: 15px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}

#navbar {
background: url(images/blackevo4-nature/navx.png) repeat-x;
width: 100%;
height: 32px;
margin: 0;
padding: 0;
font-family: Arial, Sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 32px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #2b2b2b;
border-bottom-color: #2b2b2b;
text-align: center;
}

#nav {

list-style: none;
float: left;
margin: 0;
padding: 0;
text-align: center;
}

#nav a {
color: #EEE;
text-decoration: none;
display: block;
float: left;
margin: 0;
padding: 0 24px 0 24px;
}

#nav a:hover {
color: #81bf29;
text-decoration: none;
background-image: url(images/blackevo4-nature/navhover.png);
background-repeat: no-repeat;
background-position: center bottom;
}

#nav a.current {
color: #81bf29;
background-image: url(images/blackevo4-nature/navhover.png);
background-repeat: no-repeat;
background-position: center bottom;
}

#nav li {
display: inline;
margin: 0;
padding: 0;
}

#contentwrap {

}

#btmnav {

height: 30px;
clear: both;
background-image: url(images/blackevo4-nature/thead_bg.gif);
background-repeat: repeat-x;
}

.btmnav {
line-height: 30px;
font-size: 12px;
margin: 0 15px;
text-align: left;
}

#footer {
width: 100%;
height: 25px;
clear: both;
color: white;
background-repeat: repeat-x;
line-height: 25px;
background-image: url(images/blackevo4-nature/footer.gif);
background-position: left;
}

.footertext {
line-height: 25px;
font-size: 11px;
margin: 0 15px;
text-align: center;
display: inline;
}

#footer a {
color: #FCFCFC;
border-bottom: 1px dashed #FCFCFC;
text-decoration: none;
}

#footer a:visited {
color: #FCFCFC;
border-bottom: 1px dashed #FCFCFC;
text-decoration: none;
}

#footer a:hover {
color: white;
text-decoration: underline;
border: none;
}

#container {

color: #a2a2a2;
margin: auto auto;
padding: 0 20px 20px 20px;
text-align: left;
background-color: #121212;
}

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

.topsec {
margin: 0 0 7px 0;
}

#panel {
width: auto;
float: right;
margin: 0;
padding: 0;
}

body #panel {
width: auto;
}

#panelcontent {
color: #a2a2a2;
line-height: 17px;
height: 87px;
font-size: 11px;
margin-top: 0;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
padding-top: 8px;
padding-right: 10px;
padding-bottom: 8px;
padding-left: 10px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
background-color: #0d0d0d;
background-image: url(images/blackevo4-nature/panelbg.png);
background-repeat: repeat-x;
background-position: bottom;
}

#panel .block {
margin: 0;
padding: 5px;
border: 1px solid #2b2b2b;
background-color: #121212;
display: inline-block;
vertical-align: middle;
background-image: url(images/blackevo4-nature/navx.png);
background-repeat: repeat-x;
}

.login {
background: url(images/blackevo4-nature/toplinks/login.png) no-repeat;
padding: 0 0 0 18px;
display: inline-block;
font-weight: bold;
}

.register {
background: url(images/blackevo4-nature/toplinks/register.png) no-repeat;
padding: 0 0 0 18px;
display: inline-block;

font-weight: bold;
}

.usercp {
background: url(images/blackevo4-nature/toplinks/usercp.png) no-repeat;
padding: 0 0 0 18px;
display: inline-block;

font-weight: bold;
}

.modcp {
background: url(images/blackevo4-nature/toplinks/modcp.png) no-repeat;
padding: 0 0 0 18px;
display: inline-block;

font-weight: bold;
}

.admincp {
background: url(images/blackevo4-nature/toplinks/admincp.png) no-repeat;
padding: 0 0 0 18px;
display: inline-block;

font-weight: bold;
}
.author a {
font-size: 10px;
font-weight: bold;
}

.logout {
background: url(images/blackevo4-nature/toplinks/logout.png) no-repeat;
padding: 0 0 0 18px;
display: inline-block;

font-weight: bold;
}

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

.tborder {
width: 100%;
margin: auto auto;
border: 1px solid #202020;
margin-top: -1px;
background-color: #000000;
}

.tborder2 {
width: 100%;
margin: auto auto;
}

.theadleft {
background: url(images/blackevo4-nature/thead_left.png) top left no-repeat;
width: 8px;
display: inline-block;
float: left;
height: 29px;
margin: 0;
padding: 0;
}

.theadright {
background: url(images/blackevo4-nature/thead_right.png) top left no-repeat;
width: 8px;
display: inline-block;
float: right;
height: 29px;
margin: 0;
padding: 0;
}

.theadmain {
background: url(images/blackevo4-nature/thead_bg.gif) top left repeat-x;

height: 29px;
line-height: 30px;
margin: 0 8px 0 8px;
}

.thead {
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: #81bf29;
text-decoration: underline;
}

.tcat {
color: #3d3b35;
font-size: 12px;
background-color: #0d0d0d;
}

.tcat a:link {
color: #3d3b35;
}

.tcat a:visited {
color: #3d3b35;
}

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

.trow1 {
background-color: #0a0a0a;
background-image: url(images/blackevo4-nature/trow_bg.gif);
background-repeat: repeat-x;
background-position: bottom;
}

.trow2 {
background-color: #0a0a0a;
background-image: url(images/blackevo4-nature/trow_bg.gif);
background-repeat: repeat-x;
background-position: bottom;
}

.trow_shaded {
background: #ffdde0;
}

.trow_selected td {
background: #FFFBD9;
}

.trow_sep {
color: #3d3b35;
background-color: #0a0a0a;
border-bottom-width: 8px;
border-bottom-style: solid;
border-bottom-color: #369f98;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #369f98;
border-right-color: #369f98;
border-left-color: #369f98;
}

.tfoot {
color: #ffffff;
background-color: #232323;
background-image: url(images/blackevo4-nature/thead_bg.gif);
background-repeat: repeat-x;
background-position: left top;
}

.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: #efefef;
color: #000000;
border: 1px solid #4874a3;
padding: 10px;
}

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

.activebit {
width: 15px;
height: 15px;
display: inline-block;
background-image: url(images/blackevo4-nature/nav_bit.gif);
background-repeat: no-repeat;
}

.smalltext {
font-size: 11px;
}

.largetext {
font-size: 20px;
}

input.textbox {
color: #a2a2a2;
border: 1px solid #000000;
padding: 1px;
background-color: #202020;
background-image: url(images/blackevo4-nature/input-bg.png);
background-repeat: repeat-x;
}
input.textbox:hover {
border: 1px solid #369f98;
}

textarea {
background: #202020;
color: #a2a2a2;
border: 1px solid #000000;
padding: 2px;
line-height: 1.4;
font-size: 13px;
}


select {
color: #a2a2a2;
border: 1px solid #000000;
padding: 1px;
background-color: #202020;
background-image: url(images/blackevo4-nature/input-bg.png);
background-repeat: repeat-x;
}

.editor {
background: #121212;
border: 1px solid #000;
}

.editor_control_bar {
background: #121212;
border: 1px solid #000;
}

.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/blackevo4-nature/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/blackevo4-nature/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/blackevo4-nature/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 {
width: auto;
float: right;
vertical-align: middle;
margin-top: 8px;
}

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 #2b2b2b;
margin: 0;
padding: 4px;
background-color: #121212;
}

blockquote cite {
font-style: normal;
display: block;
background-color: #0a0a0a;
font-family: "Times New Roman", Times, serif;
padding: 3px;
margin-top: 4px;
margin-right: 0;
margin-bottom: 4px;
margin-left: 0;
border: 1px solid #202020;
}

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

.codeblock {
border: 1px solid #000000;
padding: 4px;
background-color: #202020;
}

.codeblock .title {
font-weight: bold;
margin: 4px 0;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #81bf29;
}

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

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/blackevo4-nature/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;
line-height: 50px;
}

.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/blackevo4-nature/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;
}

/* IE6 css fixer v0.1 alpha: Tue, 14 Apr 2009 15:52:01 +0200 */

/* ============================================= */
/* safe settings */

/* add display:inline to floated elements */
#nav,
#nav a,
#panel,
.theadleft,
.theadright,
.float_left,
.float_right,
#panel .links,
.expcolimage,
#debug,
blockquote cite span,
.forum_legend dd,
.forum_legend dt {display:inline;}


THat is why

I notice not work background failed I struggle on background!

sorry I am not understand fix system!

Wes the Bes

2011-01-25, 11:50 AM
Here is why your center is not working, your container which is the content of your forum is aligned left.
#container {

color: #a2a2a2;
margin: auto auto;
padding: 0 20px 20px 20px;
text-align: left;
background-color: #121212;
}
Align it to center and it should work.

Dragonzsoul

2011-02-15, 09:07 AM
mark solve work!
MyBB Community Forums > Resources > MyCodes > Tutorial how theme background