Grafik anketinizi özelleştirin

OBS bağlantısını veya HTML dosyasını düzenleyebilir miyim?

Kaplama dosyası poll.html. Anketin düzenini, stillerini ve oylama kodunu içerir. OBS'ye kopyaladığınız URL bu dosyayı işaret eder ve oturum kimliğiniz gibi bağlantı ayarlarını, ?.

https://socialstream.ninja/poll.html?session=YOUR_SESSION

Renkler, yazı tipleri, aralıklar ve çubuk stili için barındırılan URL'yi saklayabilir ve Özel CSS OBS'de. Yeni bir sanat eseri, logo veya farklı bir düzen içeren bir tasarım için poll.html ve OBS'yi kopyanıza doğrultun. SSN'nin tema açılır menüsünde özel bir kopya otomatik olarak görünmez.

Doğrudan disk yükleme, OBS Yerel dosya başlatıcılar, güvenli işleme örnekleri ve destekleyici referanslar için bkz. paylaşılan kaplama tasarım kılavuzu.

Öncelikle şunu kullanarak çalışan düzenli bir anket edinin: anket kurulum kılavuzu. Aşağıdaki bağlantı adımı için oluşturulan Grafik Anket bağlantısının tamamını saklayın.

1. Barındırılan anketi OBS'de stillendirin

1. SSN'de şunu açın: Grafik Anket → Anket Seçenekleri. Şunu seçin: Varsayılan şu bölümde: Anket Stili/Teması 'ü seçin ve açın Anketi etkinleştir.
2. Grafiksel Anket bağlantısını kopyalayın. OBS'de, onu ekleyin veya açın. Tarayıcı Kaynağı, şunu bırakın: Yerel dosya işaretini kaldırın ve bağlantıyı şuraya yapıştırın: URL.
3. Tarayıcı Kaynağı boyutunu tuval boyutunuza ayarlayın; örneğin 1920 × 1080. Aşağıdaki CSS'yi şuraya yapıştırın: Özel CSS, ardından şuna tıklayın: Tamam. Yeniden kullanmak istiyorsanız, mevcut CSS'leri kaydedin.

body {
    margin: 0;
    background: transparent;
    overflow: hidden;
}

#poll-container {
    box-sizing: border-box;
    width: 880px;
    max-width: 90%;
    padding: 28px;
    border-radius: 0;
    border-left: 8px solid #f5c542;
    background: rgba(8, 24, 48, 0.95);
    color: #ffffff;
    font-family: Arial, sans-serif;
}

#poll-container .poll-title {
    color: #ffffff;
    font-size: 36px;
    text-align: left;
    margin: 0 0 24px;
}

#poll-container .poll-option {
    background: #162e50;
    border-radius: 0;
    padding: 14px 16px;
    font-size: 26px;
}

#poll-container .poll-bar {
    background: #3266ad;
}

#poll-container .poll-instruction {
    font-size: 22px;
    margin-bottom: 18px;
}

Renk değerlerini ve boyutlarını tasarımınıza uyacak şekilde değiştirin. Bu seçiciler mevcut anket öğelerini hedefler. Çubuk genişliklerini anket koduyla kontrol altında tutun ve .hidden davranışı böylece Anketi Etkinleştir grafiği gösterebilir ve gizleyebilir.

OBS Özel CSS yalnızca o Tarayıcı Kaynağını etkiler; aynı URL'yi normal bir tarayıcıda açmak orijinal stili gösterecektir. Bkz. OBS'nin Tarayıcı Kaynağı referansı kaynak özellikleri için.

Ankete özgü sınırlama: mevcut poll.html okumuyor &css= veya &b64css=. OBS Özel CSS'yi kullanın veya bu kaplamaya ilişkin dosyayı düzenleyin.

2. Anketin düzenlenebilir bir kopyasını oluşturun

