Webboard

Webboard > Wsparcie MyBB > Style, szablony i grafika > Obrazek na obrazku
Pełna wersja: Obrazek na obrazku
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.

Feri

22.04.2011, 23:53
wersja skryptu MyBB:1.6.3
adres forum: http://metin2board.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):Problem z dodaniem 2 żądnego tła.

Witam! Niedawno postanowiłem sobie zedytować styl My BBMod v2 na własne potrzeby. Wszystko szło ładnie do puki nie wpadłem na taki ciekawy pomysł,niestety nie wiem jak go zrealizować.
Forum aktualnie wygląda tak :
[Obrazek: nowz.jpg]

A chciałbym aby wyglądało tak :
[Obrazek: nowj.png]

Mój kod CSS
Kod:
body {
        background: #2f3f4e url(images/v2/bg2.gif) center repeat;
        background-attachment: fixed;
        color: #222;
    text-align: center;
    line-height: 1.4;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

a:link, a:visited {
    color: #1359AE;
    outline: 0;
    text-decoration: none;
}

a:hover, a:active {
    color: #C62222;
    outline: 0;
    text-decoration: underline;
}

#container {
    background: url(images/v2/container.png) repeat-y;
    width: 978px;
    color: #222;
    text-align: left;
    margin: auto auto;
}

#content {
    width: 920px;
    margin: auto;
    line-height: 1.4em;
}

.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: #efefef;
    color: #000000;
    font-size: 11px;
    border: 1px solid #D4D4D4;
    padding: 8px;
}

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

.tborder {
    background: #ccc;
    width: 100%;
    margin: auto auto;
    border: 1px solid #999;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.thead {
    background: #026CB1 url(images/v2/thead.png) top left repeat-x;
    color: #ffffff;
    padding: 7px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
}

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

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

.tcat {
    background: #ADCBE7 url(images/v2/tcat2.png) repeat-x;
    color: #fff;
    font-size: 12px;
}

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

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

.tcat2 {
    background: #ADCBE7 url(images/v2/tcat2.png) repeat-x;
    color: #fff;
    font-size: 12px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
}

.tcat2 a:link, .tcat a:visited {
    color: #fff;
    text-decoration: none;
}

.tcat2 a:hover, .tcat a:active {
    color: #fff;
    text-decoration: underline;
}

.trow1 {
    background: #f5f5f5;
    border-top: 1px solid #FFF;
    border-left: 1px solid #FFF;
}

.trow2 {
    background: #F1F1F1;
    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: 12px;
    font-weight: bold;
}

.tfoot {
    background: #026CB1 url(images/v2/thead.png) top left repeat-x;
    color: #ffffff;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
}

.tfoot a:link, .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: #000000;
    font-size: 13px;
    font-weight: bold;
}

.navigation a:link, .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;
    padding: 2px;
    border: 1px dotted grey;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

textarea {
    background: #ffffff;
    color: #000000;
    line-height: 1.4;
    padding: 2px;
    border: 1px dotted grey;
    font-family: Verdana, Arial, Sans-Serif;
    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;
    vertical-align: middle;
}

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

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

.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 {
    background: transparent url(images/v2/header.png) no-repeat;
    height: 115px;
    position: relative;
}

#header_home_link {
    position: absolute;
    width: 600px;
    height: 100px;
    top: 7px;
    left: 0;
}

#logo, #logo_with_tagline {
    text-decoration: none;
    color: #FFF;
    font-family: "Rockwell", Arial, sans-serif;
    letter-spacing: -1px;
    font-size: 40px;
    font-weight: bold;
    position: absolute;
    top: 48px;
    left: 25px;
    text-shadow: #17222C 1px 1px 1px;
}

#logo_with_tagline {
    top: 38px;
}

#tagline {
    color: #AABBC8;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    font-style: italic;
    position: absolute;
    top: 70px;
    left: 25px;
    text-shadow: #17222C 1px 1px 1px;
}

#header_search {
    width: 210px;
    height: 45px;
    position: absolute;
    top: 40px;
    right: 25px;
}

#search_input {
    position: absolute;
    left: 13px;
    top: 13px;
    width: 160px;
    font-size: 14px;
    border: solid 1px #FFF;
}

.overlabel {
    color: #888888;
    position: absolute;
    top: 14px;
    left: 17px;
    z-index: 1;
    padding: 2px;
    border: 1px dotted grey;
    
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

.overlabel-apply {
    color: #888;
    position: absolute;
    top: 14px;
    left: 17px;
    z-index: 1;
}

#navigation {
    height: 54px;
    background: url(images/v2/navigation.png);
    position: relative;
}

#subscribe {
    color: #FFF;
    position: absolute;
    height: 25px;
    width: 239px;
    top: 18px;
    left: 20px;
    text-align: center;
}

