Hilfe bei Stylish für den FF

The_crow

Grand Admiral Special
Mitglied seit
04.06.2005
Beiträge
2.674
Renomée
80
Hi!

Ich suche Leute die mir erklären können wie ich genau in Stylish für den FF ein Style machen kann damit ich z.B. hier im Forum die Breite anpassen kann.
Ich habe keine Ahnung von der Materie.

Danke an alle die weiter helfen mit Links und direkten Vorschlägen.
 
Ich weiß zwar nicht, was ihr habt mit der Breite, aber das ist noch einfach:
Code:
@-moz-document url-prefix("http://planet3dnow.de/vbulletin/"),
       url-prefix("http://www.planet3dnow.de/vbulletin/"),
       url-prefix("https://planet3dnow.de/vbulletin/"),
       url-prefix("https://www.planet3dnow.de/vbulletin/")
{
    .main_wrapper
    {
        max-width: 100% !important;
    }
      
}
Standardmäßig steht der Wert auf 1310px, was auch auf breiten Monitoren reicht. Ich könnte mit den 100% nicht arbeiten - wobei, stören würde es mich nur bei maximiertem Browserfenster, was auf 24" aber eh Schwachsinn ist.

Interessanter wird die Hintergrundfarbe ;).

MfG Dalai
 
Zuletzt bearbeitet:
@Dalai
Danke. Geht so wie du es gepostet hast.

100% füllt das Teil zwar immer noch nicht aus aber so ist es schon um Welten besser und ich kann damit leben und bin nun wieder zufrieden.
Bei mir sieht es so ohne Stylish aus wie http://www.planet3dnow.de/vbulletin...zum-Relaunch&p=4808323&viewfull=1#post4808323 nur ohne die grünen Balken halt. Mit ist es schon groß und das finde ich super.
Zum Maximalen Browserfenster: Ja es ist bei mir immer maximal außer ich brauche daneben noch was. Also nochmals danke.
 
Wirklich toll ...danke dafür. Nun stellt sich nur noch die Frage wie das mit den Farben funktioniert.
 
@Morkhero
Also lautet deine Frage irgend wie so:
Ich möchte gerne ein paar Elemente mit anderen Farben versehen. Kann mir dazu jemand genau erklären welch Elemente sich überhaupt neu einfärben lassen und dann wie?
Die Frage richtete sich an alle die ihm und vielleicht auch mir helfen können.

Ganz nebei Morkhero, welche Teile sollen denn eine andere Farbe bekommen?
 
ok danke für die fragestellung ;D ...

also mir geht es hauptsächlich um den hauptteil der felder hier. eben wo die beiträge stehen.

als zweites käme dann noch der äußere rand, also der normal so breit war mit seinem hellen grau.

die frage ist wie das harmoniert und ob als drittes vielleicht noch die hintergrundfarbe verändert werden muss wo der nickname etc steht.



sollte die farbe letztlich nur ein zahlenwert sein könnte ja dann selber rumprobiert werden nur der aufbau der code ansich müsste eben bekannt sein dafür. ;)

in einem anderen forum hab ich aber mitbekommen das es anscheinend recht schwer ist das innerhalb zu ändern. der große hintergrund dürfte noch am ehesten gehn, nur da das forum jetzt breiter ist, ist auch mehr weiss vorhanden. in dem anderen forum wurde das aufgelockert da die namen nicht wie hier an der seite stehen sondern jeweils über den beiträgen in einer breiteren spalte. dadurch stört das weiss der beiträge nicht so sehr.
 
Zuletzt bearbeitet:
ok danke für die fragestellung ;D ...

also mir geht es hauptsächlich um den hauptteil der felder hier. eben wo die beiträge stehen.

Das müsste so gehn:
Code:
.postbody
{
	background: #000000 !important;
}
Statt #000000 musst den HTML Code für deine gewünschte Farbe einfügen.

