You need to enable JavaScript to run this app.

Skip to main content

MyBB Modern v4 Teması için Custom CSS Eklenti Düzenlemesi

MyBB Modern v4 Teması için Custom CSS Eklenti Düzenlemesi

Developer
MyBB Modern v4 Teması için Custom CSS Eklenti Düzenlemesi
MyBB forum yazılımında eklentiler genelde varsayılan (default) temaya yönelik yapıldığından Modern v4 gibi özel temalarda yapılan değişikliklerden dolayı kod eklemesi yapılamaz; böylece eklenti kurulmuş olsa da tema üzerine eklenmediğinden çalışmaz veya sorunlu çalışır. Bu konuda; Modern v4 teması için Custom CSS (özel css) eklentisinin tam uyumlu çalışmasını sağlayacağız.

1: Kurulum

Dikkat: Bu işlemi yaparken yapacağınız veya alacağınız hata veya hatalara karşı temanızın yedeğini almayı unutmayın.

1.1: customcss_usercp

Yönetici (Admin) KP → Temalar & Şablonlar → Şablonlar → Modern Şablonlar → Custom CSS Şablonlar → customcss_usercp şablonunu açın;

🛠 Değiştir:

Şablon içerisinde bulunan tüm kodları aşağıdaki ile değiştirin.

Code:
<!DOCTYPE HTML>
<html>
<head>
    <title>{$mybb->settings['bbname']} - {$lang->customcss_name}</title>
    {$headerinclude}
</head>
<body>
{$header}
    
<div class="p-2 bg-white rounded-lg border">
{$usercpnav}
    
<div class="flex items-center px-4 py-3 space-x-4 text-white rounded-lg shadow bg-gradient-to-r from-purple-700 to-purple-600">
<div class="flex-1">
        <h1 class="font-medium leading-8">
            <span class="shadow-dark">{$lang->customcss_name}</span>
        </h1>
    </div>
</div>
    
<div class="p-4 space-y-4">{$css}</div>
    
<a class="flex items-center justify-center px-4 py-2 text-base leading-snug text-white transition bg-gray-700 border border-transparent border-solid rounded-md shadow cursor-pointer hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" href="{$mybb->settings['bburl']}/usercp.php?action=customcss&do=create">
    {$lang->customcss_create}
</a>
</div>
    
{$footer}
</body>
</html>
1.2: customcss_usercp_create

Yönetici (Admin) KP → Temalar & Şablonlar → Şablonlar → Modern Şablonlar → Custom CSS Şablonlar → customcss_usercp_create şablonunu açın;

🛠 Değiştir:

Şablon içerisinde bulunan tüm kodları aşağıdaki ile değiştirin.

Code:
<!DOCTYPE HTML>
<html>
<head>
    <title>{$mybb->settings['bbname']} - {$lang->customcss_create_stylesheet}</title>
    {$headerinclude}
</head>
<body>
{$header}
    
<div class="p-2 bg-white rounded-lg border">
{$usercpnav}
    
<div class="flex items-center px-4 py-3 space-x-4 text-white rounded-lg shadow bg-gradient-to-r from-purple-700 to-purple-600">

<form method="POST">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<input type="hidden" name="action" value="do_create" />
    
<div class="flex-1">
        <h1 class="font-medium leading-8">
            <span class="shadow-dark">{$lang->customcss_create_stylesheet}</span>
        </h1>
    </div>
</div>
    
<div class="p-4 space-y-4">
<div class="flex flex-col space-y-2">
    <label class="text-sm font-medium">{$lang->customcss_title}</label>
    <input class="w-full px-4 leading-snug text-gray-700 transition border-gray-300 rounded-md focus:ring-1 focus:ring-purple-400 focus:border-purple-400" type="text" name="title" />
</div>
<div class="flex flex-col space-y-2">
    <label class="text-sm font-medium">{$lang->customcss_css}</label>
    <textarea name="css" id="css" style="display: none"></textarea>
</div>
    
</div>

<input class="flex items-center justify-center px-4 py-2 text-base leading-snug text-white transition bg-gray-700 border border-transparent border-solid rounded-md shadow cursor-pointer hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 w-full" type="submit" value="{$lang->customcss_save}" />
</form>
</div>
    
<link type="text/css" rel="stylesheet" href="{$mybb->asset_url}/jscripts/customcss/customcss.css" />        
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/customcss/customcss.js"></script>
    
{$footer}
</body>
</html>
1.3: customcss_usercp_edit

Yönetici (Admin) KP → Temalar & Şablonlar → Şablonlar → Modern Şablonlar → Custom CSS Şablonlar → customcss_usercp_edit şablonunu açın;

🛠 Değiştir:

Şablon içerisinde bulunan tüm kodları aşağıdaki ile değiştirin.

Code:
<!DOCTYPE HTML>
<html>
<head>
    <title>{$mybb->settings['bbname']} - {$lang->customcss_edit_stylesheet}</title>
    {$headerinclude}
</head>
<body>
{$header}
    
<div class="p-2 bg-white rounded-lg border">
{$usercpnav}
    
