Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
  5 8538
Vi har en veldig bra webbasert SQL-klient på jobb (proprietær). Den har alt man trenger, velge database/tabeller/brukere, utforske kolonner, boks for SQL og boks for output osv. Jeg ønsker å endre litt på designet til denne, fjerne det jeg ikke trenger, lage ting litt penere. Ble veldig gira da jeg skjønte at jeg kan jo lage en SQL-klienten akkurat slik jeg ønsker det.

Alt jeg trenger er å endre litt på html-strukturen, css, og kanskje legge til litt javascript. Dette kan man gjøre i feks Chrome developer tools, men hvordan kan jeg få min theme til å bli default? Altså, hvordan kan man "lagre" endringene man gjør der?

Har prøvd å søke litt, men usikker på hva man skal søke på. Skjønner jo at developer tools ikke er laget for dette, men det bør likevel være mulig? Fant https://sitemod.io/ som er akkurat det jeg er ute etter, men det funka ikke (sikkert pga sikkerhet hos arbeidsgiver). Pga sikkerhet er det aller best om alt skjer via min lokale maskin.

Noen som vet? Dette har jo flere bruksområder, lage eget design på vg.no osv osv. Kanskje det er en grunn til at dette ikke allerede er utbredt?
Limited edition
Moff's Avatar
Meg bekjent må du bruke en addon for å få til dette. En populært utvidelse for Chrome er TamperMonkey (tidligere kjent som GreaseMonkey):
https://chrome.google.com/webstore/d...jmpbldmpobfkfo

Her kan du legge inn kode, det vi kaller userscripts, som gjør lokale endringer automatisk. Jeg bruker selv denne typen utvidelser ofte for å lage min egen "dark mode" på nettsider som ikke har dette fra før.
Evig student
Chronic420's Avatar
Trådstarter
Takk for svar, tror du traff spikeren på hodet. Det er akkurat det jeg vil gjøre, lage en litt bedre dark mode, og endre litt på design. Fantastisk!
Meningsløst medlem
Quakecry's Avatar
Sitat av Moff Vis innlegg
Meg bekjent må du bruke en addon for å få til dette. En populært utvidelse for Chrome er TamperMonkey (tidligere kjent som GreaseMonkey):
https://chrome.google.com/webstore/d...jmpbldmpobfkfo

Her kan du legge inn kode, det vi kaller userscripts, som gjør lokale endringer automatisk. Jeg bruker selv denne typen utvidelser ofte for å lage min egen "dark mode" på nettsider som ikke har dette fra før.
Vis hele sitatet...
Har du en dark mode for freak?
Limited edition
Moff's Avatar
Sitat av Quakecry Vis innlegg
Har du en dark mode for freak?
Vis hele sitatet...
Nedenfor er et userscript som er ment å brukes med TamperMonkey eller tilsvarende. Hvis man bruker andre addons som ikke støtter userscripts (Stylus), så er det bare å fjerne den delen av koden som wrapper rundt CSS-delen. Se etter `flyvekomma`-symbolene i starten og slutten (det er kun 2 av dem totalt). Dette kommer med alle slags forbehold; det er kun ment for å ta vekk de mest lyssterke overflatene, og det er ikke alt jeg har tatt meg bryet med å rydde opp i. Særlig i forbindelse med alle ikoner i forumlister og søk, der er det noen skarpe kanter som kunne trengt litt anti-aliasing og sånt. Endringene kan også slutte å fungere hvis forumet oppdateres til nye versjoner.

Temaet bør benyttes med et mørkt tema i stilvelgeren vi har på forumet, ettersom det ikke endrer bakgrunnsbildet. Knappen for å velge tema ligger nær brukernavnet i menyen.

Kode

// ==UserScript==
// @version      1.0
// @name         freak.no Darker
// @description  Dark Mode for freak.no
// @author       Moff
// @namespace    moff
// @match        http://freak.no/*
// @match        http://www.freak.no/*
// @match        https://freak.no/*
// @match        https://www.freak.no/*
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==