1. İndir Social Stream Ninja kaynak ZIP (beta) ve onu çıkarın. İnceleyebilirsiniz GitHub'daki poll.html kaynağı.
2. Çıkarılan klasörde kopyalayın poll.html olarak my-poll.html. Orijinalin yanında, klasörün en üst seviyesinde saklayın.
3. Açın: my-poll.html bir metin/kod düzenleyicide kullanın veya bu dosyayı referans görseli, marka renkleri, yazı tipleri ve istediğiniz OBS tuval boyutuyla birlikte ChatGPT veya Codex'e verin.
4. Yalnızca CSS düzenlemesi için kurallarınızı mevcut olanın sonuna yerleştirin. <style> blok, hemen önce </style>. Yukarıdaki örnek orada da çalışıyor. Dosyayı şununla kaydedin: .html uzantısını.

Destekleyici dosyaları saklayın. Mevcut anket bu komut dosyalarını kendi konumuna göre yüklüyor; yalnızca HTML'yi yeni bir klasöre kopyalamak yeterli değildir:

your-poll-folder/
    my-poll.html
    currency.js
    js/
        transport-dedupe.js
        local-server-url.js
    shared/
        overlay-control-transport.js
    thirdparty/
        NotoColorEmoji.ttf
    favicon.ico

Yazı tipi ve favicon referans alınan varlıklardır; dört JavaScript dosyası oylamayı ve bağlantıları destekler. Çıkarılan klasörü olduğu gibi bırakmak bu yolları kullanılabilir durumda tutar. Tasarımınızın kullandığı logo veya yazı tipi dosyalarını da buraya ekleyin.

3. Yapay zekaya mevcut dosyayı ve belirli bir özeti verin

Ekle my-poll.html ve tasarım referansınızı seçin veya çıkartılan klasörü kodlama aracınızda açın. Bu istemdeki parantez içindeki ayrıntıları değiştirin:

Customize this existing Social Stream Ninja poll overlay.

Design: [describe the look or match the attached reference].
Colors: [brand hex colors]. Font: [font name or supplied font file].
Logo: [supplied image filename, if any].
OBS canvas: [1920 x 1080]. Placement: [center / lower third / side panel].
Allow for long questions and up to 10 free-form answers.

Edit my-poll.html, using CSS first. Keep the existing working poll code:
hashtag matching, vote counting, duplicate-vote handling, percentages,
tallies, donation weighting, settings updates, and start/end/reset controls.
Keep session/password/transport URL handling and all supporting script loads.
Preserve #poll-container, #poll-title, #poll-options, and show/hide behavior.
The script replaces #poll-options contents when results update, so put any
permanent logo or decoration outside that element.
Do not hard-code sample results or private session details.
Keep the page compatible with Chrome 80 and OBS Browser Source.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited poll work directly from disk using a file:/// URL,
without requiring a local web server. Return the complete edited HTML,
list any extra image/font files needed, and include the file URL steps for OBS.

OBS CSS rotası için son talimatı şu şekilde değiştirin: "Mevcut anket seçicileri ve Varsayılan temayı kullanarak yalnızca OBS Özel CSS için CSS'yi döndürün; HTML veya komut dosyası etiketleri eklemeyin."

Manuel düzenlemeler için ana stil kancaları şunlardır: #poll-container, .poll-title, .poll-option, .poll-bar, .option-number, .option-text, .option-percentage, .option-tally, ve .poll-instruction. Bir düzen değişikliğinin her ikisinde de eşleşen düzenlemelere ihtiyacı olabilir. updatePollOptions() ve updatePollResults(), cevap satırlarını oluşturur.

4. Düzenlenmiş anketinizi OBS'de açın

Açın: my-poll.html doğrudan bilgisayarınızdan. Kurulacak veya başlatılacak bir sunucu yok.

1. Sürükleyin: my-poll.html Chrome veya Edge'e. Adresi adres çubuğundan kopyalayın; ile başlar file:///.
2. Her şeyi kopyala ? SSN'den çalışan Grafik Anket bağlantınızda. Dosya adresinin sonuna ekleyin. Bu, oturumunuzu, şifrenizi ve diğer ayarlarınızı korur.
3. Kontrol etmek için bu birleştirilmiş adresi tarayıcınızda açın. Daha sonra bunu OBS Tarayıcı Kaynağına yapıştırın. URL alanı ile Yerel dosya işaretli değil. İstenilen genişliği ve yüksekliği ayarlayın.