als zweites käme dann noch der äußere rand, also der normal so breit war mit seinem hellen grau.
Der ist soweit ich das sehe zweiteilig, einmal die Hintergrundfarbe des Bodys und die Ränder an den Seiten sind extra, aber die Klasse hab ich im Quellcode noch nicht gefunden. Müsste dann so aussehen:
Code:
body
{
	background: #000000 !important;
}

.???
{
	background: #000000 !important;
}
die frage ist wie das harmoniert und ob als drittes vielleicht noch die hintergrundfarbe verändert werden muss wo der nickname etc steht.
Spiel mal damit rum, dann wirst feststellen, dass da letztendlich doch mehr zu ändern ist, damit das harmonisch aussieht.
 
Ich hab da mal was gebastelt, was überhaupt keinen Anspruch auf Vollständigkeit oder auch Gefallen erhebt ;D
Code:
@-moz-document url-prefix("http://planet3dnow.de/vbulletin/"),
       url-prefix("http://www.planet3dnow.de/vbulletin/"),
       url-prefix("https://planet3dnow.de/vbulletin/"),
       url-prefix("https://www.planet3dnow.de/vbulletin/")
    {
        /*  Schriftfarbe von Beiträgen */
        .postcontent
        {
            color:           rgb(30, 30, 30) !important;
        }

        /* Beiträge */
        .postbody
        {
            background-color: rgb(230, 230, 230) !important;
        }
        
        /* Textfelder zum Antworten/Bearbeiten eines Beitrags */
        .cke_source.cke_enable_context_menu
        {
            background-color: Window !important;
        }

        /* Buttons zum Antworten, Vorschau, Signatur anzeigen usw. */
        .blocksubfoot.actionbuttons, .body_wrapper, .blockrow, .blockfoot.actionbuttons, .showsignature, .section, .section > *
        {
            background-color: rgb(240, 240, 240) !important;
        }

        /* Navigationsleiste Vorheriges/Nächstes Thema */
        .navlinks, .textcontrols.floatcontainer, .textcontrols.floatcontainer > *
        {
            background-color: rgb(220, 220, 220) !important;
        }

        /* Leiste über dem ersten Beitrag eines Themas */
        #thread_controls, #above_threadlist_controls
        {
            background-color: rgb(210, 210, 210) !important;
        }
        
        /* Trennlinie zwischen Beiträgen und über der Signatur */
        .signature, .blockrow
        {
            border-top-color: rgb(180, 180, 180) !important;
        }
}

@Reisi: Was willst du mit schwarz, oder ist das nur zum Testen?

MfG Dalai
 
Zuletzt bearbeitet:
@ dalai *massa**massa**massa* ;D

ich finds wirklich gut...

gibts für den hintergrund (also den gaaanz aussen) noch so ein paar zeilen und vielleicht für den teil wo der nickname steht ?


edit: @reisi

ich hab damit rumgespielt .... #009060 ist das grün der balken ;D
 
Zuletzt bearbeitet:
gibts für den hintergrund (also den gaaanz aussen) noch so ein paar zeilen und vielleicht für den teil wo der nickname steht ?
Bestimmt. Mir haben geholfen: Element Hiding Helper um rauszufinden, wie die CSS-Klassen/IDs heißen und Inspector Widget sowie DOM Inspector (letztere gehören AFAIK mehr oder minder zusammen), um rauszufinden, wie die CSS-Regeln der Webseitenelemente aussehen, um diese anschließend anzupassen.

Mir ging es in erster Linie darum, das Weiß zu entfernen und die Seite etwas milder auf die Augen zu machen und auch die Textfelder wieder mit meiner normalen Fensterhintergrundfarbe auszustatten. Den linken Bereich in einem Thema mit den Nicks & Avataren drin hab ich so belassen, weil der ganz in Ordnung ist.

EDIT:
Code:
    /* Nick & Avatar */
    .postdetails, .userinfo
    {
        background-color: rgb(232, 237, 232) !important;
    }