#subscribe a {
    text-decoration: none;
    font-weight: bold;
    background-color: #852F32;
    padding: 2px 4px;
    color: #FFF;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-shadow: #3D1618 0 1px 1px;
    border-top: solid 1px #3D1618;
    border-bottom: solid 1px #BB4C46;
    position: relative;
    top: 1px;
}

#subscribe #rss_icon_link {
    position: absolute;
    width: 40px;
    height: 40px;
    top: -12px;
    right: 232px;
    border: none;
    background: none;
}

#subscribe a:hover {
    background-color: #000;
}

.after_post_rss {
    margin-top: 20px;
    padding: 20px 20px 20px 75px;
    background: url(images/v2/after_post_rss.png) no-repeat 17px 17px #FFFCD5;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: solid 1px #F2E0AC;
}

#footer {
    clear: both;
    height: 80px;
    background: url(images/v2/footer.png) no-repeat;
    position: relative;
}

#copyright {
    color: #AEC0C9;
    position: absolute;
    top: 20px;
    left: 40px;
}

#copyright a {
    text-decoration: none;
    font-weight: bold;
    color: #FFF;
    text-shadow: #2D3D4D 0 1px 1px;
}

#copyright a:hover {
    color: #ffffff;
    text-decoration: none;
}

#copyright .copyright_owner {
    color: #DDEEF3;
}

#site_map {
    position: absolute;
    width: 500px;
    height: 25px;
    top: 20px;
    right: 40px;
    text-align: right;
    color: #424F62;
}

#site_map a {
    text-decoration: none;
    color: #FFF;
    font-weight: bold;
    text-shadow: #2D3D4D 0 1px 1px;
    margin-left: 12px;
}

#site_map a:hover {
    text-decoration: none;
}

#credits {
    clear: both;
    text-align: center;
    position: relative;
    top: -5px;
    padding-bottom: 20px;
    font-size: 11px;
    color: #5C6D7C;
}

#credits a {
    text-decoration: none;
    color: #9AABB9;
}

#credits a:hover {
    color: #FFF;
    text-decoration: none;
}

.iletisim {
    background: transparent url(images/v2/iletisim.png) no-repeat left center;
    padding-left: 20px;
}

.yukari {
    background: transparent url(images/v2/yukari.png) no-repeat left center;
    padding-left: 20px;
}

.arsiv {
    background: transparent url(images/v2/arsiv.png) no-repeat left center;
    padding-left: 20px;
}

.anasayfa {
    background: transparent url(images/v2/anasayfa.png) no-repeat left center;
    padding-left: 20px;
    vertical-align: text-top;
    width: 16px;
    height: 16px;
}

.navayrac {
    background: transparent url(images/v2/ok.gif) no-repeat left center;
    padding-left: 13px;
    vertical-align: text-top;
}

.navbit {
    background: transparent url(images/v2/nav_bit.gif) no-repeat left center;
    padding-left: 15px;
    vertical-align: text-top;
}

.alt_forumlar {
    list-style: none;
    margin: 0;
    padding: 0;
}

.alt_forumlar li {
    width: 50%;
    float: left;
}

.yazar a:link, .yazar a:visited {
    color: #333333;
    text-decoration: none;
}

.yazar a:hover, .yazar a:active {
    color: #333333;
    text-decoration: none;
}

.moderasyon {
    background: #FAFCFE url(images/v2/moderasyon.png) center left no-repeat;
    color: #465584;
    background-color: #FAFCFE;
    border-left: 4px solid #b28383;
    border-right: 1px dotted #000;
    border-top: 1px dotted #000;
    border-bottom: 1px dotted #000;
    padding: 4px;
    padding-left: 50px;
    margin: 0px auto 8px auto;
}

Co muszę dodać aby cos takiego zrobić?

mbujak

23.04.2011, 00:06
Tworzysz obrazek o wymiarach np. 1342x310 (podaję wymiary tła ze stylu blackevo4), tam dajesz ten pattern cegiełkami i wstawiasz co chcesz w odpowiednim miejscu, musisz tylko dobrze to dopasować. Nową tapetę zapisujesz jako bg2.gif i podmieniasz z istniejącą w katalogu images/v2 na FTP.

Feri

23.04.2011, 00:28
Oj jednak nie bardzo rozumie :P
źle mnie zrozumiałes :P To drewniane tlo to jest tło gif 64x64 z repeat. Ja chcę dać osobne tło nad tym tłem drewnianym
Dokładniej to chciałbym cos w tym stylu.
http://www.minecraftwb.com/

na samej górze jest obrazek a za obrazkiem zwykłe szare tło.
Ja bym chciał obrazek i za obrazkiem to drewniane tło
Webboard > Wsparcie MyBB > Style, szablony i grafika > Obrazek na obrazku