Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Zmiana tła strony ze względu na dział

Założony przez  sogoodpl.

15.09.2013, 14:36 (Ten post był ostatnio modyfikowany: 15.09.2013, 17:41 przez sogoodpl.)
#1
wersja skryptu MyBB: 1.6.10
adres forum:
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Witam,

Czy jest możliwość aby tło strony zmieniało się ze względu na dział w jakim się jest?

Przykładowo wchodzi się w dział np. Fifa i tło strony się zmienia na wybrane przeze mnie, następnie LeagueOfLegends i też tło się zmienia.

I jak się wróci na stronę główną to jest podstawowe.
Sepowaty napisał 15.09.2013, 16:46:
Nie wytłuszczamy treści całego wątku!
15.09.2013, 15:10 (Ten post był ostatnio modyfikowany: 15.09.2013, 15:12 przez Destroy666.)
#2
Jest na to kilka sposobów:
1) Pobierasz XThreads: http://mybbhacks.zingaburga.com/showthread.php?tid=288 i dodajesz prefixy szablonów do poszczególnych działów. Tworzysz szablony z prefixami (prefix_forumdisplay, prefix_showthread, prefix_newthread itd.) i w nich zmieniasz klasę/styl body (czy innego elementu z tłem) tak żeby miał inny background.

2) Pobierasz Template Conditionals: http://mybbhacks.zingaburga.com/showthread.php?tid=464 i bawisz się w w warunki "jeśli $GLOBALS['fid'] jest równy X takie tło, jeśli Y to inny itd." w szablonach forumdisplay, showthread, newthread itd.
Przykładowy kod:
<body <if $GLOBALS['fid'] == 4 then>class="fifa"<elseif $GLOBALS['fid'] == 2 then>class="leagueoflegends"</if>>

3) Robisz to samo co wyżej w plikach bez pluginu ale w plikach showthread.php itd., tworząc zmienną na bazie $fid i umieszczając ją w szablonach w body. Bez pluginu Patches nie polecam.

Najbardziej polecam pierwszy sposób, jak nie wiesz jak się za to zabrać tu masz dużo przykładowych aplikacji do tego pluginu: http://mybbhacks.zingaburga.com/showthread.php?tid=559 Później można pójść dalej i wprowadzić jeszcze więcej modyfikacji odróżniających działy.
Moje pluginy MyBB / Mój Github
15.09.2013, 15:41 (Ten post był ostatnio modyfikowany: 15.09.2013, 16:02 przez sogoodpl.)
#3
Dla mnie to jest czarna magia, pobrałem, zainstalowałem i stoję ... Nie wiem co dalej zrobić.

Łatwiejsze wydaje się chyba to drugie ale i tak nie wiem jak się za to zabrać.
Czy w wolnej chwili byłbyś w stanie mi pomóc?
15.09.2013, 16:03
#4
W szablonach, w których chcesz to mieć (czyli tak jak pisałem forumdisplay, showthread, newthread, newreply, editpost i każdym innym głównym związanym z działami i który zawiera <body>) zamieniasz <body> na:
<body <if $GLOBALS['fid'] == 4 then>class="fifa"<elseif $GLOBALS['fid'] == 2 then>class="leagueoflegends"</if>>

Czyli jak forum ma id 4 (sprawdzasz w ACP albo linku jeśli masz domyślne), body będzie miało klasę fifa (dodajesz ją do global.css i zmieniasz w niej background-image). To samo z forum o id 2. Możesz dodawać kolejne fora kopiując:
<elseif $GLOBALS['fid'] == 2 then>class="leagueoflegends"
i zmieniając id na inną liczbę oraz klasę na inną z global.css.

Dokładniej nie wytłumaczę, mogę jedynie zrobić całość dowolnym sposobem odpłatnie.
Moje pluginy MyBB / Mój Github
15.09.2013, 16:17 (Ten post był ostatnio modyfikowany: 15.09.2013, 18:44 przez sogoodpl.)
#5
Wyskoczył mi błąd:

http://leagueoftournaments.pl/test/forum....php?fid=3
Błąd poprawiłem, widocznie źle dodaje do global.css.