macht die linke Seite mit dem Avatar und dem Nick etwas dunkler (Vorgabe ist rgb(242, 247, 242)). Alternativ kann man auch rgb(237, 242, 237) benutzen, damit der Kontrast zum Rest nicht ganz so stark fällt).

MfG Dalai
 
Zuletzt bearbeitet:
Mal dumm gefragt, wie dann ich so ein "Stylish" in meinen Firefox einfügen ?
 
Mal dumm gefragt, wie dann ich so ein "Stylish" in meinen Firefox einfügen ?
Stylish-Addon installieren, dann Extras > Addons > Benutzerstile > Neuen Stil erstellen > oben Name vergeben und den Krempel aus den Code-Feldern unten einfügen. Stil abspeichern und evtl. ist der Vorschau-Button hilfreich.

MfG Dalai
 
gibts für den hintergrund (also den gaaanz aussen) noch so ein paar zeilen und vielleicht für den teil wo der nickname steht ?
Bitteschön:
Code:
/*Hintergrund*/
html, body
{
	background: #008C58 !important;
}

/*Userinfo*/
.userinfo, .postdetails
{
	background: #FF8C58 !important;
}
 
Könnt ihr auch mal ein paar Screenshots dazu posten. Dann müssen die anderen nicht jeden Style einzeln testen.

Danke
 
Werd ich morgen mal tun, heute bin ich dafür erstens zu müde und zweitens noch zuviel zu tun.

MfG Dalai
 
Mit dem Stylish von Dalai aus #8 sieht es besser aus.
 
It's Screenshot Time ;D. Das sind die Stile aus #8 und #10 zusammengefasst.

Normaler Beitrag:
P3D_VB4_Beitrag.png

Neuer Beitrag (nicht von der Farbe des Textfelds irritieren lassen, das ist meine normale Fensterhintergrundfarbe):
P3D_VB4_NeuerBeitrag.png

Benutzerkontrollzentrum:
P3D_VB4_UserCP.png

MfG Dalai
 
@Dalai
Nah super. Immer werde ich in den Screenshots genommen. Manoh!;)
Ansonsten sehen die Farben gut aus.
 
Retro-Style:

Code:
html, body
{
	background: #008C58 !important;
}

.posthead, .searchlisthead, .blockhead
{
	background-image: linear-gradient(#93472D, #8A2908 50%) !important;	
	border: none !important;
}

.body_wrapper
{
	background: #D0D0D0 !important;
}

.above_body
{
	box-shadow: none !important;
}
 
Zuletzt bearbeitet:
so hab ich es jetzt :) das grün am rand kann man ja noch verändern. (dunkler bzw noch etwas mehr an die balken angepasster, aber ich dachte mir es sollte sich noch oben abgrenzen)
ich hab die werte nur durch ausprobieren.

@reisi da ich jetzt überall die rgb werte genommen hatte, ging das mit dem einen wert nicht, passt optisch nicht so dazu, aber danke dafür ;)

wer den befehl noch für die zitatfarbe weis könnte es mir sagen :) ist zwar eine schöne farbe passt aber nun nicht mehr so richtig da es ein wenig zu sehr leuchtet. hmmm.....obwohl wenn ich es so betrachte ist es gar nicht so schlecht wenn zitate etwas mehr auffallen ;)

hier der code (ist ja letztlich nichts weiter groß geändert)

