MyBB Community Forums

Hi, everyone would need to give me a hand - I want to put a background image or gif and the forum where the transparent themes are. I went crazy already. Could you give me a hand? Where and what should I put? . thank you 

the theme is blackplayers - pag : https://newgamingnetwork.com/index.php

.hint, [data-hint] {
position: relative;
display: inline-block;
}

.hint:before, .hint:after, [data-hint]:before, [data-hint]:after {
position: absolute;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: hidden;
    opacity: 15;
z-index: 1000000;
pointer-events: none;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
transition: 0.3s ease;
-webkit-transition-delay: 0ms;
-moz-transition-delay: 0ms;
transition-delay: 0ms;
}

.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
visibility: visible;
opacity: 1;
}

.hint:hover:before, .hint:hover:after, [data-hint]:hover:before, [data-hint]:hover:after {
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
transition-delay: 100ms;
}

.hint:before, [data-hint]:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
z-index: 1000001;
}

.hint:after, [data-hint]:after {
content: attr(data-hint);
background: #383838;
color: white;
padding: 8px 10px;
font-size: 12px;
line-height: 12px;
white-space: nowrap;
}

.hint--top:before {
border-top-color: #383838;
}

.hint--bottom:before {
border-bottom-color: #383838;
}

.hint--left:before {
border-left-color: #383838;
}

.hint--right:before {
border-right-color: #383838;
}

.hint--top:before {
margin-bottom: -12px;
}

.hint--top:after {
margin-left: -18px;
}

.hint--top:before, .hint--top:after {
bottom: 100%;
left: 50%;
}

.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {
-webkit-transform: translateY(-8px);
-moz-transform: translateY(-8px);
transform: translateY(-8px);
}

.hint--bottom:before {
margin-top: -12px;
}

.hint--bottom:after {
margin-left: -18px;
}

.hint--bottom:before, .hint--bottom:after {
top: 100%;
left: 50%;
}

.hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before {
-webkit-transform: translateY(8px);
-moz-transform: translateY(8px);
transform: translateY(8px);
}

.hint--right:before {
margin-left: -12px;
margin-bottom: -6px;
}

.hint--right:after {
margin-bottom: -14px;
}

.hint--right:before, .hint--right:after {
left: 100%;
bottom: 50%;
}

.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before {
-webkit-transform: translateX(8px);
-moz-transform: translateX(8px);
transform: translateX(8px);
}

.hint--left:before {
margin-right: -12px;
margin-bottom: -6px;
}

.hint--left:after {
margin-bottom: -14px;
}

.hint--left:before, .hint--left:after {
right: 100%;
bottom: 50%;
}

.hint--left:hover:after, .hint--left:hover:before, .hint--left:focus:after, .hint--left:focus:before {
-webkit-transform: translateX(-8px);
-moz-transform: translateX(-8px);
transform: translateX(-8px);
}

.hint, [data-hint] {
}