body {
background: #191919 url(images/carbon/background.jpg) repeat-x 50% 0;
color: #bcbcbc;
font: normal 11px tahoma,helvetica,arial,sans-serif;
position: relative;
padding-bottom: 20px;
margin: 0;
padding: 0;
}
#wrapper {
width: 90%;
margin: 20px auto;
min-width: 980px;
max-width: 1300px;
}
a:link {
color: #ffb74c;
text-decoration: none;
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
transition: color 0.4s;
}

a:visited {
    color: #ffb74c;
    text-decoration: none;
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
transition: color 0.4s;
}

a:hover, a:active {
    color: #ffd556;
    text-decoration: none;
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
transition: color 0.4s;
}

#container {
    width: 95%;
    background: #fff;
    border: 1px solid #e4e4e4;
    color: #000000;
    margin: auto auto;
    padding: 20px;
    text-align: left; /* IE 5 fix */
}

#content {
background: #191919;
border: 1px solid #2b2b2b;
border-top: 1px solid #313131;
-webkit-box-shadow: rgba(0,0,0,0.6) 0px 0px 12px;
-moz-box-shadow: rgba(0,0,0,0.6) 0px 0px 12px;
box-shadow: rgba(0,0,0,0.6) 0px 0px 12px;

}
input {
padding: 6px;
border: 1px solid #383838;
background: #292929;
color: #b7b7b7;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
-webkit-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 4px;
-moz-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 4px;
box-shadow: inset rgba(0,0,0,0.2) 0px 1px 4px;
}
input:focus {
outline: 0;
border: 1px solid rgb(78, 78, 78);
background: rgb(53, 53, 53);
}

.content {
padding: 10px;
line-height: 120%;
}
#panel {
    background: #efefef;
    color: #000000;
    font-size: 11px;
    border: 1px solid #D4D4D4;
    padding: 8px;
}

#panel .remember_me input {
    vertical-align: middle;
    margin-top: -1px;
}

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

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