Code:
@-moz-document url-prefix("http://planet3dnow.de/vbulletin/"),
       url-prefix("http://www.planet3dnow.de/vbulletin/"),
       url-prefix("https://planet3dnow.de/vbulletin/"),
       url-prefix("https://www.planet3dnow.de/vbulletin/")
    {
        /*  Schriftfarbe von Beiträgen */
        .postcontent
        {
            color:           rgb(30, 30, 30) !important;
        }

        /* Beiträge */
        .postbody
        {
            background-color: rgb(229, 230, 230) !important;
        }
        
        /* Textfelder zum Antworten */
        .cke_source.cke_enable_context_menu
        {
            background-color: rgb(229, 230, 227) !important;
        }

        /* Buttons zum Antworten, Vorschau, Signatur anzeigen usw. */
        .blocksubfoot.actionbuttons, .body_wrapper, .blockrow, .blockfoot.actionbuttons, .showsignature, .section, .section > 

*
        {
            background-color: rgb(239, 238, 240) !important;
        }

        /* Navigationsleiste Vorheriges/Nächstes Thema */
        .navlinks, .textcontrols.floatcontainer, .textcontrols.floatcontainer > *
        {
            background-color: rgb(219, 218, 220) !important;
        }

        /* Leiste über dem ersten Beitrag eines Themas */
        #thread_controls, #above_threadlist_controls
        {
            background-color: rgb(209, 208, 210) !important;
        }
        
        /* Trennlinie zwischen Beiträgen und über der Signatur */
        .signature, .blockrow
        {
            border-top-color: rgb(180, 180, 180) !important;
        }
        .main_wrapper
        {
        max-width: 100% !important;
        }
 
        /* Nick & Avatar */
        .postdetails, .userinfo
        {
        background-color: rgb(237, 242, 237) !important;
        }
        /*Hintergrund*/
        html,body
        {
	    background-color: rgb(49, 150, 99) !important;
        }
}

und hier noch zwei screenshots im spoiler

stylish-screenshot1ntqqb.jpg

stylish-screenshot2g6otx.jpg
 
wer den befehl noch für die zitatfarbe weis könnte es mir sagen :) ist zwar eine schöne farbe passt aber nun nicht mehr so richtig da es ein wenig zu sehr leuchtet. hmmm.....obwohl wenn ich es so betrachte ist es gar nicht so schlecht wenn zitate etwas mehr auffallen ;)
Dafür ist der .quote_container zuständig, das kleine Dreieck ist allerdings als Bild eingefügt, das müsste man aber auch ersetzen können.
 
danke werd ich noch ausprobieren...

ich sehe gerade das ich blöd war indem ich die farbwerte gesucht hab. einfach rechtsklick und element untersuchen und da steht es unter anderem mit dabei ^^
 
Nach einigen Anpassungen, Ergänzungen und Änderungen nochmal zusammenfassend mein momentaner Stil:
PHP:
@-moz-document url-prefix("http://planet3dnow.de/cms/"),
       url-prefix("http://www.planet3dnow.de/cms/"),
       url-prefix("https://planet3dnow.de/cms/"),
       url-prefix("https://www.planet3dnow.de/cms/")
{
    /* Startseite und einzelner Artikel */
    #main, #page
    {
        background-color: rgb(245, 245, 245) !important;
    }
}

@-moz-document url-prefix("http://planet3dnow.de/vbulletin/"),
       url-prefix("http://www.planet3dnow.de/vbulletin/"),
       url-prefix("https://planet3dnow.de/vbulletin/"),
       url-prefix("https://www.planet3dnow.de/vbulletin/")
{
    /*  Schriftfarbe von Beiträgen */
    .postcontent
    {
        color:           rgb(30, 30, 30) !important;
    }

    /* Beiträge */
    .postbody
    {
        background-color: rgb(230, 230, 230) !important;
    }
    
    /* Textfelder zum Antworten/Bearbeiten eines Beitrags */
    .cke_source.cke_enable_context_menu
    {
        background-color: Window !important;
    }

    /* Buttons zum Antworten, Vorschau, Signatur anzeigen usw. */
    #reputationgivenlist, #reputationlist, .blockfoot.controlbar.textpad, .blocksubfoot.actionbuttons, .body_wrapper, .blockrow, .blockfoot.actionbuttons, .showsignature, .section, .section > *
    {
        background-color: rgb(240, 240, 240) !important;
    }

    /* Navigationsleiste Vorheriges/Nächstes Thema */
    .blocksubhead, .navlinks, .textcontrols.floatcontainer, .textcontrols.floatcontainer > *
    {
        background-color: rgb(220, 220, 220) !important;
    }

    /* Leiste über dem ersten Beitrag eines Themas, Springe zu Seite */
    .thread_controls.toolsmenu, #above_threadlist_controls, .popupbody, .popupbody > *
    {
        background-color: rgb(210, 210, 210) !important;
    }
    
    /* Trennlinie zwischen Beiträgen und über der Signatur */
    .signature, .blockrow
    {
        border-top-color: rgb(180, 180, 180) !important;
    }
    
    /* Nick & Avatar */
    .postdetails, .userinfo
    {
        background-color: rgb(237, 242, 237) !important;
    }
}
Da das nur etwas Feintuning ist, spare ich mir mal die Screenshots (wären eh nahezu die gleichen wie oben). Es sind vor allem ein paar Elemente dazugekommen, die bisher ausgeklammert waren (Seitenwähler, Bewertungsblock im Kontrollzentrum und die News/Artikel sowie die Startseite).