.hint:after, [data-hint]:after {
text-shadow: 0 -1px 0px black;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

.hint--error:after {
background-color: #b34e4d;
text-shadow: 0 -1px 0px #592726;
}

.hint--error.hint--top:before {
border-top-color: #b34e4d;
}

.hint--error.hint--bottom:before {
border-bottom-color: #b34e4d;
}

.hint--error.hint--left:before {
border-left-color: #b34e4d;
}

.hint--error.hint--right:before {
border-right-color: #b34e4d;
}

.hint--warning:after {
background-color: #c09854;
text-shadow: 0 -1px 0px #6c5328;
}

.hint--warning.hint--top:before {
border-top-color: #c09854;
}

.hint--warning.hint--bottom:before {
border-bottom-color: #c09854;
}

.hint--warning.hint--left:before {
border-left-color: #c09854;
}

.hint--warning.hint--right:before {
border-right-color: #c09854;
}

.hint--info:after {
background-color: #3986ac;
text-shadow: 0 -1px 0px #193b4d;
}

.hint--info.hint--top:before {
border-top-color: #3986ac;
}

.hint--info.hint--bottom:before {
border-bottom-color: #3986ac;
}

.hint--info.hint--left:before {
border-left-color: #3986ac;
}

.hint--info.hint--right:before {
border-right-color: #3986ac;
}

.hint--success:after {
background-color: #458746;
text-shadow: 0 -1px 0px #1a321a;
}

.hint--success.hint--top:before {
border-top-color: #458746;
}

.hint--success.hint--bottom:before {
border-bottom-color: #458746;
}

.hint--success.hint--left:before {
border-left-color: #458746;
}

.hint--success.hint--right:before {
border-right-color: #458746;
}

.hint--always:after, .hint--always:before {
opacity: 1;
visibility: visible;
}

.hint--always.hint--top:after, .hint--always.hint--top:before {
-webkit-transform: translateY(-8px);
-moz-transform: translateY(-8px);
transform: translateY(-8px);
}

.hint--always.hint--bottom:after, .hint--always.hint--bottom:before {
-webkit-transform: translateY(8px);
-moz-transform: translateY(8px);
transform: translateY(8px);
}

.hint--always.hint--left:after, .hint--always.hint--left:before {
-webkit-transform: translateX(-8px);
-moz-transform: translateX(-8px);
transform: translateX(-8px);
}

.hint--always.hint--right:after, .hint--always.hint--right:before {
-webkit-transform: translateX(8px);
-moz-transform: translateX(8px);
transform: translateX(8px);
}

.hint--rounded:after {
border-radius: 4px;
}

.hint--no-animate:before, .hint--no-animate:after {
-webkit-transition-duration: 0ms;
-moz-transition-duration: 0ms;
transition-duration: 0ms;
}

.hint--bounce:before, .hint--bounce:after {
-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
}

html, body {
margin: 0;
padding: 0;
    background:  #252525;
font-family: 'Exo 2', sans-serif;
font-size: 12px;
line-height: 1.4;
font-weight: 300;
color: transparent;
}

a, input, textarea, button, .button {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}

a:link, a:visited {
color: #e4dddd;
text-decoration: none;
}

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

input, textarea {
background: #161616;
color: #FFFFFF;
border: 1px solid #ccc;
padding: 2px;
line-height: 1.4;
outline: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;

}
.login-box label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}

.login-box input[type=radio], .login-box input[type=checkbox] {
display: none;
}

.login-box label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 1px;
bottom: 1px;
background-color: #636468;
}

.login-box .radio label:before {
border-radius: 8px;
}

.login-box .checkbox label {
margin-bottom: 10px;
}

.login-box .checkbox label:before {
    border-radius: 3px;
}

.login-box input[type=radio]:checked + label:before {
    content: "\2022";
    color: #f3f3f3;
    background: #636468;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}

.login-box input[type=checkbox]:checked + label:before {
content: "\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
background: #636468;
font-size: 13px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
}

button, .button {
background: #4c4e53;
padding: 9px 16px;
border-radius: 3px;
font-family: 'Open Sans', Arial, Tahoma, Verdana, sans-serif;
font-size: 14px;
border: none;
color: #fff;
cursor: pointer;
}

button:hover, button:focus, .button:hover, .button:focus{
background: #636468;
outline: 0;
}

.float-left {
float: left;
}

.float-right {
float: right;
}

.clear {
clear: both;
}

.color-theme {
color: #4bb67d;
}

.main-conteiner {
background: #161616;
color: #252525;
width: 80%;
min-width: 960px;
margin: 0 auto;
}

.main-header {
background: url(images/BlackPlayers/img_menu.jpg) no-repeat 50% 50%;
background-size: cover;
height: 77px;
line-height: 77px;
color: #e4dddd;
text-shadow: 1px 1px 1px rgba(0,0,0,0.10);
text-transform: uppercas;
background-repeat: repeat;
}

.main-header a:link, .main-header a:visited {
color: #e4dddd;
}

.main-header a:hover, .main-header a:active {
color: #272727;
}

.main-header-body {
background: url(images/BlackPlayers/color+.jpg) no-repeat;
background-size: cover;
min-height: 220px;
}

.logo {
width: 330px;
height: 200px;
margin-right: 30px;
}

.logo h1 {
text-indent: -999em;
}

.logo a {
display: block; width: 630px; height: 200px;
}

.main-menu {
font-size: 12px;
}

.main-menu>ul>li {
display: block;
float: left;
position: relative;
}

.main-menu>ul>li>a:link, .main-menu>ul>li>a:visited {
height: 74px;
line-height: 74px;
display: block;
float: left;
padding: 0 15px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.10);
text-transform: uppercase;
}