.thead {
background: #b15f11 url(images/carbon/maintitle.png) repeat-x 50% 0;
color: #fff;
text-shadow: rgba(0,0,0,0.4) 0px -1px 0px;
padding: 12px 14px 13px 14px;
font-size: 12px;
font-weight: bold;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset rgba(255,255,255,0.15) 0px 0px 0px 1px;
-moz-box-shadow: inset rgba(255,255,255,0.15) 0px 0px 0px 1px;
box-shadow: inset rgba(255,255,255,0.15) 0px 0px 0px 1px;
overflow: hidden;
margin-bottom: 4px;
}
.thead a {
color: #fff;
float: left;
margin-top: 3px;
}
.expcolimage {
float: right;
vertical-align: middle;
margin-top: -1px;
margin-bottom: -2px;
opacity: 0;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.thead:hover > .expcolimage{
opacity: 1;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.tcat {
color: #fff;
order-bottom: 1px solid #393939;
text-shadow: rgba(0,0,0,0.8) 0px -1px 0px;
background: #282828 url(images/carbon/highlight_reallyfaint.png) repeat-x 0 -1px;
padding: 8px;
}

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

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

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

.trow1 {
background: #1a1a1a url(/images/carbon/trow.jpg) repeat-x top;
border-top: 1px solid #252525;
border-bottom: 1px solid #111111;
vertical-align: middle;
padding: 10px 0px 10px 0px;
color: #898989;
line-height: 17px;
padding-left: 10px;
font-weight: normal;
}

.trow2 {
background: #1a1a1a url(/images/carbon/trow.jpg) repeat-x top;
border-top: 1px solid #252525;
border-bottom: 1px solid #111111;
vertical-align: middle;
padding: 10px 0px 10px 0px;
color: #898989;
line-height: 17px;
padding-left: 10px;
font-weight: normal;
}

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

.tfoot {
    background: #026CB1 url(images/thead_bg.gif) top left repeat-x;
    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 {
    background: #efefef;
    color: #000000;
    border: 1px solid #4874a3;
    padding: 10px;
}
.footer {
padding: 8px;
position: relative;
border-top: 1px solid #2a2a2a;
text-shadow: rgba(0,0,0,0.8) 0px -1px 0px;
background: #1a1a1a url(images/carbon/highlight_reallyfaint.png) repeat-x 0 -1px;
height: 25px;
}
.navigation {
background: #1d1d1d url(images/carbon/secondary_nav_bg.png) repeat-x 0 0;
border-bottom: 1px solid #252525;
text-shadow: rgba(0,0,0,0.8) 0px -1px 0px;
overflow: hidden;
line-height: 37px;
}

.navigation a {
padding: 11px 24px 11px 10px;
background: url(images/carbon/secondary_nav.png) no-repeat 100% 0;
outline: none;
text-decoration: none;
color: #bcbcbc;
}
.navigation a:hover {
background: url(images/carbon/secondary_nav.png) no-repeat 100%;
}
.navigation a:hover > navigation span {
background: url(images/carbon/secondary_nav.png) no-repeat 100% 0%;
}
.navigation a:hover {
color: #bcbcbc;
}
.navigation a:visited {
    text-decoration: none;
}
.navigation .active {
padding: 11px 24px 11px 10px;
background: url(images/carbon/secondary_nav.png) no-repeat 100% 0;
}
.navigation span{
background: url(images/carbon/secondary_nav.png) no-repeat 0% 0%;
}

.smalltext {
    font-size: 11px;
}

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

input.textbox {
padding: 6px;
border: 1px solid #383838;
background: #292929;
color: #b7b7b7;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
-webkit-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 4px;
-moz-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 4px;
box-shadow: inset rgba(0,0,0,0.2) 0px 1px 4px;
}
input.textbox:focus {
outline: 0;
border: 1px solid rgb(78, 78, 78);
background: rgb(53, 53, 53);
}
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 {
        margin-top: 8px;
    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 {
background: #883939 !important;
border: 1px solid #a95858;
color: #fff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 6px;
outline: 0;
width: 225px;
}
.invalid_field:focus {
background: #883939 !important;
border: 1px solid #a95858;
color: #fff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 6px;
outline: 0;
width: 225px;
}

.valid_field {
background: #768d3d;
border: 1px solid #8ca54d;
color: #fff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 6px;
outline: 0;
width: 225px;
}
.valid_field:focus {
background: #768d3d;
border: 1px solid #8ca54d;
color: #fff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 6px;
outline: 0;
width: 225px;
}

.validation_error {
background-color: #ad2930;
color: #fff;
font-size: 0.8em;
font-weight: bold;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding: 3px 8px;
position: absolute;
margin-left: 245px;
margin-top: -27px;
}

.validation_success {
background-color: #6f8f52;
color: #fff;
font-size: 0.8em;
font-weight: bold;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding: 3px 8px;
position: absolute;
margin-left: 245px;
margin-top: -27px;
}

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

.hiddenrow {
    display: none;
}

.selectall {
    background-color: #FFFBD9;
    font-weight: bold;
    text-align: center;
}

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

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 #3b3b3b;
font-size: 12px;
background: #262626;
color: #9f9f9f;
margin-bottom: 5px;
padding: 10px;
width: 98%;
margin-left: 0px;
}
blockquote cite {
font-size: 12px;
padding: 14px 10px;
border-bottom: 1px solid #3b3b3b;
background: #282828 url(images/carbon/highlight_reallyfaint.png) repeat-x 0 -1px;
color: #ddd;
text-shadow: rgba(0,0,0,0.8) 0px -1px 0px;
font-weight: bold;
margin: -10px -10px 10px -10px;

    display: block;
}

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

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

.codeblock {
margin: 1em auto;
background-color: #262626 !important;
color: #eee;
padding: 5px;
border: 1px solid #3b3b3b;
overflow: auto;
font-size: 11px;
line-height: 140%;
font-family: monospace !important;
}

.codeblock code {
    height: auto;
    display: block;
    font-family: Monaco, Consolas, Courier, monospace;
    font-size: 13px;
padding: 7px;
}

.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-top: 3px;
    padding-bottom: 3px;
}

.pm_alert {
    background: #FFF6BF;
    border: 1px solid #FFD324;
    text-align: center;
    padding: 5px 20px;
    margin-bottom: 15px;
    font-size: 11px;
}

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

.high_warning {
    color: #CC0000;
}

.moderate_warning {
    color: #F3611B;
}

.low_warning {
    color: #AE5700;
}

div.error {
background: #872d2d url(http://cs-tygrysek.com/public/style_images/carbon_orange/highlight_faint.png) repeat-x 0 -1px;
padding: 10px;
border: 1px solid #c15050;
text-shadow: rgba(0,0,0,0.2) 0px -1px 0px;
line-height: 1.6;
font-size: 12px;
-webkit-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
color: #fff;
list-style: none;
}
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;
}
div.error ul li {
list-style: none;
}
.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 {
padding: 0px 7px;
color: #eee;
}

.pagination .pagination_current, .pagination a {
    padding: 2px 6px;
    margin-bottom: 3px;
}

.pagination a {
background: #2a2a2a url(images/carbon/highlight_reallyfaint.png) repeat-x 0 0;
color: #eee;
text-shadow: rgba(0,0,0,0.8) 0px -1px 0px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
padding: 6px 8px;
text-transform: lowercase;
font-size: 11px;
font-weight: normal;
}

.pagination .pagination_current {
background: #da8225 url(images/carbon/highlight.png) repeat-x 0 0;
color: #fff;
padding: 6px 8px;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: default;
}

.pagination a:hover {
background-color: #323232;
}

.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/carbon/jump_quote.png) no-repeat 0;
    width: 13px;
    height: 13px;
    padding-left: 13px; /* amount of padding needed for image to fully show */
    vertical-align: middle;
    border: none;
}

