Xtra styling för forumet - snippets

[xeric]

För er som kör med “egen stilmall” i Safari, eller använder tillägg i webläsaren, t ex Stylish, för att “förbättra”/ändra sidor med.... Här är några snippets (kodsnuttar) ni kan ha till forumet.

- - -

• Stylish :: Tillägg för Firefox
• Stylish - Custom themes for any website - Chrome Web Store
• Stylish for Safari

De fungerar lite olika, men alla har en funktion så man kan begränsa det till en speciell sida. Så inte den man lägger in/till påverkar andra sidor man besöker.

Här är några ur min fil...

 

- - -

Färgen på markerad text blir ljusblå('ig). Passar med övriga blåa toner på sidan.

/* Färg på markerad text */
*::-moz-selection { background: rgba(168, 209, 255, 0.4); }
*::selection { background: rgba(168, 209, 255, 0.4); }

Resultat:

 

- - -

Flytta “Upp-pilen” längst ned i mitten till höger och gör den fixerad.

/* Forum: totop */
a[id="backtotop"][title="Gå upp"] {
    position: fixed !important;
    left: auto !important;
    right: 5px !important;
    bottom: 5px !important;
    background: #71A5C9 !important;
    opacity: .85 !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 28px !important;
    z-index: 1000 !important;
}

a[id="backtotop"][title="Gå upp"]:hover {
    background: #AF286D !important;
    opacity: 1 !important;
}

Resultat:

 

- - -

En svag/lätt skugga under menyraden överst...

/* Skugga - nya menyn */
#ipbwrapper > .nw-menu { box-shadow: 0 2px 8px rgba(0,0,0,.65); }

- - -

Klistra undermeny så den blir en “sticky” (man spar en massa skroll på det).

/* Klistra undermenyn */
div#primary_nav {
    -webkit-position: sticky; position: sticky;
    top: 46px;  z-index: 901; 
    box-shadow: 0 1px 4px -1px rgba(0,0,0,.25);
    background: rgba(232,232,232,.95);
}

Resultat:

 

- - -


Flasha till meddelandet man går till. Spec bra om det år många inlägg på sidan så ser man direkt vilket det är.

/* Highlight post */
@-webkit-keyframes hl_post {
    0% { background-color: rgba(168,209,255,.4); }
    50% { background-color: inherit; }
}
@keyframes hl_post {
    0% { background-color: rgba(168,209,255,.4); }
    50% { background-color: inherit; }
}
a:target ~ div.post_wrap {
    -webkit-animation: hl_post 4s 1 ease-in-out;
    animation: hl_post 4s 1 ease-in-out;
}

- - -

Ändra bakrunden på täcklagret som ligger i bakgrunden då man visar bilder. Har gjort min lite mer blåtonad.

div#overlay {
    top: 0px; left:0px; right: 0px; left: 0px;
    opacity: 1 !important;
    background: rgba(0,15,30,.85) no-repeat center center fixed;
}

Resultat:

 

 

- - -

Tycker man att det är alldelse för vitt (svårt för ögonen), så kan man tona ner det lite så det blir lite mer som på “gamla forumet” (förra versionen av programvaran).

/* Färg inlägg */
div[class="post_wrap"] { background: #f5f5f5; }
div[class="post_wrap"]:nth-of-type(2n) { background: #f9f9f9; }

/* Färg forum */
div[id="contentWrapper"] { background: #f5f5f5 !important; }

Inte lika “vasst” i ögonen längre...

Var försiktig med färgvalen där så det inte avviker för mycket - då blir det störande istället. Det är mer justeringar än om-styling.

 

- - -

 

Lite trivselstyling bara, utan att man ändrar för mycket. För forumet är bra som det är*.

 

* Nej, ta inte upp det om reklam där - för det är en helt annan diskussion.

[Gäst]

Safari-versionen är från 2011

[xeric]

...men alla har en funktion så man kan begränsa det till en speciell sida. Så inte den man lägger in/till påverkar andra sidor man besöker.

 

I Firefox om man väljer för denna sidan, så lägger den till en omslutande kod.

 

 

T ex:

@-moz-document domain(forum.macworld.se) {

   /* CSS-kod */

}

 

I Safari ser det ut såhär för att hantera vilken sida det gäller:

 

 

I Chrome är det säkert något liknande någon av dem.

[xeric]

Safari-versionen är från 2011

Vet inte om den funkar i senare/senaste, men det borde den göra. Men annars finns alternativet “egen stillmall” kvar i Safari? (kika i inställningarna)

 

Mina bilder/exempel för Safari är från en äldre version. Använder inte den så mycket.

[xeric]

Safari-versionen är från 2011

Den ligger här med: https://github.com/350d/stylish och hänvisar till originalsidan för nedladdning, men du kan ju ta ner den från Github istället. 5dagar gammal. Hade den inte fungerat med senaste, så hade det framgått.

[Gäst]

Ok