.main-menu>ul>li>a:hover, .main-menu>ul>li>a:active {
color: #e4dddd;
background-color: rgba(250, 250, 250, 0.04);
border-bottom: 3px solid #224e91;
}

.line {
  border-left: 1px solid rgba(250, 250, 250, 0.04);
border-right: 1px solid rgba(250, 250, 250, 0.04);
}

.line-right {
border-right: 1px solid rgba(250, 250, 250, 0.04);
}

.login-box {
display: none;
position: absolute;
top: 123px;
right: 157px;
width: 300px;
    background: #232324;
    border: solid 5px #686868;
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
padding: 20px;
    text-transform: none;
z-index: 9999;
font-size: 14px;
}

.login-box h2 {
margin-bottom: 10px;
font-weight: 400;
}

.login-box .input-wraper {
position: relative;
margin-bottom: 10px;
}

.login-box .input-wraper .txt-icon {
position: absolute;
font-size: 14px;
top: 14px;
left: 15px;
}

.login-box .input-wraper input.txt-field {
display: block;
width: 250px;
padding-left: 30px;
border: solid 1px #4c4e53;
background: #333;
}

.login-box button {
width: 300px;
background: #4c4e53;
padding: 9px 16px;
border-radius: 3px;
font-family: 'Open Sans', Arial, Tahoma, Verdana, sans-serif;
font-size: 14px;
border: none;
color: #fff;
cursor: pointer;
}

.login-box button:hover {
background: #636468;
outline: 0;
}

.login-close a:link,  .login-close a:visited {
    width: 15px;
    height: 15px;
    display: block;
    text-align: center;
    line-height: 15px;
    font-size: 9px;
    border-radius: 3px;
}

.login-close a:hover, .login-close a:active, .login-close a:focus {
background: #6d7d83!important;
}

.login-close a i {
    line-height: inherit;
    color: #fff;
}

ul.login-menu {
    margin-top: 20px;
}

ul.login-menu li {
    display: block;
    margin-top: 5px;
}

ul.login-menu li a {
    background: none!important;
}

.user-panel {
font-size: 14px;
margin-top: 90px;
min-width: initial;
}

.user-panel>ul>li {
display: block;
float: left;
position: relative;
font-weight: 700;
margin-right: 5px;
border-radius: 3px;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
background: #686868;
}

.user-panel>ul>li>a:link, .user-panel>ul>li>a:visited {
height: 34px;
line-height: 34px;
display: block;
float: left;
padding: 0 15px;
color:#fff;
}

.user-panel>ul>li>a:hover, .user-panel>ul>li>a:active {
color: #fff;
box-shadow: inset 0px -100px 0px 0px rgba(0,0,0,0.1);
outline: 0;
}

.user-panel>ul>li>ul {
    position: absolute;
    display: none;
    top: 32px;
    right: -0px;
    width: 200px;
    background: #232324;
    border: solid 5px #686868;
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
    z-index: 9997;
font-weight: 200;
}

.user-panel>ul>li>ul>li>a {
display: block;
padding: 5px 0;
}

.user-panel>ul>li>ul>li {
    display: block;
}

.user-panel>ul>li>ul>li>a:link, .user-panel>ul>li>ul>li>a:visited {
    display: block;
    padding: 8px 10px;
    font-size: 14px;
    border-bottom: solid 1px #353535;
}

.user-panel>ul>li>ul>li>a:hover, .user-panel>ul>li>ul>li>a:active {
color: #fff;
}

.user-name, .guest-login, .guest-register, .threads, .posts, .birthdays {
text-transform: uppercase;
}