.repbox {
    font-size:16px;
    font-weight: bold;
    padding:5px 7px 5px 7px;
}

._neutral {
    background-color:#FAFAFA;
    color: #999999;
    border:1px solid #CCCCCC;
}

._minus {
    background-color: #FDD2D1;
    color: #CB0200;
    border:1px solid #980201;
}

._plus {
    background-color:#E8FCDC;
    color: #008800;
    border:1px solid #008800;
}

.pagination_breadcrumb {
    background-color: #f5f5f5;
    border: 1px solid #fff;
    outline: 1px solid #ccc;
    padding: 5px;
    margin-top: 5px;
    font-weight: normal;
    white-space: nowrap;
}

.pagination_breadcrumb_link {
    vertical-align: middle;
    cursor: pointer;
}
    #wczytywanie {
background: none repeat scroll 0 0 #000000;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
color: #FFFFFF;
left: 46%;
opacity: 0.6;
padding: 5px 0 8px;
position: fixed;
text-align: center;
top: 0;
width: 8%;
z-index: 10000;
}
.inf_bg {
display: inline-block;
height: 16px;
line-height: 16px;
padding: 0 5px;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
text-shadow: rgba(0,0,0,0.2) 0px -1px 0px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-image: url(images/carbon/highlight.png);
background-repeat: repeat-x;
background-position: 0 -1px;
}
.inf_grey {
background-color: #515151;
}
.inf_red {
background-color: #cc0000;
}
.inf_green {
background-color: #7ba60d;
}
.select_style select {
padding: 6px;
border: 1px solid #383838;
background: #292929;
color: #b7b7b7;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
-webkit-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 4px;
-moz-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 4px;
box-shadow: inset rgba(0,0,0,0.2) 0px 1px 4px;
}
.select_style select {
outline: 0;
border: 1px solid rgb(78, 78, 78);
background: rgb(53, 53, 53);
}

Czy mógłbyś dodać dla przykładu fifa??
Poradziłem sobie ! :)
Mam pytanie, czy to będzie jakoś automatycznie działało jeżeli chodzi o nowe tematy?? Czy po prostu jak założe temat muszę wpisać "fid" w stylu??



Użytkownicy przeglądający ten wątek:

3 gości