Widget gg - stylowanie

Dyskusje na temat modyfikowania i tworzenia stylów do phpBB 3.1.x oraz spraw związanych z szablonami, motywami i zestawami obrazków.
Awatar użytkownika
Zyleta
Moderator
Posty: 196
Rejestracja: 03 marca 2014, 15:39

Widget gg - stylowanie

Post autor: Zyleta » 25 czerwca 2015, 13:51

Witam, najpierw napiszę, że nie jestem pewny, czy dobry dział, czy przypadkiem nie powinienem z tym "pójść" do dyskusji ogólnych, ale niejako mój problem dotyczy stylu ów widgeta.

Przechodząc jednak do sedna, nie wiem czy ktoś się spotkał z tym widgetem, czy nie, ale mam taki problem, że jest on w dosyć "skomplikowany" sposób zbudowany. Przede wszystkim, opiera się na zewnętrznym kodzie (odnośnik do strony zawierającej kod), a dodatkowo ta zewnętrzna strona odnosi się do zewnętrznego (zewnętrzny w zewnętrznym :D jakkolwiek głupio to nie zabrzmi) arkusza styli.

I chodzi o to, że chciałbym nieco zmienić ten styl, na ciemniejszy (biały widget, na ciemnym tle - planuję dopiero sobie tamto powprowadzać - to nie będzie przyjemne dla oka :P). Mimo, że wiem jakie mniej więcej linijki musiałbym zmienić (znam jaka klasa itp.), to nawet wprowadzenie tego w pliku colours.css i dodanie tam !important nie powoduje żadnej zmiany.

I pytanko takie, czy jest możliwość przeniesienia tych zewnętrznych kodów bezpośrednio na moją stronę, w celu dokonania zmian (albo czy jest jakiś inny sposób na to, by takie zmiany wprowadzić)?

Jakby była potrzeba, to mogę przekopiować te zewnętrzne kody (czy to pliku stylu, czy samego widgetu), ten obecny, wygenerowany kod wygląda tak:

Kod: Zaznacz cały

<!-- start gg-widget-html - Copyright GG Network S.A. -->
<a href="http://widget.gg.pl/widget/32d9377e86f68836eb9d40347e2a6b06a0b221f9b086bb6e5eb0088f6dad87b3#uin=1478860|msg_online=Witam, w czym mogę pomóc|msg_offline=Zostaw wiadomość i informacje kontaktowe, a odpowiemy na Twoje pytanie.|hash=32d9377e86f68836eb9d40347e2a6b06a0b221f9b086bb6e5eb0088f6dad87b3" style="background: linear-gradient(#212121 0%, #010101 100%); color: #fff; font-family: Arial, sans-serif; font-size: 14px; font-weight:normal; text-decoration: none; text-align: left; box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.6); -webkit-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.6); -moz-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.6); border-radius: 2px; -webkit-border-radius: 2px; display:block; padding: 2px; width:300px;" rel="nofollow" data-gg-widget="snapped-bottom" target="_blank">
<span style="display: block; padding:10px 8px; line-height:18px">
<img style="float:left;padding-right:8px" src="https://status.gadu-gadu.pl/users/status.asp?id=1478860&styl=1&source=widget"/>Zadaj pytanie on-line</span>
<span style="background: #222; color: #ccc; display: block; line-height: 40px; padding-left: 12px; box-shadow: 0px 1px 1px 0px #bbb inset; -webkit-box-shadow: 0px 1px 1px 0px #bbb inset; -moz-box-shadow: 0px 1px 1px 0px #bbb inset;">Napisz do nas...
<span style="background: #66c321; background: -webkit-linear-gradient(#66c321 0%, #4ba508 100%); background: -o-linear-gradient(#66c321 0%, #4ba508 100%); background: -moz-linear-gradient(#66c321 0%, #4ba508 100%); background: linear-gradient(#66c321 0%, #4ca70a 100%); border-radius: 3px; border-top: 1px solid #86e923; border-bottom: 1px solid #397b08; -webkit-border-radius: 3px; color: #fff; display:block; float:right; font-size: 12px; line-height: 22px; margin:9px; padding: 0 10px; text-align: center;">Wy&sacute;lij</span>
</span>
</a><!-- Chcesz mieć GG widget na swojej stronie? Sprawdź http://www.gg.pl/info/komunikator-na-twoja-strone/ -->
<!-- end gg-widget-html -->