Örneğin kopyalanan şu bağlantı:

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

şu hale gelir:

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

Bunlar yer tutuculardır: yalnızca halihazırda sahip olduğu seçenekler dahil olmak üzere, kopyaladığınız gerçek bağlantıyı kullanın. SSN'leri kullanmaya devam edin Anket Seçenekleri soruyu, oy eşleştirmeyi ve anket kontrollerini ayarlamak için.

Yukarıdaki dosya adresi bir Windows örneğidir. macOS'de şununla başlar: file:///Users/.... Yolun ve tüm boşlukların sizin için işlenmesi için tarayıcınızın gerçek adresini kopyalayın.

Bunu bir kez ayarlayın. OBS adresi kaydeder. İndirilen klasörü aynı yerde tutun ve anketi kullanırken SSN ve sohbet kaynağınızın çalışır durumda kalmasını sağlayın. Bir düzenlemeyi kaydettikten sonra şunu kullanın: Geçerli sayfanın önbelleğini yenile .

Yerel dosyayı neden işaretlenmemiş olarak bırakmalısınız? URL alanının kullanılması, aşağıdaki oturum ayarlarını içerir: ?. Yalnızca HTML dosyasını seçmek bunu yapmaz. paylaşılan kılavuz ayrıca dosya seçici için isteğe bağlı bir başlatıcıyı da kapsar.

5. Tasarımı gerçek bir anketle test edin

1. SSN'yi ve yakalanan bir sohbet kaynağını çalışır durumda tutun. içinde Anket Seçenekleri, anketi etkinleştirin, ayarlayın Serbest biçimli, bir soru girin ve seçin Yalnızca tam oy eşleşmesi.
2. Gönder #coffee ve #tea farklı sohbet kullanıcılarından veya farklı kurgusal kullanıcılardan test mesajı araçları. Birden fazla oy devre dışı bırakıldığında, aynı kullanıcının oyu tekrarlanırsa başka bir oy eklenmez.
3. OBS'deki çubukları ve toplamları kontrol edin. Uzun bir soru, uzun bir cevap deneyin ve Yüzde yerine oy sayısını göster metin uyumunu kontrol etme seçeneği.
4. Test Herhangi bir yerde etiket gibi daha uzun bir mesajla I vote #coffee today. Kontrol et Anketi bitir, Anketi sıfırla, ve Anketi etkinleştir böylece özel tasarım kapalı, boş ve gizli durumları yönetir.

• Boş yer paylaşımı: Anketi Etkinleştir ve kopyalanan oturum ayarlarını işaretleyin. Serbest biçimli bir ankette, oylar gelene kadar yanıt satırı yoktur.
• Yerel sayfa açılmıyor: dosyayı tekrar tarayıcınıza sürükleyin ve mevcut adresini kopyalayın. Dosya adının yanlışlıkla olup olmadığını kontrol edin my-poll.html.txt.
• "Anket yükleniyor"da kaldı: destekleyen komut dosyalarını ve bunların klasör yollarını, SSN'nin çalışma durumunu ve barındırılan çalışan anketteki sorgu dizesinin tamamını kontrol edin.
• Oylar sayılmaz: oylamanın açık olduğunu, mesajın seçilen oylama moduyla eşleştiğini ve test kullanıcısının henüz oy vermediğini onaylayın.
• OBS'de farklı görünüyor: Tarayıcı Kaynağı boyutlarını, dosyanın tasarımını geçersiz kılan eski Özel CSS'leri ve yenilemenin gerekli olup olmadığını kontrol edin.
• Logo oylamadan sonra kayboluyor: dışarıya kalıcı sanat eserleri koymak #poll-options; bu öğe güncellemelerle yeniden oluşturuldu.

Düzenlenen kopyanız SSN'nin barındırılan anketinden ayrı olarak korunur. Tasarımın yedeğini alın ve daha yenileriyle karşılaştırın poll.html sürümler, yukarı yönde düzeltmelere ihtiyaç duyduğunuzda. Sıfırdan farklı bir kaplama oluşturmak için bkz. özel katmanlar kılavuzu.