orhan
Moderator
- Joined
- Dec 5, 2018
- Messages
- 466
- Reaction score
- 96
- Points
- 28
Son zamanlarda popüler bir uygulama ben de smf temalarıma kullanabiliyorum isteyen kendi temasına uygulaya bilir ben defult tema için anlatayım
teman izin index-templete.php sini açın şunu bulun
altına ekleyin
temanizin scripts kilasorunden theme.js yi acin bulun
sonrasına ekleyin
şimdi css kilasorunden responsive.css dosyam izi acalim
bul
üstüne ekleyin
Ben Kabaca Anlatım gerisi size kalmış dikkat etmemiz gereken Örnek Temamizin Heder kisminin rengi orijinal bu
Biz bunu böyle değiştiriyoruz
teman izin index-templete.php sini açın şunu bulun
Code:
echo '
</select>
<noscript>
<input type="submit" value="', $txt['quick_mod_go'], '">
</noscript>
</form>';
}
altına ekleyin
Code:
echo '
<ul class="p-nav-opposite floatright">
<li class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="darkSwitch">
<label class="custom-control-label" for="darkSwitch"></label>
</li>
</ul>';
temanizin scripts kilasorunden theme.js yi acin bulun
Code:
/ Add a load event for the function above.
addLoadEvent(smc_toggleImageDimensions);
function smf_addButton(stripId, image, options)
{
$('#' + stripId).append(
'<a href="' + options.sUrl + '" class="button last" ' + ('sCustom' in options ? options.sCustom : '') + ' ' + ('sId' in options ? ' id="' + options.sId + '_text"' : '') + '>'
+ options.sText +
'</a>'
);
}
sonrasına ekleyin
Code:
$(function() {
var darkSwitch = document.getElementById("darkSwitch");
if (darkSwitch) {
initTheme();
darkSwitch.addEventListener("change", function(event) {
resetTheme();
});
function initTheme() {
var darkThemeSelected =
localStorage.getItem("darkSwitch") !== null &&
localStorage.getItem("darkSwitch") === "dark";
darkSwitch.checked = darkThemeSelected;
darkThemeSelected
? document.body.setAttribute("data-theme", "dark")
: document.body.removeAttribute("data-theme");
}
function resetTheme() {
if (darkSwitch.checked) {
document.body.setAttribute("data-theme", "dark");
localStorage.setItem("darkSwitch", "dark");
} else {
document.body.removeAttribute("data-theme");
localStorage.removeItem("darkSwitch");
}
}
}
});
şimdi css kilasorunden responsive.css dosyam izi acalim
bul
Code:
/* iPhone Tests */
@media (max-width: 320px) {
}
üstüne ekleyin
Code:
#main_menu .p-nav-opposite {
cursor: pointer;
position: relative;
right: 0px;
top: 50%;
height: 30px;
line-height: 30px;
margin-top: -20px;
color: #fff;
z-index: 20;
font-size: 12px;
border-radius: 4px;
}
.custom-switch {
padding-left: 2.25rem;
}
.p-nav-opposite {
margin-left: auto;
margin-right: 10px;
text-align: right;
flex-shrink: 0;
margin: 0 0 0 10px;
}
input[type="radio"], input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
.custom-control-input {
position: absolute;
z-index: -1;
opacity: 0;
}
.custom-control-label {
position: relative;
cursor: pointer;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
.custom-switch .custom-control-label::before {
left: -2.25rem;
width: 1.85rem;
pointer-events: all;
border-radius: 0.5rem;
}
.custom-switch .custom-control-label::after {
top: calc(0.36rem + -3px);
left: calc(-2.2rem + 2px);
width: calc(1rem - 4px);
height: calc(1rem - 4px);
background-color: #f6f6f6;
border-radius: 0.5rem;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}
.custom-control-label::after {
position: absolute;
top: 0.1rem;
left: -1.5rem;
display: block;
width: 1rem;
height: 1rem;
content: "";
background: no-repeat 50% / 50% 50%;
}
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: #4d90fe;
background-color: #4d90fe;
}
.custom-control-label::before, .custom-file-label, .custom-select {
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.custom-control-label::before {
position: absolute;
top: -1px;
left: -1.5rem;
display: block;
width: 1.2rem;
height: 1.2rem;
pointer-events: none;
content: "";
background-color: #4DB7FE;
border: #808285 solid 1px;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
background-color: #fff;
-webkit-transform: translateX(0.75rem);
transform: translateX(0.75rem);
}
[data-theme="dark"] {
background: #161622 !important;
color: #eee;
}
[data-theme="dark"] .bg-light {
background: #333 !important;
}
[data-theme="dark"] .bg-white {
background: #000 !important;
}
[data-theme="dark"] .bg-black {
background: #eee !important;
}
[data-theme="dark"] #main {
background: #161622;
}
Ben Kabaca Anlatım gerisi size kalmış dikkat etmemiz gereken Örnek Temamizin Heder kisminin rengi orijinal bu
Code:
#top_section {
background: #fff;
background-image: linear-gradient(to bottom, #e2e9f3 0%, #fff 70%);
}
Biz bunu böyle değiştiriyoruz
Code:
[data-theme="dark"] #top_section {
background: #161622;
background-image: linear-gradient(to bottom, #161622 0%, #161622 70%);
}