<!-- start gg-widget-javascript - kod javascript możesz umieścić przed końcowym znacznikiem body - Copyright GG Network S.A. -->
<script type="text/javascript">
(function() {
    var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.id = 'gg-widget-script';
    s.src = 'http://widget.gg.pl/resources/js/widget.js';
    var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss); })();
</script>
<!-- end gg-widget-javascript -->
Tutaj jest stylowanie tylko i wyłącznie nierozwiniętej formy widgetu, po rozwinięciu dopiero jest ten właściwy, z którego wysyła się wiadomości i który korzysta z zewnętrznego arkusza styli. Kiedyś już próbowałem w różny sposób to zmienić, pisałem nawet do pomocy od widgeta, ale jedyna odpowiedź, jaką otrzymałem, to było to, że można sobie podczas generowania zmienić styl.. problem w tym jest taki, że podczas generowania można sobie zmienić tylko tę miniaturkę od widgetu, a nie samo okno rozmowy.

Uhh, może ktoś to przeczyta i będzie w stanie pomóc, doradzić :P

Awatar użytkownika
Bielu
Zasłużony
Posty: 512
Rejestracja: 17 marca 2011, 07:49
Kontakt:

Re: Widget gg - stylowanie

Post autor: Bielu » 25 czerwca 2015, 22:49

pomógłbym jakbym zrozumiał :D daj demo czy coś(ss też się nada) :)
Uwaga! pomoc poza forum jest odpłatna!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Pomogłem? Podziękuj, dając like: https://www.facebook.com/webdeveloperbielu
=====================
Kodowanie styli, modowanie phpbb3 oraz innych skryptów: Webdeveloper Bielu

Awatar użytkownika
Zyleta
Moderator
Posty: 196
Rejestracja: 03 marca 2014, 15:39

Re: Widget gg - stylowanie

Post autor: Zyleta » 26 czerwca 2015, 07:59

Demo, to w sumie strona z mojego profilu: http://zyleta.cba.pl/
A chodzi dokładniej o to że:
1) tak wygląda "małe okno", przed rozwinięciem, którego stylowanie zawarte jest w kodzie, który podałem w pierwszym poście (to takie małe po prawej na dole)
http://i.imgur.com/noiSmpC.png

2) tak wygląda "duże okno", po rozwinięciu (kliknięciu w to małe), gdzie można zadawać pytania, z którym już występuje ten problem ze stylowaniem
http://i.imgur.com/tYa6y0I.png

3) To z pkt 2), to jest iframe (ale ukryty, bo nie ma go bezpośrednio w kodzie :c) z tej strony zewnętrznej:
http://i.imgur.com/leO7ap0.png

4) I jeszcze screen z kodu strony z pkt 3), gdzie jest informacja z jakiej strony pobiera styl css do tego:
http://i.imgur.com/r2nVXuS.png


I tu mam właśnie problem, bo ten widget, to tak jakby osobna strona, do której dostępu nie mam i ta strona korzysta ze swojego arkusza styli.
W konsoli mogę zmieniać wartości, które mnie interesują, ale jak to zrobię u siebie w plikach, to te zmiany są ignorowane (zastępowane?), nawet mimo tego, że wpiszę wartość !important (co wydawało mi się, że zawsze będzie działać, nawet gdyby później wartości miałyby być nadpisane).

jaroslw
Zasłużony
Posty: 4524
Rejestracja: 10 grudnia 2005, 18:48
Kontakt:

Re: Widget gg - stylowanie

Post autor: jaroslw » 26 czerwca 2015, 11:02

Ze względów bezpieczeństwa kodu osadzonego w ramce (jeśli nie pochodzi z Twojej domeny) nie da się ostylować, !important też nie pomoże.
Pobierz styl: we_universalwe_clearblue
Nowości i aktualizacje: FacebookGoogle+Twitter

ODPOWIEDZ

Wróć do „Pomoc”