<div class="flex items-center px-4 py-3 space-x-4 text-white rounded-lg shadow bg-gradient-to-r from-purple-700 to-purple-600">

<form method="POST">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<input type="hidden" name="action" value="do_edit" />
    
<div class="flex-1">
        <h1 class="font-medium leading-8">
            <span class="shadow-dark">{$lang->customcss_edit_stylesheet}</span>
        </h1>
    </div>
</div>
    
<div class="p-4 space-y-4">
<div class="flex flex-col space-y-2">
    <label class="text-sm font-medium">{$lang->customcss_title}</label>
    <input class="w-full px-4 leading-snug text-gray-700 transition border-gray-300 rounded-md focus:ring-1 focus:ring-purple-400 focus:border-purple-400" type="text" name="title" value="{$data['title']}" />
</div>
<div class="flex flex-col space-y-2">
    <label class="text-sm font-medium">{$lang->customcss_css}</label>
    <textarea name="css" id="css" style="display: none">{$data['css']}</textarea>
</div>
    
</div>
    
<input class="flex items-center justify-center px-4 py-2 text-base leading-snug text-white transition bg-gray-700 border border-transparent border-solid rounded-md shadow cursor-pointer hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 w-full" type="submit" value="{$lang->customcss_save}" />    
</form>
    
<form method="POST">
    <input type="hidden" name="action" value="do_delete" />
    <input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
    <input type="hidden" name="ccid" value="{$data['ccid']}" />
    <input class="flex items-center justify-center px-4 py-2 text-base leading-snug text-white transition bg-gray-700 border border-transparent border-solid rounded-md shadow cursor-pointer hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 mt-2 w-full" type="submit" value="{$lang->customcss_delete}" />
</form>
</div>
    
<link type="text/css" rel="stylesheet" href="{$mybb->asset_url}/jscripts/customcss/customcss.css" />        
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/customcss/customcss.js"></script>
    
{$footer}
</body>
</html>
1.4: customcss_usercp_menu

Yönetici (Admin) KP → Temalar & Şablonlar → Şablonlar → Modern Şablonlar → Custom CSS Şablonlar → customcss_usercp_menu şablonunu açın;

🛠 Değiştir:

Şablon içerisinde bulunan tüm kodları aşağıdaki ile değiştirin.

Code:
<div class="space-y-4">
    <div class="text-sm font-medium text-purple-400 uppercase">
        Özellikler
    </div>
    <div class="flex flex-col space-y-4">
        <a class="text-sm text-gray-200 transition hover:text-white focus:text-white" href="{$mybb->settings['bburl']}/usercp.php?action=customcss">{$lang->customcss_name}</a>
    </div>
</div>
1.5: customcss_usercp_row

Yönetici (Admin) KP → Temalar & Şablonlar → Şablonlar → Modern Şablonlar → Custom CSS Şablonlar → customcss_usercp_row şablonunu açın;

🛠 Değiştir:

Şablon içerisinde bulunan tüm kodları aşağıdaki ile değiştirin.

Code:
<div class="flex justify-between items-center">
    <div>
        <div class="font-medium">{$row['title']}</div>
    </div>
    <div class="flex">
            <a class="flex items-center justify-center px-4 py-1 text-sm leading-snug text-white transition bg-gray-700 border border-transparent border-solid rounded-md shadow cursor-pointer hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 ml-4" href="{$mybb->settings['bburl']}/usercp.php?action=customcss&do=edit&ccid={$row['ccid']}">{$lang->customcss_edit}</a>
            <form method="POST">
                <input type="hidden" name="action" value="do_delete" />
                <input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
                <input type="hidden" name="ccid" value="{$row['ccid']}" />
                <input type="submit" value="{$lang->customcss_delete}" class="flex items-center justify-center px-4 py-1 text-sm leading-snug text-white transition bg-gray-700 border border-transparent border-solid rounded-md shadow cursor-pointer hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 ml-4" />
            </form>
    </div>
</div>
1.6: headerinclude

Yönetici (Admin) KP → Temalar & Şablonlar → Şablonlar → Modern Şablonlar → Headerinclude - [Gruplandırılmamış] Şablonlar → headerinclude şablonunu açın;

🛠 Ekle:

Aşağıdaki kodu sayfanın herhangi bir yerine (en üste ekleyebilirsiniz) ekleyin.

Code:
{$customcss_headerinclude}
📚 2: İlgili Bağlantılar

💭 3: Geri Bildirim

Kurulum sorunlarını, yapılan düzenleme için düşüncelerinizi ve diğer soru ve sorunları konuya yorum yaparak bildirebilirsiniz.
İmkanın sınırını görmek için imkansızı denemek lazım. (Fatih Sultan Mehmet Han)
This post was last modified: 08-17-2022, 07:39 PM by Melikşah.
Developer
RE: MyBB Modern v4 Teması için Custom CSS Eklenti Düzenlemesi
(08-17-2022, 10:17 PM)tedem Wrote: Teşekkürler. Çok iyi anlatım olmuş 🔥

Rica ederim.
İmkanın sınırını görmek için imkansızı denemek lazım. (Fatih Sultan Mehmet Han)