GM_addStyle (`

/*

Colors:

Lightest: rgba(220, 220, 220, 1)
Green: rgba(99, 152, 88, 1)
Dim: rgba(60, 60, 60, 1)
Dark: rgba(60, 60, 60, 1)
Darkest: rgba(15, 15, 15, 1)

*/

/* Header */

#header #logo, #header .hamburger {
filter: sepia(1) saturate(550%) hue-rotate(30deg) brightness(80%);
}

#header #logo {
transform: scale(0.9);
transition: transform 1s;
}

#header #logo:hover {
transform: scale(1);
transition: transform 0.5s;
}

#header a {
color: rgba(220, 220, 220, 1);
background-color: rgba(15, 15, 15, 1);
}
#header a:hover {
background-color: rgba(60, 60, 60, 1);
}

#header a span.badge {
background-color: rgba(99, 152, 88, 1);
}

#header .search input[type=submit] {
background-color: rgba(150, 150, 150, 1);
filter: invert(100%) grayscale(100%);
}

.adBelowNavbar {
margin: 0px;
margin-bottom: 5px;
}

/* Navigation */

#navbits {
margin: 0px;
}

#navbits > span, #navbits > a, .pagenav > a {
background-color: rgba(15, 15, 15, 1);
color: rgba(220, 220, 220, 1);
}

/* Generic */

a, a:link, a:visited, a:focus, a:active {
color: rgba(220, 220, 220, 1);
}

a:hover {
color: rgba(255, 255, 255, 1);
}

input[type='text'], input[type='password'], textarea {
background-color: rgba(15, 15, 15, 1);
color: rgba(220, 220, 220, 1);
border: 1px solid rgba(220, 220, 220, 1);
padding: 3px;
}

input[type='submit'] {
color: rgba(220, 220, 220, 1) !important;
}

.panelsurround, .panel {
background-color: rgba(60, 60, 60, 1);
color: rgba(220, 220, 220, 1);
border: none;
}

/* Front page */

.alt1, .alt1Active, .alt2, .alt2Active {
color: rgba(220, 220, 220, 1);
background-color: rgba(15, 15, 15, 1);
}

.alt1 a, .alt2 a {
color: rgba(220, 220, 220, 1);
}

tr.recthreads-row:nth-child(odd) .alt1 {
background-color: rgba(60, 60, 60, 1);
}

.cat-sml-f {
filter: invert(100%) grayscale(100%);
}

.f-52-b {
border-bottom-color: rgba(60, 60, 60, 1); /* VIF section */
}

/* Forum list */

.thead, .tcat, .tcat a, .tcat a:link, .tcat a:visited, .tcat a:focus, .tcat a:active {
color: rgba(220, 220, 220, 1);
}

.pagelink {
color: rgba(220, 220, 220, 1) !important;
}

td > img:not(.inlineimg) {
filter: invert(100%) grayscale(100%);
}

.panelsurround td > img {
filter: none;
}

#threadslist .alt1 > img, #threadslist .alt2 > img {
filter: invert(0%) brightness(80%);
}

.newpost-arrow, .is-threadstarter {
background-color: rgba(99, 152, 88, 1);
color: rgba(220, 220, 220, 1) !important;
}

.vbmenu_control {
filter: brightness(80%);
}

/* Post */

.post .meta {
background-color: rgba(60, 60, 60, 1);
}

.post .meta .countwrapper span, .post .meta .countwrapper span a {
filter: invert(100%) grayscale(100%);
text-decoration: none;
}

.post .meta .username a {
text-decoration: none;
}

.post .meta .username, .post .meta .usertitle {
color: rgba(220, 220, 220, 1);
}

.post .meta a.time, .time {
color: rgba(220, 220, 220, 1);
text-decoration: none;
}

.post .meta .arrow {
border-right-color: rgba(15, 15, 15, 1);
}

.post .content {
background-color: rgba(15, 15, 15, 1);
color: rgba(220, 220, 220, 1);
}

.post .content .text .quote-wrapper-inner, .quote-wrapper-inner {
background-color: rgba(60, 60, 60, 1);
}

.quote-arrow {
border-right-color: rgba(60, 60, 60, 1);
}

.post .content .quotetop img {
filter: invert(100%) grayscale(100%) brightness(80%);
}

.post .menu a {
filter: brightness(80%);
}

/* Editor */

.imagebutton {
background-color: rgba(220, 220, 220, 0.25) !important;
}

/* Footer */

#footer > div > ul > li a {
color: rgba(220, 220, 220, 1);
}
`);
Meningsløst medlem
Quakecry's Avatar
Sitat av Moff Vis innlegg
Nedenfor er et userscript som er ment å brukes med TamperMonkey eller tilsvarende.
Vis hele sitatet...
Det fungerte! Takk skal du ha