MfG Dalai
 
Zuletzt bearbeitet:
Ach ja, grad erst mitbekommen das hier n Thread für p3dn styles lebt.

Features meines 'under construction' Styles:
- optimiert für große Widescreens (Spaltenlayout ab bestimmter Fensterbreite)
- Werbung und für mich überflüssige Elemente entfernt (da ich zusätzlich Werbeblocker noch nutz eventuell ergänzen)
- etwas grüner ;)
- Sonderbehandlung übergroßer Bilder mit Hoverzoom (z.B. in Reviewartikeln)
- etwas breitere Navileiste für weniger Zeilenumbrüche darin



PHP:
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.planet3dnow.de") 
{
    html, body
    {
	   background: #008C58 !important;
    }

    #content 
    {
        width: auto !important;
        max-width: 2500px !important;
        min-width: 100px !important;
        /* max-height: 1250px !important; */ 
        overflow: auto !important;
        -moz-column-width:800px !important;
        -moz-column-fill:balance !important;
        -moz-column-gap:50px !important;
        -moz-column-rule: 1px solid black !important;
        -moz-hyphens: none !important;
    }

    /* falls Forenthreads zweispaltig gewünscht
    #postlist 
    {
        -moz-column-width:800px !important;
        -moz-column-gap:50px !important;
        -moz-column-rule: 1px solid black !important;
        -moz-hyphens: none !important;
    }
    */
   
    /* Hidden elements*/
    #text-2, 
    #tag_cloud-2, 
    #google-translate-2, 
    #linkcat-25
    {
        display:none !important;
    }

    .ad-container,
    .ad-border
    {
        display:none !important;
    }

    .main_wrapper 
    {
        width: auto !important;
        max-width: 2500px !important;
        overflow: visible !important;
    }

    .combined-sidebar 
    {
        width: auto !important;
        max-width: 420px !important;
        overflow: visible !important;}

    .widget-area-container 
    {
        width: auto !important;
        max-width: 420px !important;
        overflow: visible !important;
    }

    .entry-content 
    {
        -moz-hyphens: none !important;
    }

    .site-content 
    {
        width: calc(100% - 430px) !important;
    }

    /* oversized image handling */
    div[id^="content"] img:not(.inlineimg) 
    {
        max-height: 800px;
        width: auto !important; 
        cursor: pointer;
        overflow: visible !important;
        display:block
    }

    div[id^="content"] img:not(.inlineimg):hover 
    {
        max-height: 100000px;
        display:block
    }

    .footer-partner-sites 
    {
        -moz-hyphens: none !important;
        -moz-column-width:8.6rem !important;
        -moz-column-gap:50px !important;
    }

/* Experimente mit den Navilinks gehen noch schief, da keine eindeutigen Elemente

    .nav-previous 
    {
        position:absolute !important; 
        top:0px !important; 
        right:0px !important;
    }

    .nav-next 
    {
        position:relative !important; 
        top:0px !important; 
        right:100px !important;
    }
*/
}

FYI: Schreibfaule nutzen domainangabe statt expliziter Seitenangabe ;)
 
Zurück
Oben Unten