.scaleimages img {
max-width: 100%;
}

.forum_status {
height: 50px;
width: 50px;
font-size: 35px;
text-align: center;
}

.forum_status i {
display: inline-block;
line-height: 50px;
}

.forum_on {
color: #348e1d;
}

.forum_off, .forum_offlock, .forum_offlink {
color: #fff;
}

.forum_off i {
opacity: .4;
}

.forum_offlock i:before {
content: "\f023";
}

.forum_offlink i:before {
content: "\f0c1";
}

.subforumicon {
height: 10px;
width: 10px;
display: inline-block;
margin: 0 5px;
background: url(images/BlackPlayers/mini_status_sprite.png) no-repeat 0 0;
}

.subforum_minion {
background-position: 0 0;
}

.subforum_minioff {
background-position: 0 -10px;
}

.subforum_miniofflock {
background-position: 0 -20px;
}

.subforum_miniofflink {
background-position: 0 -30px;
}

table {
color: #e4dddd;
font-size: 13px;
}

.tborder {
width: 100%;
margin: auto auto;
background-color: #111111;
border: 1px solid #1A1A1A;
padding: 5px;
border-radius: 6px;
}

.tfixed {
table-layout: fixed;
word-wrap: break-word;
}

.thead {
background: url(images/BlackPlayers/img_panel.png) no-repeat;
background-size: cover;
color: #e4dddd;
height: 55px;
line-height: 55px;
padding: 0px 10px;
border-bottom: 3px solid #224e91;
text-transform: uppercase;
border-radius: 5px;
font-size: 14px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.10);
}

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

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

.thead a:hover, .thead a:active {
color: #e4dddd;
text-decoration: none;
}

.cat-link {
margin-left: 50px;
line-height: 55px;
}

.cat-icon {
margin-top: 7px;
width: 40px;
height: 40px;
background: #0d3470;
left: 0px;
text-align: center;
line-height: 40px;
border-radius: 6px;
}

.cat-icon i {
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
}

If I understood correctly here are the affected areas in global.css that need changing

.main-menu>ul>li>a:hover, .main-menu>ul>li>a:active {
 color: #e4dddd;
 background-color: rgba(250, 250, 250, 0.04);
 border-bottom: 3px solid #224e91;
}

.line {
  border-left: 1px solid rgba(250, 250, 250, 0.04); 
 border-right: 1px solid rgba(250, 250, 250, 0.04);
}

.line-right {
 border-right: 1px solid rgba(250, 250, 250, 0.04);
}

.expcolimage {
 float: right;
 width: 30px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 vertical-align: middle;
 background: rgba(0,0,0,0.3);
 border-radius: 6px;
 margin-top: 13px;
}

.expcolimage:hover {
 background: rgba(0,0,0,0.5)
}

AND WHAT VALUES DO I PUT?

(2019-05-15, 08:46 PM)dmz Wrote: [ -> ]AND WHAT VALUES DO I PUT?

I don't understand what you're expecting from me

.main-menu>ul>li>a:hover, .main-menu>ul>li>a:active {
 background-image: url(); /* Place your image/gif here */
 background-repeat: no-repeat; /* We will be using defined heights and widths, you may need to calculate theses yourself */
 width: inherit;
 height: inherit;
 color: #e4dddd;
}

.line {
 background-image: url(); /* Place your image/gif here */
 background-repeat: repeat-y; /* We only need to repeat top to bottom */
/* You may need to use background-position */
 width: inherit;
 height: inherit;
}

.line-right {
 background-image: url(); /* Place your image/gif here */
 background-repeat: no-repeat; /* We will be using defined heights and widths, you may need to calculate theses yourself */
 width: inherit;
 height: inherit;
}

.expcolimage {
 float: right;
 width: 30px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 vertical-align: middle;
 background-image: url(); /* Place your image/gif here */
 background-repeat: no-repeat;
 border-radius: 6px;
 margin-top: 13px;
}

.expcolimage:hover {
 background-image: url(); /* Place your image/gif here */
 background-repeat: no-repeat;
 width: inherit;
 height: inherit;
}