[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'

[matroosoft]

Hero of Time schreef op dinsdag 16 februari 2016 @ 16:14:
[...]

Je bedoelt

Cascading Stylesheet:

.karmaCards {display:none;}

?

Enne, sommigen moeten wel !important gebruiken. Als je 't in je Tweakers karmastore custom css plakt mogelijk niet, maar browser based wel. Mijn custom CSS staat dus vol met !important (270x).

Haha. Maar nee, ik bedoel die badges die aangeven dat je abonnee bent. Kan het niet aanzien, al die patsers..

[Migrator]

Seg! Maar als je op 'element inspecteren' drukt nadat je een rechtermuisklik hebt gedaan op het element dat je wil inspecteren dan kun je eigenlijk altijd zien hoe het heet in de CSS

[matroosoft]

Migrator schreef op dinsdag 16 februari 2016 @ 16:42:
Seg! Maar als je op 'element inspecteren' drukt nadat je een rechtermuisklik hebt gedaan op het element dat je wil inspecteren dan kun je eigenlijk altijd zien hoe het heet in de CSS

Had eerst:
 

Cascading Stylesheet:

/* tweakerBadge verwijderen */
userheader.tweakersBadge{ display:none; }

 
Maar dat werkte niet. Dacht eerst nog dat je de div er ook voor moest zetten. Maar goed met alleen de class werkt het blijkbaar wel:
  

Cascading Stylesheet:

/* tweakerBadge verwijderen */
.tweakersBadge{ display:none; }

Ik dacht dat je abonnee was?!

[Raven]

Heeft iemand al door hoe je het inklappen van quotes kan voorkomen met css-code?

[matroosoft]

Raven schreef op dinsdag 16 februari 2016 @ 17:08:
Heeft iemand al door hoe je het inklappen van quotes kan voorkomen met css-code?

Ik ga je niet beloven dat dit helemaal correct CSS is, maar het werkt.
 

Cascading Stylesheet:

/* toggle-quote verwijderen */
.messagecontent .toggle-quote {
    display:none;
}
.messagecontent .message-quote-div.large-quote {
    height: initial;
    overflow: visible;
    padding-bottom: 10px;
}

[Raven]

Thanks, dat lijkt te werken

Al lijkt er wel wat lege ruimte onderaan in de quote te staan.

[Migrator]

crisp had daar ook wat over gepost: crisp in "[quote] Selectie i.p.v gehele bericht"

[Raven]

Cascading Stylesheet:

padding-bottom: 10px;

erbij did the trick, thanks

[matroosoft]

Raven schreef op dinsdag 16 februari 2016 @ 17:21:

Cascading Stylesheet:

padding-bottom: 10px;

erbij did the trick, thanks

Klopt, ook gevonden. Heb het even aangepast.

[matroosoft]

Koen179 schreef op dinsdag 12 januari 2016 @ 08:11:
Sorry, maar ik kom er nog niet helemaal uit. Ik ben er inmiddels achter dat voor mobiel een andere class wordt gebruikt. Ik heb hetzelfde trucje gedaan als bij de desktopversie, maar het lukt mij niet om de dropdownlist te bewerken. Het kopje "Mijn topics" blijft dus in de dropdownlist staan. Zie de afbeelding hieronder.

Mijn code:

Cascading Stylesheet:

.pageTabs.responsiveDropDownList.preservetabs > ul{display:flex}
#tab_forum_main{order:1}
#tab_forum_posthistory{order:2}
#tab_forum_activetopics{order:3}
#tab_forum_bookmarks{order:4}
#tab_forum_myreact{order:5}
#tab_forum_faq{order:6}
#tab_reset{order:7}

[afbeelding]

Alvast bedankt voor de hulp!

Ik heb er een tijd mee zitten knoeien, maar heb de oplossing niet voor je kunnen vinden helaas. Er staat wel een typefoutje in je class, '.preservetabs' moet zijn '.preserveTabs'.

[Koen179]

matroosoft schreef op woensdag 17 februari 2016 @ 18:39:
[...]
Ik heb er een tijd mee zitten knoeien, maar heb de oplossing niet voor je kunnen vinden helaas. Er staat wel een typefoutje in je class, '.preservetabs' moet zijn '.preserveTabs'.

Bedankt voor je tijd en moeite in ieder geval, ik heb er laatst ook nog mee zitten tobben maar het is een lastige uitdaging zullen we maar zeggen . Spelfout zal ik even aanpassen, thanks!

[matroosoft]

Kiwi schreef op zondag 30 augustus 2015 @ 13:33:
Omdat ik het niet erg opvallend vond als een post was geliked, heb ik de volgende aanpassing gedaan:
[afbeelding]
(code)

Leuk idee! Ben er nog even mee bezig geweest om de ratingcount aan de thumbs up te koppelen. Hier de code (ingeklapt):

Cascading Stylesheet:

/*RATINGCOUNT & THUMBSUB AANPASSEN*/
.ratingcount {
    color: #fff !important;
    border: 1px solid #bbbebe;
    border-radius: 1px;
    border-right: none;
    height: 22px;
    min-width: 12px !important;
    text-align: right;
    padding-left: 2px;
    text-shadow: 1px 1px 1px rgba(0,0,0,.2),0 0 2px rgba(0,0,0,.2);
    background: #dcdfdf;
    background-image: -webkit-linear-gradient(#dcdfdf,#c5c8c8);
    background-image: -moz-linear-gradient(#dcdfdf,#c5c8c8);
    background-image: linear-gradient(#dcdfdf,#c5c8c8);
    position: relative;
    right: -6px;
    top: 2px;
}

.can_be_rated .ratingcount {
    background: #929494;
    background-image: -webkit-linear-gradient(#929494,#7d8080);
    background-image: -moz-linear-gradient(#929494,#7d8080);
    background-image: linear-gradient(#929494,#7d8080);
    border-color: #7c7e7e;
}

.has_ratings .ratingcount {
    background: #cbda30;
    background-image: -webkit-linear-gradient(#cbda30,#c1d203);
    background-image: -moz-linear-gradient(#cbda30,#c1d203);
    background-image: linear-gradient(#cbda30,#c1d203);
    border-color: #b6c600;
}

.action_list li.rating .thumbsup{
    border-left: #dcdfdf;
    background: #dcdfdf;
    background-image: -webkit-linear-gradient(#dcdfdf,#c5c8c8);
    background-image: -moz-linear-gradient(#dcdfdf,#c5c8c8);
    background-image: linear-gradient(#dcdfdf,#c5c8c8);
}

.action_list li.rating.can_be_rated .thumbsup{
    background: #929494;
    background-image: -webkit-linear-gradient(#929494,#7d8080);
    background-image: -moz-linear-gradient(#929494,#7d8080);
    background-image: linear-gradient(#929494,#7d8080);
    border-color: #7c7e7e;
    border-left: #929494;
}

.action_list li.rating.has_ratings .thumbsup{
    background: #cbda30;
    background-image: -webkit-linear-gradient(#cbda30,#c1d203);
    background-image: -moz-linear-gradient(#cbda30,#c1d203);
    background-image: linear-gradient(#cbda30,#c1d203);
    border-color: #b6c600;
    border-color: #b6c600;
    border-left: #cbda30;
}

Eventueel kun je het nog even tussen de haken zetten van onderstaande code om het op je mobiel uit te schakelen, want in sommige mobiele browsers werkt het niet uitstekend.
 

Cascading Stylesheet:

/*RATINGCOUNT  & THUMBSUP AANPASSEN UITSCHAKELEN OP MOBIEL*/
@media screen and (min-width: 767px), (min-device-width: 767px) and (orientation: portrait), 
(min-device-width: 499px) and (orientation: landscape){

}

En het resultaat:

[ Voor 30% gewijzigd door matroosoft op 06-12-2016 15:03 ]

[SampleUser]

Tweakers enigszins zwart maken. Nog lang niet af. Onderdeel van een merge van (kleine) projectjes met eigen werk. Dit is een voorbeeld van het eigen werk:

Cascading Stylesheet:

/* eigen toevoeging: zwart is leuk */

.tweakersBadge{
display: none
}

.searchAanbod #nearestAdForm{
background:#FFFFFF
}

#categoryBar li a {
    color: #FFFFFF;
}

.poll label:hover {
background-color: #000000;
}

#trackerContainer {
    background: #000000;
}

span.abbr{
color:#FFFFFF
}

.user{
color:#FFFFFF;
}

.poll label {
color:#FFFFFF
}

div.info, div.error, div.message, div.faq, form.insertMessage, form.form1, form.form2, #folders, #myprofilecontainer {
    border: 0px;
    border-radius: 0px;
}

.messagecontent{
color:#FFF
}

h3{
color:#FFF
}

.bar.notice{
color:#FFF
}

.frontpage #community .userReview .userReviewDescription {
    background: #000;
    border: 0px;
}

.darkFpBlock {
    border: 0px;
    background: #000;
}

.notificationsContainer {
    background: #000;
}

.bar.notice {
    font-size: 12px;
    background: #000;
    border: 2px solid #FFF;
}

body{
background:#000000
}

div.top{
background:#000000
}

#categoryBrowser li a {
    color: #FFF;
}

div.searchbar{
background:#000000
}

#categoryBrowser {
    background: #000000 none repeat scroll 0% 0%;
    border: 0px;
}

#bottom {
    background: #000;
}

#bottom div.hr {
    background-color: #000;
}

#categoryBrowser div {
    background: #000;
    border: 0px;
}

#searchbar {
    height: 55px;
    background: #000000;
    border-radius: 6px 6px 0px 0px;
}

p{
color:#FFFFFF
}

form table td.label {
    color: #FFF;
}

td{
color:#FFFFFF
}

#contentArea{
border:0px;
background:#000000;
}

div.ownpost{
background:#C9E6D4;
background-image: none;
}

/* einde */

Edit: het is de bedoeling voor (AM)OLED schermen. Zwarte pixels daarop verbruiken geen energie
Edit2: als je aanpassingen hebt stuur ze even in PM.
Dit is publiek domein - geen copyright. Als je het gebruikt hoef je geen credit te gebruiken, het is natuurlijk wel leuk als je het doet.
Ook ga ik het later naar GitHub voor issues en dergelijke zetten.


Edit: op verzoek tussen quote tags gezet.

[ Voor 9% gewijzigd door SampleUser op 11-03-2016 14:58 ]

[Hero of Time]

SampleUser schreef op zaterdag 05 maart 2016 @ 21:20:
Tweakers enigszins zwart maken. Nog lang niet af. Onderdeel van een merge van (kleine) projectjes met eigen werk. Dit is een voorbeeld van het eigen werk:

[stuk css code]

Edit: het is de bedoeling voor (AM)OLED schermen. Zwarte pixels daarop verbruiken geen energie
Edit2: als je aanpassingen hebt stuur ze even in PM.
Dit is publiek domein - geen copyright. Als je het gebruikt hoef je geen credit te gebruiken, het is natuurlijk wel leuk als je het doet.
Ook ga ik het later naar GitHub voor issues en dergelijke zetten.

Je hebt 'maar' 135 regels code. Je hebt nog een HEEL lange weg te gaan. Dat wordt nog wel zo 10x langer als ik 't met m'n eigen dark versie vergelijk. Al doe ik wel wat meer dan alleen het kleurenpallet aanpassen, ik doe ook dingen met de tracker en header en maak de boel algemeen breder. Maar het meerendeel is kleur en zit dan al snel op 900 regels.

[nanoChip]

Niet echt een CSS koning maar hier mijn custom Tweakers

Ik kom voornamelijk voor Nieuws, V&A en GoT dus veel meuk op de frontpage heb ik weggehaald (en alles is nog redelijk responsive ).

Daarnaast bezoek ik Tweakers meestal in een 1080p of hoger resolutie daarom heb ik het e.e.a. iets breder gemaakt.





Ik sta altijd open voor feedback!

Cascading Stylesheet:

/* slogan niet weergeven */
.slogan { display: none }

/* socialmedia verwijderen */
.socialcount { display: none }
.social { display: none }
#socialButtonsContainer { display: none }

/* website van het jaar verwijderen */
.wvhj { display: none }

/* true logo verwijderen */
#search #true{
  display: none;
}

/* menu bottom bar verlagen */
#menubottombar {
    height: 10px;
    line-height: 1.7;
    overflow: hidden;
}

/* tracker verhogen zodat deze aansluit aan de menu bottom bar */
#tracker .fakeTop > div {
    width: 28px;
    height: 40px;
    position: absolute;
    bottom: -47px;
    right: -22px;
    background: url(../../g/if/v3/framework/tracker_label.png) no-repeat;
    cursor: pointer;
}

/* kleur tracker instellingen aanpassen */
#trackerHeader .bulletSeparatedList li span {
    color: #d9ff26;
    cursor: pointer;
}

/* footer verwijderen en verlagen */
.colofon { display: none }
#ticker { display: none }
#about { display: none }
#layout {
    padding-bottom: 5px;
}

/* homepage 'clean' */
/* categoriebar verwijderen */
#categoryBar { display: none }

/* tweede kolom verwijderen */
div.secondColumn:nth-child(4) { display: none }

/* nieuwsbrief verwijderen */
#newsletter { display: none }

/* het bekijken waard verwijderen */
.highlightedProductsWrapper { display: none }

/* uitgelichte reviews, nu op het forum en  populaire tweakblogs */
div.mainColumn:nth-child(7) { display: none }

/* verwijderen pol en banen */
div.secondColumn:nth-child(8) { display: none }

/* nieuws items breder maken */
.mainColumn.frontpage {
    width: 100%;
    padding-top: 15px;
    padding-right: 20px;
    margin-right: 0;
    border-right: 0px;
}

/* nieuws 'clean' */
/* relevent kolom verwijderen */
.relevancyColumn { display: none }

/* nieuws artikel over de gehele breedte */
.articleColumn {
    float: none;
    width: 100%;
    max-width: 100%;
    line-height: 1.6;
}

.articleColumn > div {
    max-width: 100%;
    width: 95%;
}

/* fpaItemsWrapper minimalist */
.fpaItemsWrapper {
    overflow: auto;
    border-bottom: 0px;
}
.greyTopBorderBlock {
    border-top: 0px;
}

/* video's tonen zonder tumbnails */
ul.useVisitedState { display: none }

/* header paginabreed */
#header.articleHeading {
    max-width: 100%;
    margin: 0 auto 5px;
}

/* fix voor responsive */
@media (max-width:1000px) {
  .mainColumn.frontpage #groupedContent {
    margin-right: 20px;
  } 
}

/* reacties verbreden */
#commentColumn {
    float: left;
    width: 100%;
    padding-top: 15px;
    line-height: 1.6;
}

#reacties {
    width: 100%;
    max-width: 100%;
}

#reacties #reactieContainer {
    padding-left: 0px;
    border-left: 0;
    padding-right: 20px;
}

.layoutFilter {
    float: right;
    line-height: 23px;
    padding-top: 8px;
    padding-right: 20px;
}

/* kleuren voor niet bezochten artikelen */
a {
    color: #313232;
    text-decoration: none;
}

.fpaItem a {
    color: #313232;
    text-decoration: none;
}

/* kleuren voor bezochten artikelen */
.useVisitedState a:visited {
    color: #a11738;
}

.fpaItem a:hover {
    color: #a11738;
    text-decoration: underline;
}

/* profielpagina 'clean' */
.galleryBody {
    float: left;
    clear: both;
    width: 100%;
    overflow: hidden;
    line-height: 18px;
}

/* vraag en aanbod feedback pagina breed */
.userReview {
    width: inherit !important;
    border: 1px solid #d7dfdd;
    background: #f2f6f5 url(../../g/pw/pw_bg.png) repeat-x;
    padding: 10px 10px 0;
    margin-bottom: 15px;
}

.columnwrapper {
    float: none !important;
    max-width: 100%;
    margin: 0 auto 10px;
}

.sidebar {
    width: 100%;
    float: right;
}

/* GoT in kleur */
.forumList:nth-child(2) table.listing tr th {
        background-image: linear-gradient(#9C9E9E,#626363);
}

.forumList:nth-child(3) table.listing tr th {
        background-image: linear-gradient(#B4113C,#760D29);
}

.forumList:nth-child(4) table.listing tr th {
        background-image: linear-gradient(#573077,#2B0A46);
}

.forumList:nth-child(5) table.listing tr th {
        background-image: linear-gradient(#1BA53C,#074416);
}

.forumList:nth-child(6) table.listing tr th {
        background-image: linear-gradient(#FF5A00,#9E3B06);
}

.forumList:nth-child(7) table.listing tr th {
        background-image: linear-gradient(#50D7FA,#14505F);
}

.forumList:nth-child(8) table.listing tr th {
        background-image: linear-gradient(#21428B,#112551);
}

.forumList:nth-child(9) table.listing tr th {
        background-image: linear-gradient(#9C9E9E,#626363);
}

/* Henk knop */
.action_list li.rating .thumbsup::before {
    background: rgba(0, 0, 0, 0) url("http://static.tweakers.net/ext/f/TlL6Zo91MiMutr9amUluNikj/full.png") no-repeat scroll 50% center;
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
}

.action_list li.rating .thumbsup.rated::before {
    background: rgba(0, 0, 0, 0) url("http://static.tweakers.net/ext/f/XUQa8JbPDzdzsWTKxb4qX5Gm/full.png") no-repeat scroll 50% center;
}

.action_list li.rating .thumbsup {
    background: #e0e0e0 linear-gradient(#e0e0e0, #c4c4c4) repeat scroll 0 0;
    border: 1px solid #bfb9a9;
    border-radius: 1px;
    cursor: default;
    display: inline-block;
    height: 22px;
    margin-left: 5px;
    overflow: hidden;
    position: relative;
    top: -2px;
    vertical-align: bottom;
    width: 22px;
}

[matroosoft]

Voor degenen die m'n tweakblog niet gelezen hebben: ik heb wat custom CSS geschreven voor Tweakblogs. 't valt misschien niet helemaal onder dit topic, maar ach, Tweakblogs hoort bij T.net. Ik ga de code hier niet posten (450 regels), maar je kunt het hier vinden.

Wat zit er zoal in:
- Header/content/footer zoveel mogelijk dezelfde breedtes/hoogtes en kleuren;
- Tweakers logo en slogan toegevoegd;
- navmenu items zoveel mogelijk geplaatst zoals op Tweakers.net;
- navmenu items hover kleurtje toegevoegd;
- vormgeving reacties/reactieformulier gelijk getrokken;
- blog/sidebar breedte aangepast;
- volgorde sidebar items aangepast;
- vormgeving sidebar items gelijkgetrokken met sidebars op Tweakers.net;
- icoontjes vorig/volgende post aangepast;
- Tweakblogs titel aangepast/ondertitel toevoegd;
- indeling footer aangepast;
- reactie plaatsen button gewijzigd.

En verder:
- Heel veel onnodige items verwijderd;
- borders, margin en paddings gelijk getrokken;
- overbodige border/margins/paddings verwijderd;
- letterkleur/type gelijk getrokken;
- kleur linkjes aangepast;
- background kleur aangepast;
- content background en border aangepast;
- en nog veel meer.

Tweakblogs custom CSS (oud vs nieuw)

Meer info in de blogpost.

[Devian]

Ik hoop dat dit het goede topic is.(maar denk van niet)

Ik gebruikte vroeger een custom CSS, echter werkt die niet als ik via mijn mobiel keek.

Ik zou graag willen dat als ik mobiel kijk het volgende uitgeschakeld is:

* Recent getest door Tweaker
* De nieuweste Best Buy Guides
* Het bekijken waard
* Uitgelichte gebruiksersreviews
* En het aantsl nieuwsberichten mag ook wel beperkt worden tot de laatste 10.

Nu herinner ik me vaag een css request topic, maar die heb ik niet terug kunnen vinden...en deze kwam het meest in de buurt volgens de search

[GerardVanAfoort]

Devian schreef op maandag 16 mei 2016 @ 14:56:
Ik hoop dat dit het goede topic is.(maar denk van niet)

Ik gebruikte vroeger een custom CSS, echter werkt die niet als ik via mijn mobiel keek.

Ik zou graag willen dat als ik mobiel kijk het volgende uitgeschakeld is:

* Recent getest door Tweaker
* De nieuweste Best Buy Guides
* Het bekijken waard
* Uitgelichte gebruiksersreviews
* En het aantsl nieuwsberichten mag ook wel beperkt worden tot de laatste 10.

Nu herinner ik me vaag een css request topic, maar die heb ik niet terug kunnen vinden...en deze kwam het meest in de buurt volgens de search

code:

/* vergelijk weg */
#categoryBar { display: none; }

/* recent getest weg */
.highlightedProductsWrapper, #recentlyTested,
.highlightedProductsWrapper + .mainColumn { display: none; }

/* newsletter aanmelden weg */
#newsletter.fpItem { display: none; }

/* jobs weg */
#loi, #jobs { display: none !important; }

Hier kom je al een eind mee, ook op mobiel. De laatste 2 zijn bonus

[Hero of Time]

Devian schreef op maandag 16 mei 2016 @ 14:56:
Ik hoop dat dit het goede topic is.(maar denk van niet)

Ik gebruikte vroeger een custom CSS, echter werkt die niet als ik via mijn mobiel keek.

Ik zou graag willen dat als ik mobiel kijk het volgende uitgeschakeld is:

* Recent getest door Tweaker
* De nieuweste Best Buy Guides
* Het bekijken waard
* Uitgelichte gebruiksersreviews
* En het aantsl nieuwsberichten mag ook wel beperkt worden tot de laatste 10.

Nu herinner ik me vaag een css request topic, maar die heb ik niet terug kunnen vinden...en deze kwam het meest in de buurt volgens de search

Als je ook een beetje handig bent met de developer tools in je browser, kan je daarmee de divs uitlezen die het weergeven. Maak je browserscherm klein genoeg om je mobiele resolutie na te bootsen zodat je die weergave krijgt en inspecteer de elementen die je wilt verbergen. Zet dat dan in de CSS en het zou moeten werken.

[SampleUser]

Bam. Ben verder gegaan aan het 100% zwart-gebeuren. Dit is onderdeel van een groot project om meerdere kleine projectjes samen te voegen. Let wel op dat dit een directe copypaste is en dat sommige credits er niet instaan; sta jij er niet in, meld het svp even per PM. Ook staan er wat persoonlijke aanpassingen in (donatiebadges weg bijvoorbeeld) dus proceed with caution.

Hij is te groot om in een bericht te passen, dus even op hastebin gezet. http://hastebin.com/uyaqojofur.css

[Hero of Time]

Nog geen 600 regels en veel zwart/donker gemaakt? Knap. Ik zit al op 1234 regels op m'n HTPC. Al moet ik daar wel 165 regels vanaf halen ivm breedtes en tekstgrootte. En hier en daar wat uitgebreide comment en secties ingebouwd. Kom ik denk ik alsnog op ~1000 regels uit.

Ik ga 'm eens uittesten een dezer dagen, wellicht dat ik wat overneem, al dan niet omdat ik het nog niet heb toegepast.

[Devian]

GerardVanAfoort schreef op maandag 16 mei 2016 @ 15:07:
[...]

code:

/* vergelijk weg */
#categoryBar { display: none; }

/* recent getest weg */
.highlightedProductsWrapper, #recentlyTested,
.highlightedProductsWrapper + .mainColumn { display: none; }

/* newsletter aanmelden weg */
#newsletter.fpItem { display: none; }

/* jobs weg */
#loi, #jobs { display: none !important; }

Hier kom je al een eind mee, ook op mobiel. De laatste 2 zijn bonus

Thx!

Nog 2 vraagjes.. ben nu namelijk de tweakblogs ook kwijt, en de best buy guide heb ik nog. Zou je daar nog mee willen helpen?

Hero of Time schreef op maandag 16 mei 2016 @ 16:27:
[...]

Als je ook een beetje handig bent met de developer tools in je browser, kan je daarmee de divs uitlezen die het weergeven. Maak je browserscherm klein genoeg om je mobiele resolutie na te bootsen zodat je die weergave krijgt en inspecteer de elementen die je wilt verbergen. Zet dat dan in de CSS en het zou moeten werken.

Handig ben ik wel, dus als ik mij erin verdiep zou ik het vast wel voor elkaar krijgen, maar ik heb tegenwoordig gewoon niet meer de tijd om mij erin te verdiepen .

Ik ben in ieder geval al een stap verder, en straks in de zomervakantie misschien eens zelf wat meer tijd erin stoppen!

[matroosoft]

Devian schreef op vrijdag 20 mei 2016 @ 08:41:
[...]


Thx!

Nog 2 vraagjes.. ben nu namelijk de tweakblogs ook kwijt, en de best buy guide heb ik nog. Zou je daar nog mee willen helpen?


[...]


Handig ben ik wel, dus als ik mij erin verdiep zou ik het vast wel voor elkaar krijgen, maar ik heb tegenwoordig gewoon niet meer de tijd om mij erin te verdiepen .

Ik ben in ieder geval al een stap verder, en straks in de zomervakantie misschien eens zelf wat meer tijd erin stoppen!

Om de Best Buy Guide te verwijderen:

Cascading Stylesheet:

#bestBuyGuides{
display:none;
}

En om de Tweakblogs weer zichtbaar te maken moet je even .mainColumn verwijderen.

[Devian]

matroosoft schreef op vrijdag 20 mei 2016 @ 09:27:
[...]


Om de Best Buy Guide te verwijderen:

Cascading Stylesheet:

#bestBuyGuides{
display:none;
}

En om de Tweakblogs weer zichtbaar te maken moet je even .mainColumn verwijderen.

Thanks! Ik laat de Tweakblogs wel weg, als ik de .mainColumn weer aanzet komt er buiten de blogs nog meer bij, en ik hou eigenlijk wel van het cleane zo!

[Kid_Stevie]

Ben laatst opnieuw begonnen met mijn Material Design layout, voor desktop en mobile. Zal binnenkort wat screenshots plaatsen.

Maar wel jammer dat je de videoplayer niet kan aanpassen (iig niet zonder extensies etc). En een leuke toevoeging zou zijn als je voor Android de theme-color zou kunnen aanpassen. Is een kleine toevoeging aan de website en lijkt me niet heel ingewikkeld om dit als optie toe te voegen aan het menu.

Weet niet of je ergens tips/ideeën kan indienen?

[matroosoft]

Kid_Stevie schreef op vrijdag 20 mei 2016 @ 10:18:
(...)

Weet niet of je ergens tips/ideeën kan indienen?

Hier kun je ideetjes indienen.

[Kid_Stevie]

matroosoft schreef op vrijdag 20 mei 2016 @ 10:41:
[...]


Hier kun je ideetjes indienen.

Super! Dankjewel
_{en misschien had ik zelf even beter moeten zoeken}

[Bastien]

Ik ben niet zo'n videokijker, echter wordt je er in vele topics wel telkens mee geconfronteerd. Telkens weer een halve pagina per video, soms tientallen per pagina. Soms in topics waar je dat niet direct verwacht.

Nu heb ik uitgevogeld dat door onderstaande in de custom css te zetten, ik niets meer zie dus het halve probleem is opgelost.

code:

.video-container {
   display:  none !important;
}

Maar volgens mij worden de filmpjes nog wel steeds gedownload (althans wat standaard getoond wordt) en worden ze enkel niet meer getoond. Is het te voorkomen (behalve door youtube etc. geheel te blokkeren, dat wil ik niet) dat ze überhaupt geladen worden?

Nog mooier zou zijn dat de videotag omgezet kan worden naar een link want dan is het helemaal hoe ik het zou willen, maar dat zal wel teveel gevraagd zijn. Al kan ik dat in MF plaatsen of dat een instelling kan worden. Het gaat mij enkel om het forum.

[Hero of Time]

Wil je een linkje van de video, ipv de video in-place, schakel dan plugins (zoals Flash) uit en gebruik een browser dat geen HTML5 video aan kan. Klaar, geen in-place video's meer. Lynx is een prima keus daarvoor.

[Migrator]

Kickje! Zag gisteren/vanochtend in SB/BFA dat Inspector de groene vink hier op T.net had uitgeroeid, en weer tot leven had gewekt. Dat inspireerde me tot dit:

Cascading Stylesheet:

/* groenvink ipv groene vink */
ul.galleryProfile li.checked, .sprite.answered {
background-image: url("https://static.tweakers.net/ext/f/4xAZ5YGJD8wsk08xVP3NQF3x/full.png");
}

Dus vervangen van groen vinkje in vraagtopics, topiclisting en tweakers cv door een groenvink

[ Voor 10% gewijzigd door Migrator op 28-06-2016 14:01 ]

[3raser]

Ik zat mij vanmorgen enigszins te ergeren aan de geneste reactieweergave. Diepliggende reacties worden steeds smaller waardoor ze automatisch ook langer worden. Dit komt de leesbaarheid niet ten goede. En dat terwijl naast de reacties een volledig wit vlak beschikbaar is. Ik heb daarom de custom CSS aangeschaft en ben aan de slag gegaan. Wat bleek, het was vrij eenvoudig gefixt. Ik heb er maar 2 regels CSS aan besteed.

code:

#reactieContainer { width:900px; }
.reactie { width:600px; }

Het resultaat

Voor de custom CSS:


Na de custom CSS:

[Zeehond]

Geen idee of mijn CSS nog gebruikt wordt naar het aflopen van de paars wedstrijd, maar er is een nieuwe versie die een kleine fix bevat bij het openen van de tracker. Ik zet hier 1x de code neer (vanwege de lengte), bij updates link ik naar deze reactie.

een kleine impressie

code:

/* versie 2.2*/

/*  --------- alle versie websites----  */

/*mooiere frontpage door veranderen borders 3 blokken*/

#videos li + li {
    margin-left: 10px;
}

.greyTopBorderBlock {
    border-top: 2px solid #041365;
}

#bestBuyGuides ul, #recentlyTested ul {
    border-top: 1px solid #041365;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

#bestBuyGuides li, #recentlyTested li {
    border-bottom: 1px solid #041365;
    height: 75px;
    overflow: hidden;
    padding: 15px 0;
    position: relative;
}

.fpaItemsWrapper {
    border-bottom: 2px solid #041365;
    overflow: auto;
}

.fpaItem {
    border-right: 0px solid #e8eaea;
    float: left;
    overflow: hidden;
    padding: 9px 20px 19px 0;
    position: relative;
    width: 300px;
}

/*paarse uitklap menu's*/
#menu > ul > li.more.dropdown > div > ul {
    border-top: 0;
    background-color: #C6C3EF;
}

/*zij menu*/
#menu .dropdown ul {
    padding-bottom: 5px;
    padding-top: 25px;
    width: 100%;
    background-color: #C6C3EF;
}

/* notificatie, en dm menu */

/* footer*/
.menuHeaderPopup .footer {
    border-top: 1px solid #9CA2E7;
    padding: 10px;
    background-color: #9CA2E7;
}

/*paarse header*/

.menuHeaderPopup .header {
    border-bottom: 1px solid #e6e6e6;
    overflow: hidden;
    padding: 10px;
     background-color: #9CA2E7;
}

/* content notificaties */
.scrollableList .no-items, .scrollableList .listItem {
    display: block;
    line-height: 19px;
    overflow: hidden;
    padding: 12px;
    background-colour: #C6C3EF;
}

/*content dm*/
.scrollArea {
    overflow: auto;
    overflow-x: hidden;
    background-color: #C6C3EF;
}

/*content dm hover*/
.menuHeaderPopup.dmNotificationsPopup .notification.unread:hover {
    background: inherit;
    background-color: #041365;
    color: #ffffff
}

body.fixedHeader .menuHeaderPopup {
    position: fixed;
    z-index: 1000;
    background-color: #C6C3EF;
}

.menuHeaderPopup .quickSetting label {
    color: #000;
    line-height: 23px;
}

/* blauwe hover dm en notificatie*/
.scrollableList .no-items, .scrollableList .listItem:hover {
    display: block;
    line-height: 19px;
    overflow: hidden;
    padding: 12px;
    background-color: #041365;
    color: #ffffff
}

/*tekstkleur in tracker*/
#trackerSettings p {
    border-bottom: 1px solid #545454;
    color: #000;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

/*nodig voor opera */
body, table, td, th, input, button, textarea, select, .bar {
    background-color: #ffffff;
}

/* verbergen boogjes tracker middel weergave*/
#tracker .fakeTop .toggleVisibility::before, #tracker .fakeTop .toggleVisibility::after {
    display: none;
}

/*kleuren forumheaders*/
table.listing .ind {
    background-color: #9CA2E7;
}
table.listing .tags {
    background-color: #9CA2E7;
}
table.listing .replies, #listing table.listing .replies {
    background-color: #9CA2E7;
}
table.listing th.title {
    background-color: #C6C3EF;
}
table.listing .topics {
    background-color: #C6C3EF;
}
table.listing th.timeshort {
    background-color: #C6C3EF;
}

table.listing th, table.listing th a {
    color: #fefefe;
    background-color: #C6C3EF;
}

/*tot hier*/

/*zoekresultaten naar de voorgrond */
.mainSearchSuggest {
    width: 488px;
    overflow: hidden;
    z-index: 300; 
}

/*tracker naar de voorgrond
#trackerHeader {
    overflow: hidden;
    padding: 20px 22px 10px 12px;
    width: 302px;
}

/*paars achtergrond bij openen tracker*/
#layout {
    padding-bottom: 235px;
   background-color: #9CA2E7;
}

/*actieve tablad instellingen kleur*/
#categoryBrowser.sidebar li.active.more {
    background: #041365 !important;
    background-image: linear-gradient(#041365,#041365) !important;
}

/*betere leesbaarheid in de moderatie pop-up*/
#modPopup td, #modPopup td a {
    color: #000;
}

/* Betere leesbaarheid karma grafiek op de profiel pagina*/
#karmaHistoryGraph {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 240px;
    background-color: #C6C3EF;
}

/*twee blokken, zorgt bij lichte layout toch voor een paarse achtergrond*/
#contentArea {
    background: #9CA2E7;
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}

body.hasTracker {
    background-color: #9CA2E7;
}

/*opmaak reageer veld forum*/
form dl dd textarea {
    font-size: 13px;
    height: 120px;
    width: 632px;
    border: 2px solid #041365;;
    border-radius: 10px 10px 10px 10px;
}

/*maakt de forum headers paars */
table.listing {
    background: #9CA2E7;
    background-image: -webkit-linear-gradient(#a1a3a3,#969999);
    background-image: -moz-linear-gradient(#9CA2E7);
    background-image: linear-gradient(#9CA2E7);
}

/*zorgt dat de inhoud van de tabellen paars word*/
table.listing td {
    border-bottom: 1px solid #C6C3EF;
    border-top: 1px solid #C6C3EF;
    background: #C6C3EF;
}

/* zorgt dat de inhoud van de forum tabellen paars wordt */
table.listing td {
    border-bottom: 1px solid #C6C3EF;
    border-top: 1px solid #C6C3EF;
    background: #C6C3EF;
    background-image: -webkit-linear-gradient(#C6C3EF,#C6C3EF);
    background-image: -moz-linear-gradient(#C6C3EF,#C6C3EF);
    background-image: linear-gradient(#C6C3EF,#C6C3EF);
}

/* paarse achtergrond 2 */
body.customColor #searchbar {
    background-color: #9CA2E7;
}

/*haalt de tracker naar de voorgrond */
body.hasTracker #tracker {
    display: block;
   z-index: 3000
}

/* paars forum */
body.customColor #contentArea {
    border-radius: 1px;
    background-color: #9CA2E7;
    border-color: #9CA2E7;
}

/* ------ 1500 tot onbeperkt ----------*/

/* slogan bar */
@media screen and (min-width: 1500px) {
#menubottombar  {
    position: fixed;
    left: 60%;
    margin-right: 40%;
    height: 22px;
    width: 50%;
    background-color: #dedb03;
    transform: translate(-50%, -50%); 
   z-index: 700;
   border-radius: 30px 0px 0px 0px;
}

/* menubar wijzigdt de breete en maakt de hoeken rond */
.fixedHeader #menubar {
     position: fixed;
    margin-left: 15%;
    width: 70%;
    border-radius: 30px 30px 0px 0px;
}

/*bottom */
#bottom {
    width: 70%;
    position: absolute;
    bottom: 0;
    background: #041365;
    left: 15%;
    border-radius: 0px 0px 30px 30px;
}

/* verplaatst de forum tabs*/
.pageTabs > ul {
    position: fixed;
    list-style: none;
    padding: 0;
    height: 28px;
    top: 70px;
    background-color: #041365;
    left: 50%;
    margin-right: 50%;
    width: 70%;
    transform: translate(-50%, -50%);
    z-index: 500;
   border-left: 1px solid #041365;
}
}

/* --- niet van toepassing op grote schermen ----- */
@media screen and (max-width: 1099px) {

/*over actie item in tracker*/
#tracker .trackeritem li:hover {
    border: 0;
    padding: 7px 0;
    background-color: #C6C3EF;
}

/*paarse achtergrond tracker*/
#leftSidebar .sidebarContent, #rightMenuPane {
    position: absolute;
    top: 44px;
    bottom: 0;
    left: 0;
    width: 100%;
    background: 0;
    overflow: auto;
    overflow-x: hidden;
    background-color: #9CA2E7;
}

/*maakt de achtergrond van de linker sidebar paars*/
.site-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #9CA2E7;
    background-image: linear-gradient(#9CA2E7,#9CA2E7);
}

/*paars in mobiele versie tracker*/
#tracker .trackeritem ul li {
    background: #C6C3EF;
    border: 0;
    padding: 5px 0;
}

/*rechter menu paarse achtergrond*/
.site-sidebar ul li {
    background: #C6C3EF;
    border-bottom: 1px solid #C6C3EF;
    border-top: 1px solid #C6C3EF;
    cursor: pointer;
    color: white
}

/*rechter menu tekst 2 blokken*/
.site-sidebar ul li a {
    color: #060000;
    display: block;
    line-height: 19px;
    padding: 10px;
}

.site-sidebar ul li.more > span {
    background: url(../../../g/responsive/nav_arrow.png) no-repeat 10px 15px;
    border-bottom: 1px solid #2b2b2b;
    color: #020000;
    display: block;
    line-height: 1.3em;
    padding: 10px 10px 10px 30px;
}

#menubar {
    width: 100%;
    min-width: 320px;
    border: 0;
    height: 44px;
    border-bottom: 1px solid #041365;
    box-shadow: inset 0 -1px 0 #041365;
    background: #041365;
    background-image: linear-gradient(#041365 ,#041365  68px);
}

/*header sidebar menu's*/
#leftSidebar .toggleButton {
    display: inline-block;
    width: 50%;
    border: 0;
    background: #041365;
    background-image: linear-gradient(#041365,#041365);
    padding: 10px 0;
    height: 44px;
    font-size: 1.2em;
    color: #808282;
    text-align: center;
    position: relative;
    box-sizing: border-box;
}

#rightSidebarMenu > li.more, #rightSidebarMenu > li.icon {
    background: #041365;
    background-image: linear-gradient(#041365,#041365);
    height: 44px;
    display: block;
}

#rightSidebar .profileNavigationActive .username {
    color: #fff;
   background-color: #041365;
}

/*tracker mobiel*/
.smallTracker.trackerRight.trackerVisible #tracker, .smallTracker #trackerContentContainer {
    width: 236px;
    background-color: #C6C3EF;
}

/*activiteit en meer actief*/
.site-sidebar li.more:hover > span {
    padding-left: 30px;
    border-bottom: 1px solid #292c2c;
    color: #ffffff;
}

/*tracker mobiel blauwe tijd*/
#tracker .trackeritem li .time {
    width: 38px;
    color: #041365;
}

/*tracker mobiel zwarte tekst*/
#tracker .trackeritem li a {
    color: #000;
}

#tracker .trackeritem h4, #tracker .trackeritem h4 a {
    margin: 0;
    color: #041365;
}

.site-sidebar li a:hover, .site-sidebar li.more > span {
    display: block;
    font-size: 1.2em;
    line-height: 1.3em;
    padding: 10px;
    color: #ffffff;
}

/*verbergt bij een hover het pijltje*/
.site-sidebar li.more > span {
   display: none;
}

/*maakt het rechter menu paars*/
#rightSidebarMenu > li {
    float: left;
    border: 0;
    background-color: #9CA2E7;
}

/*licht paarse buttons right sidebar */
.site-sidebar li {
    cursor: pointer;
    background: #C6C3EF;
    border-top: 1px solid #373a3a;
    border-bottom: 1px solid #292c2c;
}

/*licht paarse buttons right sidebar */
.site-sidebar li:hover {
    cursor: pointer;
    background: #041365;
    border-top: 1px solid #373a3a;
    border-bottom: 1px solid #292c2c;
    color: #ffffff;
}

/*zwarte tekst right sidebar*/
.site-sidebar li a, .site-sidebar li.more > span {
    display: block;
    font-size: 1.2em;
    line-height: 1.3em;
    padding: 10px;
    color: #000;
}

/*bottiom */
#bottom {
    background: #041365;
   position: absolute;
   bottom: -65px
}

#menubottombar  {
    width: 100%;
    background-color: #dedb03;
}

table.listing th.ind {
    border-top-left-radius: 1px;
    background-color: #9CA2E7;
}

#tracker .fakeTop {
    position: absolute;
    top: 0;
    width: 100%;
    height: 43px;
    border-bottom: 1px solid #041365;
    background: #041365;
    background-image: linear-gradient(#041365,#041365 68px);
}

#menu > ul > li.more.dropdown > div > ul>li:hover {
    border-top: 0;
   background:#041365;
background-image:linear-gradient(#041365,#041365);
border-bottom:1px solid #041365;
}

#menu .dropdown ul>li:hover {
   background:#041365;
background-image:linear-gradient(#041365,#041365);
border-bottom:1px solid #041365;
}
}

/*paarse bottom */
body, #bottom div.hr, #entity, #searchbar, .galleryHeadingContainer, .pageTabsContainer, .notificationsContainer {
    background-color: #9CA2E7;
}

/*maakt voor de leesbaarheid een deel van de frontpage wit */
.mainColumn.frontpage {
    padding-top: 15px;
    padding-right: 20px;
    margin-right: 0;
    border-right: 1px solid #e8eaea;
    background-color: #ffffff;
}

/*maakt de achtergrond kleur van een artikel op de fp wit */
.article {
    font-size: 13px;
    line-height: 1.6;
    overflow: hidden;
    background-color: #ffffff;
   padding: 5px;
}

/* houd de background van reactie op de fp wit */
.reactieBody {
    border: 1px solid #dddede;
    padding: 10px 15px 8px;
    margin-bottom: 10px;
    position: relative;
    background-color: #ffffff;
}

/* wijzigt om somige plaatsen de kleur tekst van grijs naar zwart */
form span.upperlabel, form span.lowerlabel {
    padding-top: 3px;
    font-size: 11px;
    display: block;
    clear: both;
    color: #000;
}

/*wijziging tekstkleur */
.breadcrumb, .breadcrumb a {
    color: #000;
}

/* wijziging tekstkleur */
.bulletSeparatedList, .bulletSeparatedList a {
    color: #000808;
}

/*wijziging tekstkleur */
#title p.mods {
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 700;
    color: #000;
    font-size: 12px;
    line-height: 1.5;
}

#menubottombar .menubottom {
    color: #050404;
}

body.customColor, body.customColor #bottom div.hr {
    background: #9CA2E7;
}

/*zorgt dat bij een muis over de icoontjes blauw blijven*/
#menu>ul>li:hover,#logo:hover{
height:43px;
background:#041365;
background-image:linear-gradient(#041365,#041365);
border-bottom:1px solid #041365;
}

/* ----- vanaf 1100 tot onbeperkt ---- */

@media screen and (min-width: 1100px) {

/*verandert de kleur van de kleine hoekjes van de top bovenin*/
#top {
    background-color: #9CA2E7;
    border-bottom: 1px solid #c3c6c6;
}

/*z-index tracker*/
body.smallTracker.trackerScroll #tracker {
    left: -236px;
    z-index: 0;
}

/*wijzigt de tekstkleur in het instellingen menu van de tracker*/
#trackerSettings td.settingsLabel {
    border-right-width: 0;
    cursor: move;
    color: #000000;
}

/*tracker*/
#trackerContainer {
    color: #000;
}

/*blauwe header tracker*/
#tracker .fakeTop {
    background: #041365;
    background-color: #041365;
    background-image: linear-gradient(to bottom,#041365,#041365 68px);
    border-bottom: 1px solid #333;
    box-shadow: inset 0 -1px 0 #041365;
    height: 63px;
    position: absolute;
    top: 0;
    width: 100%;
}

/*maakt de linkjes van instellingen in de tracker blauw */
#trackerHeader .bulletSeparatedList li span {
    color: #041365;
    cursor: pointer;
}

/*maakt de categorieën in de tracker blauw */
#tracker .trackeritem h4, #tracker .trackeritem h4 a {
    margin: 0;
    color: #041365;
}

/* wijzigt de tekstkleur naar zwart in de tracker */
#tracker .trackeritem li a {
    color: #000;
}

/*wijzigt de tekstkleur van de post datums  in de tracker naar blauw */
#tracker .trackeritem li .time {
    display: inline-block;
    color: #041365;
    width: 33px;
}

/* paarse tracker */
#tracker {
    position: fixed;
    left: -330px;
    top: 0;
    bottom: 0;
    width: 336px;
    background: #C6C3EF;
    padding-top: 68px;
    z-index: 90;
    display: none;
}

/*zorgt dat de hoekjes verborgen zijn bij de uitklapbutton van de tracker*/
#tracker .fakeTop .toggleVisibility::before, #tracker .fakeTop .toggleVisibility::after {
    display: none;
}

#tracker .fakeTop .toggleVisibility {
    width: 30px;
    height: 40px;
    position: absolute;
    bottom: -64px;
    right: -24px;
   background:  #000000 url(../../g/if/v3/framework/tracker_label_2.png) no-repeat;
    cursor: pointer;
}

#tracker .fakeTop .giveFeedback, .smallTracker #tracker .fakeTop .giveFeedback.full {
    display: none;
}

/*zorgt dat bij het openen van het tandwiel menu het profiel paars blijft */
.galleryHeadingContainer {
    background-color: #9CA2E7;
}

body.fixedHeader .compareHeaderPopup {
    position: fixed;
    z-index: 711;
}

#userbar li.icon.selected {
    background: #041365;
    position: relative;
    z-index: 120;
    border: 1px solid #041365;
}

body, #bottom div.hr, #entity, #searchbar, .galleryHeadingContainer, .pageTabsContainer, .notificationsContainer {
    background-color:  #9CA2E7;
}

/* zorgt dat de dm en notificatie buttons in beeld blijven */
#userbar {
    position: fixed;
    right: 15%;
    top: 0;
    border-radius: 0px 60px 0px 0px;
}

.galleryHeadingContainer > div {
    margin: 0 auto;
    width: 90%;
    min-width: 980px;
    padding: 15px 0 10px;
    border-top: 1px solid #9CA2E7;
    background-color: #9CA2E7;
}

#userbar li.icon {
    width: 32px;
    position: relative;
    padding: 0 !important;
    border-radius: 0px 60px 0px 0px;
}

/* menu bar wijzigd kleur, hoogte. Zet de menubalk op de goede hoogte. */
#menubar {
    background: #041365;
    background-image: linear-gradient(#041365,#041365 68px);
    z-index: 610;
    border-bottom: 1px solid #041365;
    box-shadow: inset 0 -1px 0 #041365;
    height: 63px;
   margin-top: 0px;
}

/*zorgt dat de achtergrond blauw blijft als meer is geselecteerd */
#menu > ul > li.more.dropdown {
    background: #f9fafa;
    border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
    background-color: #041365;
}

#menu .dropdown ul>li:hover {
   background:#041365;
background-image:linear-gradient(#041365,#041365);
border-bottom:1px solid #041365;
}

/*zorgt ervoor dat bij een mouseover in de menu bar de knoppen blauw blijven */
#menu > ul > li > a, #menu > ul > li.more > span {
    display: block;
    height: 44px;
    padding: 0 9px;
    color: #e0e2e2;
    font-family: "Roboto Condensed",arial,helvetica,"Liberation Sans",sans-serif;
    font-size: 15px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.1);
    text-decoration: none;
    background-color: #041365;
}

/* helpt bij het correct positioneren van het logo */
/* verplaatst het true logo meer naar onder */
/* verplaatst de searchbar */
#search {
    padding-top: 42px;
}

/* borders bij de searchbar */
.keywordSearch input.text {
    display: block;
    height: 100%;
    width: 100%;
    border: 0;
    box-sizing: border-box;
    border: 1px solid #000;
}

.keywordSearch input.submit {
    position: absolute;
    top: 0;
    right: 0;
    background: #fff url(../../g/if/v3/framework/menu_icons_v2.png) no-repeat -48px -106px;
    width: 35px;
    height: 100%;
    border: 1px solid #000;
    border-left: 1px solid #e2e3e3;
    text-indent: -200px;
    cursor: pointer;
}

/* zet de forum tabs naar de voorgrond */
#forumheading {
    position: relative;
    z-index: 100;
}

/*maakt het actieve tablad blauw */
.pageTabs li.active {
    height: 30px;
    margin-top: 0;
    border-color: #041365;
}

.pageTabs li.active a, .pageTabs li.active a:hover {
    padding-top: 1px;
    color: #b9133c;
    background-color: #041365;
    border: #041365;
}

/* maakt de tabladen blauw en wijzigt de hoogte */
.pageTabs li {
    float: right;
    height: 20px;
    margin-top: 1px;
    margin-right: 0px;
    border: 1px solid  #041365;
    border-bottom: 0;
    background-color: #041365;
    background-image: linear-gradient( #041365, #041365);
}

/*Maakt de tekst in de tabladen geel */
.pageTabs li a {
    display: block;
    padding: 0 17px;
    margin: 0;
    line-height: 30px;
    text-decoration: none;
    color: #dedb03;
}

/* kleurt reset laatste bezoektijd wit */
.pageTabs li.link a {
    color: #fff;
    padding: 0;
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #041365;
}

/* verbergt de tekst tussen de forra */
.channelHeader h2 {
    display: none;
}

/* verbergt de icoontjes tussen de forra */
.thumb.category {
    display: none;
}

/*verplaatst het dropdown menu bij profiel iets naar beneden */
#userbar .dropdown > div {
    width: 100%;
    min-width: 140px;
    top: 56px;
}

/*verplaatst het dropdown menu bij meer iets naar beneden*/
#menu .dropdown ul {
    padding-bottom: 5px;
    padding-top: 25px;
    width: 100%;
}

#menu .dropdown > div {
    display: block;
    box-shadow: 1px 3px 4px rgba(0,0,0,0.25);
    position: absolute;
    top: 35px;
    left: -1px;
    z-index: 99;
}

/* wanneer meer en profiel dropdown geselecteerd zijn zorgt dit ervoor dat de tekst wit blijft */
#menu > ul > li.more.dropdown > span {
    color: #ffffff;
    text-shadow: none;
}

/*maar meer en username breeder */
#menu > ul > li > a, #menu > ul > li.more > span {
    display: block;
    height: 44px;
    padding: 0 9px;
    color: #e0e2e2;
    font-family: "Roboto Condensed",arial,helvetica,"Liberation Sans",sans-serif;
    font-size: 15px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.1);
    text-decoration: none;
    background-color: #041365;
}

#userbar li.icon a {
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: #041365; 
    text-indent: -200px;
    overflow: hidden;
    cursor: pointer;
    margin-top: 5px;
    border-radius: 0px 60px 0px 0px;
}

/*zorgt dat de uitgeklapte notificatie menu's goed in beeld blijven */
.notificationsPopup {
    width: 320px;
    border-color: #ccc;
    border-top: 0;
    border-top-right-radius: 0;
    border-right: 0;
    z-index: 711;
   border-color: #9CA2E7;
}
}

/* ---vanaf 500 tot onbeperkt -----*/
@media screen and (min-width: 500px) {

/*zorgt voor wat ruimte tussen de content en de rand*/
table, td, th, input, button, textarea, select, .bar {
    background-color: #ffffff;
    padding: 5px;
}

/*haalt het dropdown menu bij de zoekbalk naar voor*/
.fancySelect ul {
    display: none;
    left: -1px;
    position: absolute;
    top: -5px;
    width: 125px;
    z-index: 1000;
}

/*blauwe achtergrond hover en active acties navigatie menu*/
#menu:active > ul > li.last {
    padding-right: 1px;
    background-color: #041365;
}

#menu:hover > ul > li.last {
    padding-right: 1px;
    background-color: #041365;
}

/*blauwe achtergrond bij hover actie*/
#logo:hover, #menu > ul > li:hover:not(.selected) {
    background: #041365;
    border-bottom: 1px solid #041365;
    height: 43px;
}

/*haalt de menu's naar voren*/
body.fixedHeader .menuHeaderPopup {
    position: fixed;
    z-index: 1000;
}

/*tot hier*/
}

/* -----1100 - 1500 ----- */

/* slogan bar */
@media screen and (min-width: 1100px) and (max-width: 1499px) {
     #menubottombar  {
    position: fixed;
    left: 62%;
    margin-right: 40%;
    height: 22px;
    width: 66%;
    background-color: #dedb03;
    transform: translate(-50%, -50%); 
   z-index: 700;
   border-radius: 30px 0px 0px 0px;
}

/* menubar wijzigdt de breete en maakt de hoeken rond */
.fixedHeader #menubar {
     position: fixed;
    margin-left: 8%;
    width: 87%;
    border-radius: 30px 30px 0px 0px;
}

/*bottiom */
#bottom {
    width: 87%;
    position: absolute;
    bottom: 0;
    background: #041365;
    left: 8%;
    border-radius: 0px 0px 30px 30px;
}

.pageTabs > ul {
    position: fixed;
    list-style: none;
    padding: 0;
    height: 28px;
    top: 70px;
    background-color: #041365;
    left: 48%;
    margin-right: 50%;
    width: 87%;
    transform: translate(-46%, -50%);
    z-index: 500;
    border-left: 0px solid #041365;
    border-radius: 0px 0px 0px 20px;
}

/* links in de border */
#ticker {
    height: 42px;
    padding-top: 29px;
    border-bottom: 1px solid #808080;
    width: 90%;
}

#about {
    height: 149px;
    padding-top: 22px;
    position: relative;
    width: 95%;
}
}

/* -------ongeveer tablet formaat -------- */

@media screen and (min-width: 500px) and (max-width: 1099px) {
body.hasTracker #tracker {
    display: block;
    z-index: 3000;
    background-color: #C6C3EF;
}

#trackerHeader .bulletSeparatedList li span {
    color: #041365;
    cursor: pointer;
}

#trackerContainer {
    color: #000;
}
}

/* ------- mobiele versie tweakers --------- */
/*haalt boogjes weg*/
#menubottombar::before {
    display: none;
}

/*haalt boogjes weg*/
#menubottombar::after {
    display: none;
}

/*dm en notificatie buttons telefoons*/
@media screen and (max-width: 500px) {

/* aanvullende code mobiel dm en notificaties */
.header a, #rightSidebar .menuHeaderPopup .footer a {
    padding: 10px;
}


/*achtergrond tekst*/
#rightSidebar .menuHeaderPopup .header h3 {
    font-size: 14px;
    background-color: #9CA2E7;
}

/* 2 blokken maakt de tekstkleur in het producten menu zwart in plaats van grijs*/
#rightSidebar .selectedProductsPopup li a.itemname {
    float: left;
    width: 150px;
    padding: 0;
    color: #000;
}

/*producten pop-up*/
.selectedProductsPopup .popupContent, .compareHeaderPopup .popupContent {
    padding: 0;
    background-color: #C6C3EF;
}

/*producten-pop-up header*/
#rightSidebar .compareHeaderPopup .header, #rightSidebar .notificationsPopup .header {
    border-bottom: 1px solid #292c2c;
    background-color: #9CA2E7;
}

/*kleur notificatie menu*/
#rightSidebar .menuHeaderPopup .listItem, #rightSidebar .menuHeaderPopup .listItem:hover {
    background: #C6C3EF;
    color: #000;
}

/*leesbaarheid producten menu*/
.selectedProductsPopup .noProducts {
    line-height: 2;
    text-align: center;
    color: #000;
}

/*leesbaarheiod linkjes in notificatie menu's*/
#rightSidebar .menuHeaderPopup a {
    color: #000;
}

/*video koppelingen*/
#videos li {
    border-left: 0;
    border-right: 10px solid transparent;
    width: 45%;
}
}

/*zorgt ervoor dat de username niet overlapt wordt bij het openen van de tracker*/
#menu .sitename + ul {
    height: 44px;
    margin-left: 150px;
    position: relative;
    width: 500px;
    z-index: 95;
}

[Zeror]

Tip @ hierboven: Zet je code tussen quote tags dan is je post niet zo lang (wordt dan ingeklapt).

[Zeehond]

Zeror schreef op zaterdag 10 september 2016 @ 00:19:
Tip @ hierboven: Zet je code tussen quote tags dan is je post niet zo lang (wordt dan ingeklapt).

Thanks , slimme oplossing

[LodanMax]

Simpele blauwe header, omdat ik het wat rustiger er uit vind zien dan het schreeuwerige rood.





Huidige instelling:

Cascading Stylesheet:

#menubar
{
background:#0B1E36;
background-color:#0B1E36;
background-image:-webkit-linear-gradient(top,#0B1E36,#7BC7EF 68px);
background-image:-moz-linear-gradient(#0B1E36,#7BC7EF 68px);
background-image:linear-gradient(to bottom,#0B1E36,#7BC7EF 68px);
border-bottom:1px solid #333;
box-shadow:inset 0 -1px 0 #333;
height:44px;
left:0;
position:relative;
z-index:110
}

#logo:hover,#menu>ul>li:not(.selected):hover
{
background:#60a0c3;
background-color:#60a0c3;
background-image:-webkit-linear-gradient(top,#1c3852,#60a0c368px);
background-image:-moz-linear-gradient(#1c3852,#60a0c3 68px);
background-image:linear-gradient(to bottom,#1c3852,#60a0c3 68px);
border-bottom:1px solid #333;
border-bottom:1px solid #333;
height:43px
}

#menu>ul>li.more.dropdown
{
background:#fafafa;border-left:1px solid #ccc
}

h1,h2,h1 a,h2 a{
color:#0B1E36
}

.dropdown ul li:hover,#menu .dropdown ul li:hover,.pageTabs .more>ul li:hover
{
background:#2F5471;
background-image:-webkit-linear-gradient(#2F5471,#3A6483);
background-image:-moz-linear-gradient(#2F5471,#3A6483);
background-image:linear-gradient(#2F5471,#3A6483)
}

#categoryBrowser li.active.more
{
background:url(../../../g/if/categories/arrows.png) no-repeat 212px -18px,linear-gradient(#2F5471,#3A6483)
}

#categoryBrowser.sidebar li.active.more
{
background:url(../../../g/if/categories/arrows.png) no-repeat 572px -18px,linear-gradient(#2F5471,#3A6483) repeat!important
}


@media only screen and (min-width: 760px) {
#reactieContainer
{
width:900px;
}

.reactie
{
width:600px;
}

.message .poster
{
    width: 150px;
}
}

[ Voor 30% gewijzigd door LodanMax op 23-10-2016 13:37 . Reden: CSS bijgewerkt (23-10-2016) ]

[Hahn]

LodanMax schreef op zaterdag 24 september 2016 @ 11:53:
Bezig met de kleuren wat te veranderen, maar ik kan deze menubar/sidebar niet terugvinden in de CSS.
Heeft iemand enig idee onder welke kop deze staat?

Heb al gezocht naar Gradients, daar staan er 8 van in, maar die gaan voornamelijk over de blauwe boven (bij mij blauw althans)

[afbeelding]


Huidige instelling:

Cascading Stylesheet:

#menubar
{
background:#0B1E36;
background-color:#0B1E36;
background-image:-webkit-linear-gradient(top,#0B1E36,#7BC7EF 68px);
background-image:-moz-linear-gradient(#0B1E36,#7BC7EF 68px);
background-image:linear-gradient(to bottom,#0B1E36,#7BC7EF 68px);
border-bottom:1px solid #333;
box-shadow:inset 0 -1px 0 #000000;
height:44px;
left:0;
position:relative;
z-index:110
}

#logo:hover,#menu>ul>li:not(.selected):hover
{
background:#60a0c3;
background-color:#60a0c3;
background-image:-webkit-linear-gradient(top,#1c3852,#60a0c368px);
background-image:-moz-linear-gradient(#1c3852,#60a0c3 68px);
background-image:linear-gradient(to bottom,#1c3852,#60a0c3 68px);
border-bottom:1px solid #333;
border-bottom:1px solid #000000;
height:43px
}

h1,h2,h1 a,h2 a{
color:#0B1E36
}

.dropdown ul li:hover,#menu .dropdown ul li:hover,.pageTabs .more>ul li:hover
{
background:#2F5471;
background-image:-webkit-linear-gradient(#2F5471,#3A6483);
background-image:-moz-linear-gradient(#2F5471,#3A6483);
background-image:linear-gradient(#2F5471,#3A6483)
}

Makkelijk te achterhalen met inspect element:

Cascading Stylesheet:

#categoryBrowser li.active.more {
    background: url(../../../g/if/categories/arrows.png) no-repeat 212px -18px,linear-gradient(#c02b50,#b9143c);
}

[ Voor 3% gewijzigd door Hahn op 24-09-2016 11:56 ]

[LodanMax]

Hahn schreef op zaterdag 24 september 2016 @ 11:55:
[...]

Makkelijk te achterhalen met inspect element:

Cascading Stylesheet:

#categoryBrowser li.active.more {
    background: url(../../../g/if/categories/arrows.png) no-repeat 212px -18px,linear-gradient(#c02b50,#b9143c);
}

Je zou denken van wel, maar in de standaard CSS vindt hij deze niet terug, noch met jouw onderdeel, aangepase kleuren, past hij deze ook niet aan.

[Hahn]

LodanMax schreef op zaterdag 24 september 2016 @ 12:00:
[...]

Je zou denken van wel, maar in de standaard CSS vindt hij deze niet terug, noch met jouw onderdeel, aangepase kleuren, past hij deze ook niet aan.

Dat komt omdat 'ie niet in de standaard CSS zit, maar hier in: https://tweakimg.net/x/min/grade_md.css

[LodanMax]

Hahn schreef op zaterdag 24 september 2016 @ 12:01:
[...]

Dat komt omdat 'ie niet in de standaard CSS zit, maar hier in: https://tweakimg.net/x/min/grade_md.css

Precies wat ik nodig had, thanks!

[LodanMax]

Heb wat bijgewerkt aan mijn custom CSS, gecombineerd van anderen met enkele kleine tweaks na een Abo-dag wat info te hebben opgedaan.

Met de @media tag (complete regel, sluitend met extra bracket ofcourse) kun je de custom CSS gebruiken op je desktop, zonder dat je hier mobiel hinder ondervindt.

Cascading Stylesheet:

@media only screen and (min-width: 760px) {
#reactieContainer
{
width:900px;
}

.reactie
{
width:600px;
}

.message .poster {
    width: 150px;
}
}

Zorgt ervoor dat bepaalde desktop-tweaks niet meteen doorgevoerd worden op mobiel.

handig voor nieuwe CSS bouwers

[Zeehond]

Vandaag de tijd genomen om aan mijn custom stylesheet te werken en bij deze een nieuwe update. Ook de afbeeldingen van de stylesheet heb ik deze keer eens vernieuwd. gallery: -zeehond

Nieuw in deze versie: Ongelezen notificaties hebben een geel kleurtje in het notificatie menu en wat foutjes gefixed.

code:

/* versie 2.3*/

/*  --------- alle versies website----  */

/*nieuwe notificaties*/
.menuHeaderPopup .notification.unread {
    background: #dedb03;
    color: black;
}

.menuHeaderPopup .notification.unread:hover {
    background: #dedb03;
    color: black;
}

/*mooiere frontpage door veranderen borders 3 blokken*/

#videos li + li {
    margin-left: 10px;
}

.greyTopBorderBlock {
    border-top: 2px solid #041365;
}

#bestBuyGuides ul, #recentlyTested ul {
    border-top: 1px solid #041365;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

#bestBuyGuides li, #recentlyTested li {
    border-bottom: 1px solid #041365;
    height: 75px;
    overflow: hidden;
    padding: 15px 0;
    position: relative;
}

.fpaItemsWrapper {
    border-bottom: 2px solid #041365;
    overflow: auto;
}

.fpaItem {
    border-right: 0px solid #e8eaea;
    float: left;
    overflow: hidden;
    padding: 9px 20px 19px 0;
    position: relative;
    width: 300px;
}

/*paarse uitklap menu's*/
#menu > ul > li.more.dropdown > div > ul {
    border-top: 0;
    background-color: #C6C3EF;
}

/*zij menu*/
#menu .dropdown ul {
    padding-bottom: 5px;
    padding-top: 25px;
    width: 100%;
    background-color: #C6C3EF;
}

/* notificatie, en dm menu */

/* footer*/
.menuHeaderPopup .footer {
    border-top: 1px solid #9CA2E7;
    padding: 10px;
    background-color: #9CA2E7;
}

/*paarse header*/

.menuHeaderPopup .header {
    border-bottom: 1px solid #e6e6e6;
    overflow: hidden;
    padding: 10px;
     background-color: #9CA2E7;
}

/* content notificaties */
.scrollableList .no-items, .scrollableList .listItem {
    display: block;
    line-height: 19px;
    overflow: hidden;
    padding: 12px;
    background-colour: #C6C3EF;
}

/*content dm*/
.scrollArea {
    overflow: auto;
    overflow-x: hidden;
    background-color: #C6C3EF;
}

/*content dm hover*/
.menuHeaderPopup.dmNotificationsPopup .notification.unread:hover {
    background: inherit;
    background-color: #041365;
    color: #ffffff
}

body.fixedHeader .menuHeaderPopup {
    position: fixed;
    z-index: 1000;
    background-color: #C6C3EF;
}

.menuHeaderPopup .quickSetting label {
    color: #000;
    line-height: 23px;
}

/* blauwe hover dm en notificatie*/
.scrollableList .no-items, .scrollableList .listItem:hover {
    display: block;
    line-height: 19px;
    overflow: hidden;
    padding: 12px;
    background-color: #041365;
    color: #ffffff
}

/*tekstkleur in tracker*/
#trackerSettings p {
    border-bottom: 1px solid #545454;
    color: #000;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

/*nodig voor opera */
body, table, td, th, input, button, textarea, select, .bar {
    background-color: #ffffff;
}

/* verbergen boogjes tracker middel weergave*/
#tracker .fakeTop .toggleVisibility::before, #tracker .fakeTop .toggleVisibility::after {
    display: none;
}

/*kleuren forumheaders*/
table.listing .ind {
    background-color: #9CA2E7;
}
table.listing .tags {
    background-color: #9CA2E7;
}
table.listing .replies, #listing table.listing .replies {
    background-color: #9CA2E7;
}
table.listing th.title {
    background-color: #C6C3EF;
}
table.listing .topics {
    background-color: #C6C3EF;
}
table.listing th.timeshort {
    background-color: #C6C3EF;
}

table.listing th, table.listing th a {
    color: #fefefe;
    background-color: #C6C3EF;
}

/*tot hier*/

/*zoekresultaten naar de voorgrond */
.mainSearchSuggest {
    width: 488px;
    overflow: hidden;
    z-index: 300; 
}

/*tracker naar de voorgrond
#trackerHeader {
    overflow: hidden;
    padding: 20px 22px 10px 12px;
    width: 302px;
}

/*paars achtergrond bij openen tracker*/
#layout {
    padding-bottom: 235px;
   background-color: #9CA2E7;
}

/*actieve tablad instellingen kleur*/
#categoryBrowser.sidebar li.active.more {
    background: #041365 !important;
    background-image: linear-gradient(#041365,#041365) !important;
}

/*betere leesbaarheid in de moderatie pop-up*/
#modPopup td, #modPopup td a {
    color: #000;
}

/* Betere leesbaarheid karma grafiek op de profiel pagina*/
#karmaHistoryGraph {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 240px;
    background-color: #C6C3EF;
}

/*twee blokken, zorgt bij lichte layout toch voor een paarse achtergrond*/
#contentArea {
    background: #9CA2E7;
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}

body.hasTracker {
    background-color: #9CA2E7;
}

/*opmaak reageer veld forum*/
form dl dd textarea {
    font-size: 13px;
    height: 120px;
    width: 632px;
    border: 2px solid #041365;;
    border-radius: 10px 10px 10px 10px;
}

/*maakt de forum headers paars */
table.listing {
    background: #9CA2E7;
    background-image: -webkit-linear-gradient(#a1a3a3,#969999);
    background-image: -moz-linear-gradient(#9CA2E7);
    background-image: linear-gradient(#9CA2E7);
}

/*zorgt dat de inhoud van de tabellen paars word*/
table.listing td {
    border-bottom: 1px solid #C6C3EF;
    border-top: 1px solid #C6C3EF;
    background: #C6C3EF;
}

/* zorgt dat de inhoud van de forum tabellen paars wordt */
table.listing td {
    border-bottom: 1px solid #C6C3EF;
    border-top: 1px solid #C6C3EF;
    background: #C6C3EF;
    background-image: -webkit-linear-gradient(#C6C3EF,#C6C3EF);
    background-image: -moz-linear-gradient(#C6C3EF,#C6C3EF);
    background-image: linear-gradient(#C6C3EF,#C6C3EF);
}

/* paarse achtergrond 2 */
body.customColor #searchbar {
    background-color: #9CA2E7;
}

/*haalt de tracker naar de voorgrond */
body.hasTracker #tracker {
    display: block;
   z-index: 3000
}

/* paars forum */
body.customColor #contentArea {
    border-radius: 1px;
    background-color: #9CA2E7;
    border-color: #9CA2E7;
}

/* ------ 1500 tot onbeperkt ----------*/

/* slogan bar */
@media screen and (min-width: 1500px) {
#menubottombar  {
    position: fixed;
    left: 60%;
    margin-right: 40%;
    height: 22px;
    width: 50%;
    background-color: #dedb03;
    transform: translate(-50%, -50%); 
   z-index: 700;
   border-radius: 30px 0px 0px 0px;
}

/* menubar wijzigdt de breete en maakt de hoeken rond */
.fixedHeader #menubar {
     position: fixed;
    margin-left: 15%;
    width: 70%;
    border-radius: 30px 30px 0px 0px;
}

/*bottom */
#bottom {
    width: 70%;
    position: absolute;
    bottom: 0;
    background: #041365;
    left: 15%;
    border-radius: 0px 0px 30px 30px;
}

/* verplaatst de forum tabs*/
.pageTabs > ul {
    position: fixed;
    list-style: none;
    padding: 0;
    height: 28px;
    top: 70px;
    background-color: #041365;
    left: 50%;
    margin-right: 50%;
    width: 70%;
    transform: translate(-50%, -50%);
    z-index: 500;
   border-left: 1px solid #041365;
}
}

/* --- niet van toepassing op grote schermen ----- */
@media screen and (max-width: 1099px) {

/*over actie item in tracker*/
#tracker .trackeritem li:hover {
    border: 0;
    padding: 7px 0;
    background-color: #C6C3EF;
}

/*paarse achtergrond tracker*/
#leftSidebar .sidebarContent, #rightMenuPane {
    position: absolute;
    top: 44px;
    bottom: 0;
    left: 0;
    width: 100%;
    background: 0;
    overflow: auto;
    overflow-x: hidden;
    background-color: #9CA2E7;
}

/*maakt de achtergrond van de linker sidebar paars*/
.site-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #9CA2E7;
    background-image: linear-gradient(#9CA2E7,#9CA2E7);
}

/*paars in mobiele versie tracker*/
#tracker .trackeritem ul li {
    background: #C6C3EF;
    border: 0;
    padding: 5px 0;
}

/*rechter menu paarse achtergrond*/
.site-sidebar ul li {
    background: #C6C3EF;
    border-bottom: 1px solid #C6C3EF;
    border-top: 1px solid #C6C3EF;
    cursor: pointer;
    color: white
}

/*rechter menu tekst 2 blokken*/
.site-sidebar ul li a {
    color: #060000;
    display: block;
    line-height: 19px;
    padding: 10px;
}

.site-sidebar ul li.more > span {
    background: url(../../../g/responsive/nav_arrow.png) no-repeat 10px 15px;
    border-bottom: 1px solid #2b2b2b;
    color: #020000;
    display: block;
    line-height: 1.3em;
    padding: 10px 10px 10px 30px;
}

#menubar {
    width: 100%;
    min-width: 320px;
    border: 0;
    height: 44px;
    border-bottom: 1px solid #041365;
    box-shadow: inset 0 -1px 0 #041365;
    background: #041365;
    background-image: linear-gradient(#041365 ,#041365  68px);
}

/*header sidebar menu's*/
#leftSidebar .toggleButton {
    display: inline-block;
    width: 50%;
    border: 0;
    background: #041365;
    background-image: linear-gradient(#041365,#041365);
    padding: 10px 0;
    height: 44px;
    font-size: 1.2em;
    color: #808282;
    text-align: center;
    position: relative;
    box-sizing: border-box;
}

#rightSidebarMenu > li.more, #rightSidebarMenu > li.icon {
    background: #041365;
    background-image: linear-gradient(#041365,#041365);
    height: 44px;
    display: block;
}

#rightSidebar .profileNavigationActive .username {
    color: #fff;
   background-color: #041365;
}

/*tracker mobiel*/
.smallTracker.trackerRight.trackerVisible #tracker, .smallTracker #trackerContentContainer {
    width: 236px;
    background-color: #C6C3EF;
}

/*activiteit en meer actief*/
.site-sidebar li.more:hover > span {
    padding-left: 30px;
    border-bottom: 1px solid #292c2c;
    color: #ffffff;
}

/*tracker mobiel blauwe tijd*/
#tracker .trackeritem li .time {
    width: 38px;
    color: #041365;
}

/*tracker mobiel zwarte tekst*/
#tracker .trackeritem li a {
    color: #000;
}

#tracker .trackeritem h4, #tracker .trackeritem h4 a {
    margin: 0;
    color: #041365;
}

.site-sidebar li a:hover, .site-sidebar li.more > span {
    display: block;
    font-size: 1.2em;
    line-height: 1.3em;
    padding: 10px;
    color: #ffffff;
}

/*verbergt bij een hover het pijltje*/
.site-sidebar li.more > span {
   display: none;
}

/*maakt het rechter menu paars*/
#rightSidebarMenu > li {
    float: left;
    border: 0;
    background-color: #9CA2E7;
}

/*licht paarse buttons right sidebar */
.site-sidebar li {
    cursor: pointer;
    background: #C6C3EF;
    border-top: 1px solid #373a3a;
    border-bottom: 1px solid #292c2c;
}

/*licht paarse buttons right sidebar */
.site-sidebar li:hover {
    cursor: pointer;
    background: #041365;
    border-top: 1px solid #373a3a;
    border-bottom: 1px solid #292c2c;
    color: #ffffff;
}

/*zwarte tekst right sidebar*/
.site-sidebar li a, .site-sidebar li.more > span {
    display: block;
    font-size: 1.2em;
    line-height: 1.3em;
    padding: 10px;
    color: #000;
}

/*bottiom */
#bottom {
    background: #041365;
   position: absolute;
   bottom: -65px
}

#menubottombar  {
    width: 100%;
    background-color: #dedb03;
}

table.listing th.ind {
    border-top-left-radius: 1px;
    background-color: #9CA2E7;
}

#tracker .fakeTop {
    position: absolute;
    top: 0;
    width: 100%;
    height: 43px;
    border-bottom: 1px solid #041365;
    background: #041365;
    background-image: linear-gradient(#041365,#041365 68px);
}

#menu > ul > li.more.dropdown > div > ul>li:hover {
    border-top: 0;
   background:#041365;
background-image:linear-gradient(#041365,#041365);
border-bottom:1px solid #041365;
}

#menu .dropdown ul>li:hover {
   background:#041365;
background-image:linear-gradient(#041365,#041365);
border-bottom:1px solid #041365;
}
}

/*paarse bottom */
body, #bottom div.hr, #entity, #searchbar, .galleryHeadingContainer, .pageTabsContainer, .notificationsContainer {
    background-color: #9CA2E7;
}

/*maakt voor de leesbaarheid een deel van de frontpage wit */
.mainColumn.frontpage {
    padding-top: 15px;
    padding-right: 20px;
    margin-right: 0;
    border-right: 1px solid #e8eaea;
    background-color: #ffffff;
}

/*maakt de achtergrond kleur van een artikel op de fp wit */
.article {
    font-size: 13px;
    line-height: 1.6;
    overflow: hidden;
    background-color: #ffffff;
   padding: 5px;
}

/* houd de background van reactie op de fp wit */
.reactieBody {
    border: 1px solid #dddede;
    padding: 10px 15px 8px;
    margin-bottom: 10px;
    position: relative;
    background-color: #ffffff;
}

/* wijzigt om somige plaatsen de kleur tekst van grijs naar zwart */
form span.upperlabel, form span.lowerlabel {
    padding-top: 3px;
    font-size: 11px;
    display: block;
    clear: both;
    color: #000;
}

/*wijziging tekstkleur */
.breadcrumb, .breadcrumb a {
    color: #000;
}

/* wijziging tekstkleur */
.bulletSeparatedList, .bulletSeparatedList a {
    color: #000808;
}

/*wijziging tekstkleur */
#title p.mods {
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 700;
    color: #000;
    font-size: 12px;
    line-height: 1.5;
}

#menubottombar .menubottom {
    color: #050404;
}

body.customColor, body.customColor #bottom div.hr {
    background: #9CA2E7;
}

/*zorgt dat bij een muis over de icoontjes blauw blijven*/
#menu>ul>li:hover,#logo:hover{
height:43px;
background:#041365;
background-image:linear-gradient(#041365,#041365);
border-bottom:1px solid #041365;
}

/* ----- vanaf 1100 tot onbeperkt ---- */

@media screen and (min-width: 1100px) {

/*verandert de kleur van de kleine hoekjes van de top bovenin*/
#top {
    background-color: #9CA2E7;
    border-bottom: 1px solid #c3c6c6;
}

/*z-index tracker*/
body.smallTracker.trackerScroll #tracker {
    left: -236px;
    z-index: 0;
}

/*wijzigt de tekstkleur in het instellingen menu van de tracker*/
#trackerSettings td.settingsLabel {
    border-right-width: 0;
    cursor: move;
    color: #000000;
}

/*tracker*/
#trackerContainer {
    color: #000;
}

/*blauwe header tracker*/
#tracker .fakeTop {
    background: #041365;
    background-color: #041365;
    background-image: linear-gradient(to bottom,#041365,#041365 68px);
    border-bottom: 1px solid #333;
    box-shadow: inset 0 -1px 0 #041365;
    height: 63px;
    position: absolute;
    top: 0;
    width: 100%;
}

/*maakt de linkjes van instellingen in de tracker blauw */
#trackerHeader .bulletSeparatedList li span {
    color: #041365;
    cursor: pointer;
}

/*maakt de categorieën in de tracker blauw */
#tracker .trackeritem h4, #tracker .trackeritem h4 a {
    margin: 0;
    color: #041365;
}

/* wijzigt de tekstkleur naar zwart in de tracker */
#tracker .trackeritem li a {
    color: #000;
}

/*wijzigt de tekstkleur van de post datums  in de tracker naar blauw */
#tracker .trackeritem li .time {
    display: inline-block;
    color: #041365;
    width: 33px;
}

/* paarse tracker */
#tracker {
    position: fixed;
    left: -330px;
    top: 0;
    bottom: 0;
    width: 336px;
    background: #C6C3EF;
    padding-top: 68px;
    z-index: 90;
    display: none;
}

/*zorgt dat de hoekjes verborgen zijn bij de uitklapbutton van de tracker*/
#tracker .fakeTop .toggleVisibility::before, #tracker .fakeTop .toggleVisibility::after {
    display: none;
}

#tracker .fakeTop .toggleVisibility {
    width: 30px;
    height: 40px;
    position: absolute;
    bottom: -64px;
    right: -24px;
   background:  #000000 url(../../g/if/v3/framework/tracker_label_2.png) no-repeat;
    cursor: pointer;
}

#tracker .fakeTop .giveFeedback, .smallTracker #tracker .fakeTop .giveFeedback.full {
    display: none;
}

/*zorgt dat bij het openen van het tandwiel menu het profiel paars blijft */
.galleryHeadingContainer {
    background-color: #9CA2E7;
}

body.fixedHeader .compareHeaderPopup {
    position: fixed;
    z-index: 711;
}

#userbar li.icon.selected {
    background: #041365;
    position: relative;
    z-index: 120;
    border: 1px solid #041365;
}

body, #bottom div.hr, #entity, #searchbar, .galleryHeadingContainer, .pageTabsContainer, .notificationsContainer {
    background-color:  #9CA2E7;
}

/* zorgt dat de dm en notificatie buttons in beeld blijven */
#userbar {
    position: fixed;
    right: 15%;
    top: 0;
    border-radius: 0px 60px 0px 0px;
}

.galleryHeadingContainer > div {
    margin: 0 auto;
    width: 90%;
    min-width: 980px;
    padding: 15px 0 10px;
    border-top: 1px solid #9CA2E7;
    background-color: #9CA2E7;
}

#userbar li.icon {
    width: 32px;
    position: relative;
    padding: 0 !important;
    border-radius: 0px 60px 0px 0px;
}

/* menu bar wijzigd kleur, hoogte. Zet de menubalk op de goede hoogte. */
#menubar {
    background: #041365;
    background-image: linear-gradient(#041365,#041365 68px);
    z-index: 610;
    border-bottom: 1px solid #041365;
    box-shadow: inset 0 -1px 0 #041365;
    height: 63px;
   margin-top: 0px;
}

/*zorgt dat de achtergrond blauw blijft als meer is geselecteerd */
#menu > ul > li.more.dropdown {
    background: #f9fafa;
    border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
    background-color: #041365;
}

#menu .dropdown ul>li:hover {
   background:#041365;
background-image:linear-gradient(#041365,#041365);
border-bottom:1px solid #041365;
}

/*zorgt ervoor dat bij een mouseover in de menu bar de knoppen blauw blijven */
#menu > ul > li > a, #menu > ul > li.more > span {
    display: block;
    height: 44px;
    padding: 0 9px;
    color: #e0e2e2;
    font-family: "Roboto Condensed",arial,helvetica,"Liberation Sans",sans-serif;
    font-size: 15px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.1);
    text-decoration: none;
    background-color: #041365;
}

/* helpt bij het correct positioneren van het logo */
/* verplaatst het true logo meer naar onder */
/* verplaatst de searchbar */
#search {
    padding-top: 42px;
}

/* borders bij de searchbar */
.keywordSearch input.text {
    display: block;
    height: 100%;
    width: 100%;
    border: 0;
    box-sizing: border-box;
    border: 1px solid #000;
}

.keywordSearch input.submit {
    position: absolute;
    top: 0;
    right: 0;
    background: #fff url(../../g/if/v3/framework/menu_icons_v2.png) no-repeat -48px -106px;
    width: 35px;
    height: 100%;
    border: 1px solid #000;
    border-left: 1px solid #e2e3e3;
    text-indent: -200px;
    cursor: pointer;
}

/* zet de forum tabs naar de voorgrond */
#forumheading {
    position: relative;
    z-index: 100;
}

/*maakt het actieve tablad blauw */
.pageTabs li.active {
    height: 30px;
    margin-top: 0;
    border-color: #041365;
}

.pageTabs li.active a, .pageTabs li.active a:hover {
    padding-top: 1px;
    color: #b9133c;
    background-color: #041365;
    border: #041365;
}

/* maakt de tabladen blauw en wijzigt de hoogte */
.pageTabs li {
    float: right;
    height: 20px;
    margin-top: 1px;
    margin-right: 0px;
    border: 1px solid  #041365;
    border-bottom: 0;
    background-color: #041365;
    background-image: linear-gradient( #041365, #041365);
}

/*Maakt de tekst in de tabladen geel */
.pageTabs li a {
    display: block;
    padding: 0 17px;
    margin: 0;
    line-height: 30px;
    text-decoration: none;
    color: #dedb03;
}

/* kleurt reset laatste bezoektijd wit */
.pageTabs li.link a {
    color: #fff;
    padding: 0;
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #041365;
}

/* verbergt de tekst tussen de forra */
.channelHeader h2 {
    display: none;
}

/* verbergt de icoontjes tussen de forra */
.thumb.category {
    display: none;
}

/*verplaatst het dropdown menu bij profiel iets naar beneden */
#userbar .dropdown > div {
    width: 100%;
    min-width: 140px;
    top: 56px;
}

/*verplaatst het dropdown menu bij meer iets naar beneden*/
#menu .dropdown ul {
    padding-bottom: 5px;
    padding-top: 25px;
    width: 100%;
}

#menu .dropdown > div {
    display: block;
    box-shadow: 1px 3px 4px rgba(0,0,0,0.25);
    position: absolute;
    top: 35px;
    left: -1px;
    z-index: 99;
}

/* wanneer meer en profiel dropdown geselecteerd zijn zorgt dit ervoor dat de tekst wit blijft */
#menu > ul > li.more.dropdown > span {
    color: #ffffff;
    text-shadow: none;
}

/*maar meer en username breeder */
#menu > ul > li > a, #menu > ul > li.more > span {
    display: block;
    height: 44px;
    padding: 0 9px;
    color: #e0e2e2;
    font-family: "Roboto Condensed",arial,helvetica,"Liberation Sans",sans-serif;
    font-size: 15px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.1);
    text-decoration: none;
    background-color: #041365;
}

#userbar li.icon a {
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: #041365; 
    text-indent: -200px;
    overflow: hidden;
    cursor: pointer;
    margin-top: 5px;
    border-radius: 0px 60px 0px 0px;
}

/*zorgt dat de uitgeklapte notificatie menu's goed in beeld blijven */
.notificationsPopup {
    width: 320px;
    border-color: #ccc;
    border-top: 0;
    border-top-right-radius: 0;
    border-right: 0;
    z-index: 711;
   border-color: #9CA2E7;
}
}

/* ---vanaf 500 tot onbeperkt -----*/
@media screen and (min-width: 500px) {

/*zorgt voor wat ruimte tussen de content en de rand*/
table, td, th, input, button, textarea, select, .bar {
    background-color: #ffffff;
    padding: 0px;
}

/*haalt het dropdown menu bij de zoekbalk naar voor*/
.fancySelect ul {
    display: none;
    left: -1px;
    position: absolute;
    top: -5px;
    width: 125px;
    z-index: 1000;
}

/*blauwe achtergrond hover en active acties navigatie menu*/
#menu:active > ul > li.last {
    padding-right: 1px;
    background-color: #041365;
}

#menu:hover > ul > li.last {
    padding-right: 1px;
    background-color: #041365;
}

/*blauwe achtergrond bij hover actie*/
#logo:hover, #menu > ul > li:hover:not(.selected) {
    background: #041365;
    border-bottom: 1px solid #041365;
    height: 43px;
}

/*haalt de menu's naar voren*/
body.fixedHeader .menuHeaderPopup {
    position: fixed;
    z-index: 1000;
}

/*tot hier*/
}

/* -----1100 - 1500 ----- */

/* slogan bar */
@media screen and (min-width: 1100px) and (max-width: 1499px) {
     #menubottombar  {
    position: fixed;
    left: 62%;
    margin-right: 40%;
    height: 22px;
    width: 66%;
    background-color: #dedb03;
    transform: translate(-50%, -50%); 
   z-index: 700;
   border-radius: 30px 0px 0px 0px;
}

/* menubar wijzigdt de breete en maakt de hoeken rond */
.fixedHeader #menubar {
     position: fixed;
    margin-left: 8%;
    width: 87%;
    border-radius: 30px 30px 0px 0px;
}

/*bottiom */
#bottom {
    width: 87%;
    position: absolute;
    bottom: 0;
    background: #041365;
    left: 8%;
    border-radius: 0px 0px 30px 30px;
}

.pageTabs > ul {
    position: fixed;
    list-style: none;
    padding: 0;
    height: 28px;
    top: 70px;
    background-color: #041365;
    left: 48%;
    margin-right: 50%;
    width: 87%;
    transform: translate(-46%, -50%);
    z-index: 500;
    border-left: 0px solid #041365;
    border-radius: 0px 0px 0px 20px;
}

/* links in de border */
#ticker {
    height: 42px;
    padding-top: 29px;
    border-bottom: 1px solid #808080;
    width: 90%;
}

#about {
    height: 149px;
    padding-top: 22px;
    position: relative;
    width: 95%;
}
}

/* -------ongeveer tablet formaat -------- */

@media screen and (min-width: 500px) and (max-width: 1099px) {
body.hasTracker #tracker {
    display: block;
    z-index: 3000;
    background-color: #C6C3EF;
}

#trackerHeader .bulletSeparatedList li span {
    color: #041365;
    cursor: pointer;
}

#trackerContainer {
    color: #000;
}
}

/* ------- mobiele versie tweakers --------- */
/*haalt boogjes weg*/
#menubottombar::before {
    display: none;
}

/*haalt boogjes weg*/
#menubottombar::after {
    display: none;
}

/*dm en notificatie buttons telefoons*/
@media screen and (max-width: 500px) {

/*nieuwe notificaties*/
#rightSidebar .menuHeaderPopup .notification.unread {
    background: #dedb03;
    color: black;
}

/* aanvullende code mobiel dm en notificaties */
.header a, #rightSidebar .menuHeaderPopup .footer a {
    padding: 10px;
}

/*achtergrond tekst*/
#rightSidebar .menuHeaderPopup .header h3 {
    font-size: 14px;
    background-color: #9CA2E7;
}

/* 2 blokken maakt de tekstkleur in het producten menu zwart in plaats van grijs*/
#rightSidebar .selectedProductsPopup li a.itemname {
    float: left;
    width: 150px;
    padding: 0;
    color: #000;
}

/*producten pop-up*/
.selectedProductsPopup .popupContent, .compareHeaderPopup .popupContent {
    padding: 0;
    background-color: #C6C3EF;
}

/*producten-pop-up header*/
#rightSidebar .compareHeaderPopup .header, #rightSidebar .notificationsPopup .header {
    border-bottom: 1px solid #292c2c;
    background-color: #9CA2E7;
}

/*kleur notificatie menu*/
#rightSidebar .menuHeaderPopup .listItem, #rightSidebar .menuHeaderPopup .listItem:hover {
    background: #C6C3EF;
    color: #000;
}

/*leesbaarheid producten menu*/
.selectedProductsPopup .noProducts {
    line-height: 2;
    text-align: center;
    color: #000;
}

/*leesbaarheiod linkjes in notificatie menu's*/
#rightSidebar .menuHeaderPopup a {
    color: #000;
}

/*video koppelingen*/
#videos li {
    border-left: 0;
    border-right: 10px solid transparent;
    width: 45%;
}
}

/*zorgt ervoor dat de username niet overlapt wordt bij het openen van de tracker*/
#menu .sitename + ul {
    height: 44px;
    margin-left: 150px;
    position: relative;
    width: 500px;
    z-index: 95;
}

[ Voor 100% gewijzigd door Zeehond op 13-02-2017 14:03 ]

[LodanMax]

FireWood schreef op donderdag 18 oktober 2012 @ 19:03:

code:

/* HENK */
/*  */
/* Plaatsen van image */
div#logo{
background: url("http://tweakers.net/ext/f/yGhY5OUotXH3QnB3TpYh5RnD/full.png")  no-repeat;
}
/* Zorgen voor klikbare logo */
div#logo a{
 margin-bottom: 0px;
 width: 213px;
 height:85px;
 display:block;
 background:transparent;
}
/* Logo om zeep helpen */
div#logo img{
visibility:hidden;
}

HENK is back!

Omdat deze niet meer goed werkt op de nieuwe Tweakers site:

Cascading Stylesheet:

/* disable op mobiele telefoons, daar wordt 't niet mooier op */
@media only screen and (min-width: 760px)
{

/* Logo vervangen, tekst "Tweakers" staat er nog wel bij, maar icoontje is vervangen. */
#logo a
{
background:url(../../ext/f/UcY5a82gNc5VAOkdXU120jGG/full.png) no-repeat 50%;
display:block;
height:44px;
width:156px;
}
}

Resultaat:

[matroosoft]

De knop voor het als gelezen markeren van een notificaties heeft een vrij kleine hitbox zodat hij moeilijk aan te klikken is, vooral op mobiel. Ik heb een en ander geprobeerd met custom CSS om de hitbox groter te maken, maar kom er niet echt uit. Normaal gesproken zou je de hitbox kunnen vergroten door de padding aan te passen, maar dat heeft hier als resultaat dat er ook andere icons uit de iconset zichtbaar worden. Iemand ideeën?

[Rubman]

Ik heb 2 issues met mijn CSS waar ik niet 123 uitkom
Mijn notificatie melder is op mijn eigen PC niet meer zichtbaar (heel kort als er een nieuwe notificatie is maar daarna niet meer) andere pc's heb ik er geen last van gek genoeg.

En op mijn telefoon verdwijnt het menu steeds en komt pas terug als ik helemaal naar boven scroll.
Weinig ervaring met CSS en dit is een plak en knipwerk van dingen die ik interessant vond bij eerder geposte CSS-en

code:

/* Menu / Header */
#menubar{
background: #2c3e50;
box-shadow: inset 0 -2px 0 #C9EF29;
}

 
/* Usericon witte achtergrond (mooier bij transparante png/gif) */
#userbar .usericonsmall {
        background-color: #FFFFFF;
}

#logo a {
height: 42px;
}

#logo a:hover {
-webkit-animation-name: shake; 
animation-name: shake;
-webkit-animation-duration: 3.5s; 
animation-duration: 3.5s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: ease-in-out; 
animation-timing-function: ease-in-out; 
animation-iteration-count:infinite; 
-webkit-animation-iteration-count:infinite;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}

#menu li a:hover {
border-left:0px;

}
#menu li:hover,
#logo:hover{
height:43px;
background-image:-webkit-linear-gradient(#2c3e50,#C9EF29);
background-image:-moz-linear-gradient(#2c3e50,#C9EF29);
border-bottom:0px;
}

 /* Menu Dropdown */
#menu li.dropdown li:hover {
background-image:-moz-linear-gradient(#C9EF29,#C9EF29);
background-image:-webkit-linear-gradient(#C9EF29,#C9EF29);
}

#menu li.active a:hover {
color:#e0e2e2;
}

.dropdown li:hover,
dropdown li:hover a{
color:#000!important;
}

#menubottombar {
background-color: #2c3e50;
}

#menubottombar a.facebook {
background:url(http://www.eurosong.be/wp-content/themes/eurosongbe/images/icon_facebook.png) no-repeat;
}

#top #menubottombar a.twitter {
background:url(http://www.iknowuwill.com/images/Twitter_bird_icon.png) no-repeat;
background-size: 16px 16px;
background-position: 0px 0px !important;
}

#menubottombar span.slogan {
color: #EDEEEE;
text-shadow: 0px 2px 2px rgba(201, 239, 41, 1);
font-style: italic;
}
#menubottombar span.slogan:hover {
color: #C9EF29;
text-shadow: 0px 2px 2px rgba(237, 238, 238, 1);
}


@-webkit-keyframes shake { 
    0%, 80%, 100% {-webkit-transform: translateX(0);} 
    8%, 24%, 40%, 56%, 72% {-webkit-transform: translateX(-10px);} 
    16%, 32%, 48%, 64% {-webkit-transform: translateX(10px);} 
} 
@keyframes shake { 
    0%, 80%,100% {transform: translateX(0);} 
    8%, 24%, 40%, 56%, 72% {transform: translateX(-10px);} 
    16%, 32%, 48%, 64% {transform: translateX(10px);} 
} 

#menubottombar span.arrow-left {
border-right: 5px solid #EDEEEE;
}
#menubottombar span.count {
background-color: #EDEEEE;
border: 1px solid #C8C8C8;
border-left:0;
}

#userbar li.icon.unread {
-webkit-animation-duration: 5s; 
animation-duration: 5s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: linear; 
animation-timing-function: linear; 
animation-iteration-count:infinite; 
-webkit-animation-iteration-count:infinite;
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-delay: 2s;
animation-delay: 2s;
} 

@-webkit-keyframes bounce { 
0%, 10%, 25%, 40%, 50%, 100% {-webkit-transform: translateY(0);} 
20%, 30% {-webkit-transform: translateY(-10px);} 
} 

@keyframes bounce { 
0%, 10%, 25%, 40%, 50%, 100% {transform: translateY(0);} 
20%, 30% {transform: translateY(-10px);}
}


/* Topics met laatste eigen reactie markeren */
td.topic a[title*="Rubman"] {
        font-style: italic;
        color: #D1D1D1 ;
}

/* Usericon witte achtergrond (mooier bij transparante png/gif) */
#userbar .usericonsmall {
        background-color: #FFFFFF;
}

/* ### GoT ### */
/* ####Henk duim####*/
.action_list li.rating .thumbsup::before {
    background: rgba(0, 0, 0, 0) url("http://static.tweakers.net/ext/f/TlL6Zo91MiMutr9amUluNikj/full.png") no-repeat scroll 50% center;
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
}

.action_list li.rating .thumbsup.rated::before {
    background: rgba(0, 0, 0, 0) url("http://static.tweakers.net/ext/f/XUQa8JbPDzdzsWTKxb4qX5Gm/full.png") no-repeat scroll 50% center;
}

.action_list li.rating .thumbsup {
    background: #e0e0e0 linear-gradient(#e0e0e0, #c4c4c4) repeat scroll 0 0;
    border: 1px solid #bfb9a9;
    border-radius: 1px;
    cursor: default;
    display: inline-block;
    height: 22px;
    margin-left: 5px;
    overflow: hidden;
    position: relative;
    top: -0px;
    vertical-align: bottom;
    width: 26px;
}

.action_list li.rating .thumbsup.rated {
    background-color: #e0e0e0 repeat scroll 0 0;
    background-image: linear-gradient(#e0e0e0, #c4c4c4);
    border-color: #bfb9a9;
}

.action_list li.rating .ratingcount {
    min-width: 35px;
}

/* ####Overzicht####*/
 
/* Forumoverzicht kleuren, ieder deel andere achtergrond kleur (gradient indien mogelijk) */
.forumList:nth-child(2) table.listing tr th {
        background-image: linear-gradient(#9C9E9E,#626363);
}
 
.forumList:nth-child(3) table.listing tr th {
        background-image: linear-gradient(#B4113C,#760D29);
}
 
.forumList:nth-child(4) table.listing tr th {
        background-image: linear-gradient(#573077,#2B0A46);
}


.forumList:nth-child(5) table.listing tr th {
        background-image: linear-gradient(#1BA53C,#074416);
}
 
.forumList:nth-child(6) table.listing tr th {
        background-image: linear-gradient(#FF5A00,#9E3B06);
}
 
.forumList:nth-child(7) table.listing tr th {
        background-image: linear-gradient(#50D7FA,#14505F);
}
 
.forumList:nth-child(8) table.listing tr th {
        background-image: linear-gradient(#21428B,#112551);
}
 
.forumList:nth-child(9) table.listing tr th {
        background-image: linear-gradient(#9C9E9E,#626363);
}

/* NL vlaggetje weg */
.flagNL div{
   visibility: hidden !important;}
#bottom{display:none;}

}

/* Compactere forum tabellen */ 
table.listing td, table.listing th { 
 padding: 5px; /* is standaard 10px boven/onder en 5px links/rechts */ 
}

.ratingcount {
    color: #fff !important;
    border: 1px solid #bbbebe;
    border-radius: 1px;
    height: 22px;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0,0,0,.2),0 0 2px rgba(0,0,0,.2);

    background: #dcdfdf;
    background-image: -webkit-linear-gradient(#dcdfdf,#c5c8c8);
    background-image: -moz-linear-gradient(#dcdfdf,#c5c8c8);
    background-image: linear-gradient(#dcdfdf,#c5c8c8);
}

.can_be_rated .ratingcount {
    background: #929494;
    background-image: -webkit-linear-gradient(#929494,#7d8080);
    background-image: -moz-linear-gradient(#929494,#7d8080);
    background-image: linear-gradient(#929494,#7d8080);
    border-color: #7c7e7e;
}

.has_ratings .ratingcount {
    background: #cbda30;
    background-image: -webkit-linear-gradient(#cbda30,#c1d203);
    background-image: -moz-linear-gradient(#cbda30,#c1d203);
    background-image: linear-gradient(#cbda30,#c1d203);
    border-color: #b6c600;
}
#############
.spoiler {
    background-color: #DAE64A;
    color: rgba(218, 230, 74, 0);
    cursor: pointer;
    font-size: 1pt;
    height: 8px;
    padding: 8px;
    border-radius: 3px;
    margin-top: -10px;
    border: 1px dashed rgba(0,0,0,0);
}

.spoiler.visible {
    background-color: rgba(0,0,0,0);
    color: #000 !important;
    font-size: 13px !important;
    height: 100% !important;
    transition: all 0.1s ease 0s;
    margin-top: -10px;
    padding-top: 28px !important;
    border: 1px dashed #C4C4C4;
}

.spoiler a,
.messagecontent div.spoiler a,
.messagecontent .message-quote-div div.spoiler a,
.messagecontent div.spoiler a:hover,
.messagecontent .message-quote-div div.spoiler a:hover {
    display: none;
}

.spoiler.visible a,
.messagecontent div.spoiler.visible a,
.messagecontent .message-quote-div div.spoiler.visible a,
.messagecontent div.spoiler.visible a:hover,
.messagecontent .message-quote-div div.spoiler.visible a:hover {
    display: inline;
    background-color: rgba(0,0,0,0) !important;
    color: #000 !important;
    font-size: 13px !important;
    height: 100% !important;
    transition: all 0.1s ease 0s;
    margin-top: -10px;
    padding: 0 !important;
    border: 0;   
    border-radius: 0;
}

.messagecontent div:not([class]) small,
.message-quote-div div:not([class]) small {
    margin-top: 8px;
    padding: 4px;
    background-color: #DAE64A;
    border-radius: 3px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: bold;
    text-transform: capitalize;
    color: #434343;
}

div.spoiler div.resizewarning {
    display: none;
}

div.spoiler.visible div.resizewarning,
div.spoiler.visible div.resizewarning a,
div.spoiler.visible div.resizewarning a:hover {
    display: inline;
    font-size: 11px !important;
    color: white !important;
    background-color: rgba(0,0,0,0) !important;
}

div.resizewarning div small,
div.spoiler div.resizewarning div small,
div.messagecontent a small,
div.messagecontent td div small {
    background-color: rgba(0,0,0,0) !important;
    border-radius: 0;
    font-weight: normal;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    text-transform: none !important;
}

div.resizewarning div small,
div.spoiler div.resizewarning div small {
    color: white !important;
}

div.messagecontent a small {
    color: #014c93 !important;
}

div.messagecontent a:hover small {
    color: #b9133c !important;
}

[ard1998]

Rubman schreef op maandag 21 november 2016 @ 22:01:
En op mijn telefoon verdwijnt het menu steeds en komt pas terug als ik helemaal naar boven scroll.
Weinig ervaring met CSS en dit is een plak en knipwerk van dingen die ik interessant vond bij eerder geposte CSS-en

Heb je al gekeken in het snelle instellingen menu in de menu balk -> algemen -> menupositie?

[Rubman]

ard1998 schreef op vrijdag 25 november 2016 @ 07:19:
[...]

Heb je al gekeken in het snelle instellingen menu in de menu balk -> algemen -> menupositie?

Ja die staat op altijd in beeld

En irritanter vind ik ATM het verdwijnende notificatie icoon (dit gebeurd ook enkel op mijn scherm thuis en niet op werk)

[ Voor 19% gewijzigd door Rubman op 25-11-2016 08:20 ]

[ard1998]

Rubman schreef op vrijdag 25 november 2016 @ 08:19:
[...]

Cascading Stylesheet: filename

/* Menu / Header */
#menubar{
background: #2c3e50;
box-shadow: inset 0 -2px 0 #C9EF29;
}

 
/* Usericon witte achtergrond (mooier bij transparante png/gif) */
#userbar .usericonsmall {
        background-color: #FFFFFF;
}

#logo a {
height: 42px;
}

#logo a:hover {
-webkit-animation-name: shake; 
animation-name: shake;
-webkit-animation-duration: 3.5s; 
animation-duration: 3.5s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: ease-in-out; 
animation-timing-function: ease-in-out; 
animation-iteration-count:infinite; 
-webkit-animation-iteration-count:infinite;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}

#menu li a:hover {
border-left:0px;
}
#menu li:hover,
#logo:hover{
height:43px;
background-image:-webkit-linear-gradient(#2c3e50,#C9EF29);
background-image:-moz-linear-gradient(#2c3e50,#C9EF29);
border-bottom:0px;
}

 /* Menu Dropdown */
#menu li.dropdown li:hover {
background-image:-moz-linear-gradient(#C9EF29,#C9EF29);
background-image:-webkit-linear-gradient(#C9EF29,#C9EF29);
}

#menu li.active a:hover {
color:#e0e2e2;
}

.dropdown li:hover,
dropdown li:hover a{
color:#000!important;
}

#menubottombar {
background-color: #2c3e50;
}

#menubottombar a.facebook {
background:url(http://www.eurosong.be/wp-content/themes/eurosongbe/images/icon_facebook.png) no-repeat;
}

#top #menubottombar a.twitter {
background:url(http://www.iknowuwill.com/images/Twitter_bird_icon.png) no-repeat;
background-size: 16px 16px;
background-position: 0px 0px !important;
}

#menubottombar span.slogan {
color: #EDEEEE;
text-shadow: 0px 2px 2px rgba(201, 239, 41, 1);
font-style: italic;
}
#menubottombar span.slogan:hover {
color: #C9EF29;
text-shadow: 0px 2px 2px rgba(237, 238, 238, 1);
}


@-webkit-keyframes shake { 
    0%, 80%, 100% {-webkit-transform: translateX(0);} 
    8%, 24%, 40%, 56%, 72% {-webkit-transform: translateX(-10px);} 
    16%, 32%, 48%, 64% {-webkit-transform: translateX(10px);} 
} 
@keyframes shake { 
    0%, 80%,100% {transform: translateX(0);} 
    8%, 24%, 40%, 56%, 72% {transform: translateX(-10px);} 
    16%, 32%, 48%, 64% {transform: translateX(10px);} 
} 

#menubottombar span.arrow-left {
border-right: 5px solid #EDEEEE;
}
#menubottombar span.count {
background-color: #EDEEEE;
border: 1px solid #C8C8C8;
border-left:0;
}

#userbar li.icon.unread {
-webkit-animation-duration: 5s; 
animation-duration: 5s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: linear; 
animation-timing-function: linear; 
animation-iteration-count:infinite; 
-webkit-animation-iteration-count:infinite;
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-animation-delay: 2s;
animation-delay: 2s;
} 

@-webkit-keyframes bounce { 
0%, 10%, 25%, 40%, 50%, 100% {-webkit-transform: translateY(0);} 
20%, 30% {-webkit-transform: translateY(-10px);} 
} 

@keyframes bounce { 
0%, 10%, 25%, 40%, 50%, 100% {transform: translateY(0);} 
20%, 30% {transform: translateY(-10px);}
}


/* Topics met laatste eigen reactie markeren */
td.topic a[title*="Rubman"] {
        font-style: italic;
        color: #D1D1D1 ;
}

/* Usericon witte achtergrond (mooier bij transparante png/gif) */
#userbar .usericonsmall {
        background-color: #FFFFFF;
}

/* ### GoT ### */
/* ####Henk duim####*/
.action_list li.rating .thumbsup::before {
    background: rgba(0, 0, 0, 0) url("http://static.tweakers.net/ext/f/TlL6Zo91MiMutr9amUluNikj/full.png") no-repeat scroll 50% center;
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
}

.action_list li.rating .thumbsup.rated::before {
    background: rgba(0, 0, 0, 0) url("http://static.tweakers.net/ext/f/XUQa8JbPDzdzsWTKxb4qX5Gm/full.png") no-repeat scroll 50% center;
}

.action_list li.rating .thumbsup {
    background: #e0e0e0 linear-gradient(#e0e0e0, #c4c4c4) repeat scroll 0 0;
    border: 1px solid #bfb9a9;
    border-radius: 1px;
    cursor: default;
    display: inline-block;
    height: 22px;
    margin-left: 5px;
    overflow: hidden;
    position: relative;
    top: -0px;
    vertical-align: bottom;
    width: 26px;
}

.action_list li.rating .thumbsup.rated {
    background-color: #e0e0e0 repeat scroll 0 0;
    background-image: linear-gradient(#e0e0e0, #c4c4c4);
    border-color: #bfb9a9;
}

.action_list li.rating .ratingcount {
    min-width: 35px;
}

/* ####Overzicht####*/
 
/* Forumoverzicht kleuren, ieder deel andere achtergrond kleur (gradient indien mogelijk) */
.forumList:nth-child(2) table.listing tr th {
        background-image: linear-gradient(#9C9E9E,#626363);
}
 
.forumList:nth-child(3) table.listing tr th {
        background-image: linear-gradient(#B4113C,#760D29);
}
 
.forumList:nth-child(4) table.listing tr th {
        background-image: linear-gradient(#573077,#2B0A46);
}


.forumList:nth-child(5) table.listing tr th {
        background-image: linear-gradient(#1BA53C,#074416);
}
 
.forumList:nth-child(6) table.listing tr th {
        background-image: linear-gradient(#FF5A00,#9E3B06);
}
 
.forumList:nth-child(7) table.listing tr th {
        background-image: linear-gradient(#50D7FA,#14505F);
}
 
.forumList:nth-child(8) table.listing tr th {
        background-image: linear-gradient(#21428B,#112551);
}
 
.forumList:nth-child(9) table.listing tr th {
        background-image: linear-gradient(#9C9E9E,#626363);
}

/* NL vlaggetje weg */
.flagNL div{
   visibility: hidden !important;}
#bottom{display:none;}

}

/* Compactere forum tabellen */ 
table.listing td, table.listing th { 
 padding: 5px; /* is standaard 10px boven/onder en 5px links/rechts */ 
}

.ratingcount {
    color: #fff !important;
    border: 1px solid #bbbebe;
    border-radius: 1px;
    height: 22px;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0,0,0,.2),0 0 2px rgba(0,0,0,.2);

    background: #dcdfdf;
    background-image: -webkit-linear-gradient(#dcdfdf,#c5c8c8);
    background-image: -moz-linear-gradient(#dcdfdf,#c5c8c8);
    background-image: linear-gradient(#dcdfdf,#c5c8c8);
}

.can_be_rated .ratingcount {
    background: #929494;
    background-image: -webkit-linear-gradient(#929494,#7d8080);
    background-image: -moz-linear-gradient(#929494,#7d8080);
    background-image: linear-gradient(#929494,#7d8080);
    border-color: #7c7e7e;
}

.has_ratings .ratingcount {
    background: #cbda30;
    background-image: -webkit-linear-gradient(#cbda30,#c1d203);
    background-image: -moz-linear-gradient(#cbda30,#c1d203);
    background-image: linear-gradient(#cbda30,#c1d203);
    border-color: #b6c600;
}
#############
.spoiler {
    background-color: #DAE64A;
    color: rgba(218, 230, 74, 0);
    cursor: pointer;
    font-size: 1pt;
    height: 8px;
    padding: 8px;
    border-radius: 3px;
    margin-top: -10px;
    border: 1px dashed rgba(0,0,0,0);
}

.spoiler.visible {
    background-color: rgba(0,0,0,0);
    color: #000 !important;
    font-size: 13px !important;
    height: 100% !important;
    transition: all 0.1s ease 0s;
    margin-top: -10px;
    padding-top: 28px !important;
    border: 1px dashed #C4C4C4;
}

.spoiler a,
.messagecontent div.spoiler a,
.messagecontent .message-quote-div div.spoiler a,
.messagecontent div.spoiler a:hover,
.messagecontent .message-quote-div div.spoiler a:hover {
    display: none;
}

.spoiler.visible a,
.messagecontent div.spoiler.visible a,
.messagecontent .message-quote-div div.spoiler.visible a,
.messagecontent div.spoiler.visible a:hover,
.messagecontent .message-quote-div div.spoiler.visible a:hover {
    display: inline;
    background-color: rgba(0,0,0,0) !important;
    color: #000 !important;
    font-size: 13px !important;
    height: 100% !important;
    transition: all 0.1s ease 0s;
    margin-top: -10px;
    padding: 0 !important;
    border: 0;   
    border-radius: 0;
}

.messagecontent div:not([class]) small,
.message-quote-div div:not([class]) small {
    margin-top: 8px;
    padding: 4px;
    background-color: #DAE64A;
    border-radius: 3px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: bold;
    text-transform: capitalize;
    color: #434343;
}

div.spoiler div.resizewarning {
    display: none;
}

div.spoiler.visible div.resizewarning,
div.spoiler.visible div.resizewarning a,
div.spoiler.visible div.resizewarning a:hover {
    display: inline;
    font-size: 11px !important;
    color: white !important;
    background-color: rgba(0,0,0,0) !important;
}

div.resizewarning div small,
div.spoiler div.resizewarning div small,
div.messagecontent a small,
div.messagecontent td div small {
    background-color: rgba(0,0,0,0) !important;
    border-radius: 0;
    font-weight: normal;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    text-transform: none !important;
}

div.resizewarning div small,
div.spoiler div.resizewarning div small {
    color: white !important;
}

div.messagecontent a small {
    color: #014c93 !important;
}

div.messagecontent a:hover small {
    color: #b9133c !important;
}

@media and screen (max-width: 767px), (max-device-width: 767px) and (orientation: portrait), (max-device-width: 499px) and (orientation: landscape){
#menubar.hideheader {
animation: none !important
}
}

ik heb onderaan het bestand een stukje css toegevoegd om de menubalk niet meer te laten verdwijnen, is dit wat je zoekt?

[ Voor 0% gewijzigd door ard1998 op 25-11-2016 09:14 . Reden: -moz- en -webkit- versie van de animatie weggehaald. ]

[Rubman]

ard1998 schreef op vrijdag 25 november 2016 @ 08:45:
[...]


ik heb onderaan het bestand een stukje css toegevoegd om de menubalk niet meer te laten verdwijnen, is dit wat je zoekt?

Lijkt niet te helpen, op mijn telefoon verdwijnt de menubalk nog steeds.

Bedankt iig.

Ik ga denk ik maar eens opnieuw beginnen met mijn CSS

[Hero of Time]

Het is normaal dat op je mobiel, met grade D, de menubalk automatisch verbergt. Dat is zo gedaan om meer screen estate te krijgen als je scrollt. De balk komt terug als je een stukje omhoog scrollt. Er zit een bepaalde waarde aan voor snelheid en afstand, maar helemaal naar boven hoeft dus niet. Dat heeft ook niets met jouw CSS te maken.

[Rubman]

Hero of Time schreef op vrijdag 25 november 2016 @ 16:04:
Het is normaal dat op je mobiel, met grade D, de menubalk automatisch verbergt. Dat is zo gedaan om meer screen estate te krijgen als je scrollt. De balk komt terug als je een stukje omhoog scrollt. Er zit een bepaalde waarde aan voor snelheid en afstand, maar helemaal naar boven hoeft dus niet. Dat heeft ook niets met jouw CSS te maken.

Toch krijg ik vaak dat hij direct weer weg springt als ik stop met scrollen of het helemaal uit te schakelen is via CSS.

[Hero of Time]

Rubman schreef op vrijdag 25 november 2016 @ 16:06:
[...]

Toch krijg ik vaak dat hij direct weer weg springt als ik stop met scrollen of het helemaal uit te schakelen is via CSS.

Klopt, ik heb het ook wel eens dat 'ie verschijnt en dan weer direct verdwijnt. Dan heb je net niet genoeg gescrollt.

[Rubman]

Hero of Time schreef op vrijdag 25 november 2016 @ 16:08:
[...]

Klopt, ik heb het ook wel eens dat 'ie verschijnt en dan weer direct verdwijnt. Dan heb je net niet genoeg gescrollt.

Nou ik moet dus echt 9/10 keer volledig terug naar boven want anders is het niet te doen.

Kan toch niet aan mij liggen?

[Hero of Time]

Rubman schreef op vrijdag 25 november 2016 @ 16:09:
[...]

Nou ik moet dus echt 9/10 keer volledig terug naar boven want anders is het niet te doen.

Kan toch niet aan mij liggen?

Niet helemaal. Kan ook je browser zijn die wat verkeerd doet. Ik gebruik Opera mobile, praktisch geen probleem mee. Het lijkt mij ook sterk dat Chrome issues heeft, want dan zouden we wel wat in Stoute Bugs horen hierover.

Wat je wel zou kunnen doen, is de menubalk als instelling laten verbergen en met CSS altijd zichtbaar houd. Dat is iets wat ik bijvoorbeeld had gedaan voordat die instelling er kwam. Vereist wel wat werk mbt hoogte reserveren bovenaan enzo.

[Rubman]

Hero of Time schreef op vrijdag 25 november 2016 @ 16:12:
[...]

Niet helemaal. Kan ook je browser zijn die wat verkeerd doet. Ik gebruik Opera mobile, praktisch geen probleem mee. Het lijkt mij ook sterk dat Chrome issues heeft, want dan zouden we wel wat in Stoute Bugs horen hierover.

Wat je wel zou kunnen doen, is de menubalk als instelling laten verbergen en met CSS altijd zichtbaar houd. Dat is iets wat ik bijvoorbeeld had gedaan voordat die instelling er kwam. Vereist wel wat werk mbt hoogte reserveren bovenaan enzo.

Ja denk dat ik daar maar even mee ga stoeien.

Bedankt iig.

[LodanMax]

Speciaal voor oud en nieuw even het Tweakers-logo wat bewerkt

Cascading Stylesheet:

/* disable op mobiele telefoons, daar wordt 't niet mooier op */
@media only screen and (min-width: 760px)
{

/* Logo vervangen, tekst "Tweakers" staat er nog wel bij, maar icoontje is vervangen. */
#logo a
{
background:url(../../ext/f/qvsmuwvnHzY3rGzvDFTOc1HH/full.png) no-repeat 50%;
display:block;
height:44px;
width:156px;
}
}

Resultaat werkt in alle kleuren menubalken (zoals de mijne blauw is ) en niet op smartphones

[P_Tingen]

Omdat ik wel een beetje klaar ben met de lichtbak die tweakers is, heb ik custom css aangeschaft via de karmastore en ben vervolgens hier gaan kijken om 'even' een css van iemand te gebruiken, er van uitgaande dat er wel donkere thema's in omloop zouden zijn.



Ik kan niet zoeken of het is er niet. Er zijn wat hele oude dingen, maar die lijken niks te doen. Ik had gehoopt met een relatief klein css bestand de kleuren wat donkerder te krijgen. Veel scripts hier passen gelijk ook van alles en nogwat aan en dat hoeft (nog) niet. Via ctrl-shift-i kan ik wel eea aanpassen, maar echt goed is css ook weer niet voor mijn bloeddruk.

Ik heb al wel de zijbalken en de searchbar in het donker:

code:

body, #searchbar 
{
background:#333333;
background-color:#333333;
}

Maar ik wil ook graag het middendeel donker. Heeft iemand iets liggen wat hij wil delen?

[Hero of Time]

P_Tingen schreef op woensdag 12 april 2017 @ 14:12:
Omdat ik wel een beetje klaar ben met de lichtbak die tweakers is, heb ik custom css aangeschaft via de karmastore en ben vervolgens hier gaan kijken om 'even' een css van iemand te gebruiken, er van uitgaande dat er wel donkere thema's in omloop zouden zijn.



Ik kan niet zoeken of het is er niet. Er zijn wat hele oude dingen, maar die lijken niks te doen. Ik had gehoopt met een relatief klein css bestand de kleuren wat donkerder te krijgen. Veel scripts hier passen gelijk ook van alles en nogwat aan en dat hoeft (nog) niet. Via ctrl-shift-i kan ik wel eea aanpassen, maar echt goed is css ook weer niet voor mijn bloeddruk.

Ik heb al wel de zijbalken en de searchbar in het donker:

code:

body #searchbar
{
background:#333333;
background-color:#333333;
}

Maar ik wil ook graag het middendeel donker. Heeft iemand iets liggen wat hij wil delen?

Kan de mijne wel delen, is echter wel >1100 regels code. Pas iets meer aan dan domweg kleurtje #ffffff naar #000000. DM zou 4 berichten zijn overigens, dus een andere methode is wellicht iets vriendelijker. Kijk je zelf wat je wilt hebben, maar ik kan ook wel iets filteren voor je, maar ik geef geen garanties voor de uitwerking in dat geval.

[P_Tingen]

Zou leuk zijn! Evt via pastebin.com?

[Hero of Time]

Heb nog een oudje in Google Docs, maar pastebin kan idd ook wel. Zal vanavond wat tijd maken, kuis ik iets er in want een flinke aanpassing aan de menubalk wil je denk ik niet en geeft zonder extra's een paar functionele ongemakken.

[LodanMax]

Hero of Time schreef op woensdag 12 april 2017 @ 14:20:
Heb nog een oudje in Google Docs, maar pastebin kan idd ook wel. Zal vanavond wat tijd maken, kuis ik iets er in want een flinke aanpassing aan de menubalk wil je denk ik niet en geeft zonder extra's een paar functionele ongemakken.

zou ik die ook mogen? ik zit ook al enkele uren te zoeken voor enkele dingen voor een donkere Tweakers.

Alleen vindt ik er een die de gehele layout verfrommelt (en ik sloop zelf wel een hoop er uit die layout aanpast omdat ik enkel kleuren wil)

[Hero of Time]

@P_Tingen, @LodanMax, bij deze. De paste blijft 1 week online, dus vanaf 19 april 19:40 is deze niet meer te zien.
https://pastebin.com/jcH4qmMK

Vanaf regel 834 is het niet zo zinvol meer, daar heb ik andere aanpassingen staan en een paar fixes waarvan ik niet zeker ben of het nog nodig is. Houd wel rekening mee dat er nog zaken zijn die niet of niet volledig aangepast zijn. Het forum is zo goed als netjes, maar de FP niet. Met name zaken als de PW en productvergelijking zal wat issues hebben met lichte tekst op lichte achtergrond, normaal of bij hover.

Het past ook wat mod-only teksten aan. De eerste die je zal zien is de TW hier, maar ook modbreaks en de wat minder doordringende mbr heeft een andere kleur. Die laatste is normaal blauw, in mijn versie is die rood ivm leesbaarheid op zwart/donkergrijs.

Er staat ook bijna overal '!important' achter. Dit is een overblijfsel van toen ik 't nog via m'n browser functionaliteit deed en zal in veel tot alle gevallen niet nodig zijn. Ik heb echter nog niet de tijd genomen om dit uit te zoeken.

Owja, wil je niet mijn avatar naast je naam in de menubalk hebben (of op wat voor plek deze ook maar verschijnt), doe dan wat met het stukje rond regel 927.
En vul je eigen nicknaam in op regel 1116.

[ Voor 8% gewijzigd door Hero of Time op 12-04-2017 19:44 ]

[LodanMax]

Hero of Time schreef op woensdag 12 april 2017 @ 19:42:
@P_Tingen, @LodanMax, bij deze. De paste blijft 1 week online, dus vanaf 19 april 19:40 is deze niet meer te zien.
https://pastebin.com/jcH4qmMK

Vanaf regel 834 is het niet zo zinvol meer, daar heb ik andere aanpassingen staan en een paar fixes waarvan ik niet zeker ben of het nog nodig is. Houd wel rekening mee dat er nog zaken zijn die niet of niet volledig aangepast zijn. Het forum is zo goed als netjes, maar de FP niet. Met name zaken als de PW en productvergelijking zal wat issues hebben met lichte tekst op lichte achtergrond, normaal of bij hover.

Het past ook wat mod-only teksten aan. De eerste die je zal zien is de TW hier, maar ook modbreaks en de wat minder doordringende mbr heeft een andere kleur. Die laatste is normaal blauw, in mijn versie is die rood ivm leesbaarheid op zwart/donkergrijs.

Er staat ook bijna overal '!important' achter. Dit is een overblijfsel van toen ik 't nog via m'n browser functionaliteit deed en zal in veel tot alle gevallen niet nodig zijn. Ik heb echter nog niet de tijd genomen om dit uit te zoeken.

Owja, wil je niet mijn avatar naast je naam in de menubalk hebben (of op wat voor plek deze ook maar verschijnt), doe dan wat met het stukje rond regel 927.
En vul je eigen nicknaam in op regel 1116.

Werkt redelijk goed, maar iets wat me op valt wat me op valt, net als bij meerdere CSS' die ik op de 1e page zie, is een FP die een beetje lijkt op dit:

[Hero of Time]

Klopt, ik doe nog wat meer met de elementen en hoe dat werkt is ook nog eens afhankelijk van je resolutie en of je de tracker aan of uit hebt en of deze links staat of niet. Ik heb 'm altijd links staan. En iets breder dan normaal.

[P_Tingen]

Hero of Time schreef op woensdag 12 april 2017 @ 19:42:
@P_Tingen, @LodanMax, bij deze. De paste blijft 1 week online, dus vanaf 19 april 19:40 is deze niet meer te zien.
https://pastebin.com/jcH4qmMK

Dank! Dit is al heel mooi. De Henk-achtige zaken heb ik er maar even uitgehaald, het gaat mij vooral om de kleur. Ook de titelbalk heb ik nog weer donker gemaakt:

[Hero of Time]

Toch leuk om te zien dat maanden van werk door anderen gewaardeerd wordt.

[LodanMax]

Hero of Time schreef op donderdag 13 april 2017 @ 08:42:
Toch leuk om te zien dat maanden van werk door anderen gewaardeerd wordt.

Ik had je vorige ook al, maar ook die verbouwde de FP te veel. Ben nu keihard bezig om alles er uit te slopen wat geen kleuren aanpast Elk onderdeeltje los.

Ben nu wel nieuwschierig, welke resolutie gebruik jij om dit tot een werkend geheel te krijgen? want 1080-HD ziet die er zo... niet lekker uit.

[Hero of Time]

LodanMax schreef op zaterdag 15 april 2017 @ 11:19:
[...]

Ik had je vorige ook al, maar ook die verbouwde de FP te veel. Ben nu keihard bezig om alles er uit te slopen wat geen kleuren aanpast Elk onderdeeltje los.

Tja, de meeste aanpassingen buiten kleuren om had ik onderin gezet. De rest zijn wat kleine fixes. Als je het niet wilt, moet je de eerste 833 regels code nemen, niet wat erna komt.

Ben nu wel nieuwschierig, welke resolutie gebruik jij om dit tot een werkend geheel te krijgen? want 1080-HD ziet die er zo... niet lekker uit.

Ik heb het op mijn HTPC ook ingesteld en daar heb ik full HD. Maar ik pas wat breedtes aan via CSS in m'n browser welke ik nog eens via media rules in CSS in m'n profiel moet zetten. Ik pas dan ook nog eens de tekst grootte aan omdat 12 punten wat klein is om relaxt vanaf de bank te kunnen lezen.

De kleine changes aan de header mbt breedte en positie van elementen gaat uit van het aan hebben van de tracker links. M'n computer heeft een 27" scherm die ik overigens niet volledig vul met de browser en op werk had ik 2k schermen, maar is nu weer full HD en zie er eigenlijk geen problemen in. Heb je de tracker aan en links staan?

[LodanMax]

Hero of Time schreef op zaterdag 15 april 2017 @ 11:40:
[...]

Tja, de meeste aanpassingen buiten kleuren om had ik onderin gezet. De rest zijn wat kleine fixes. Als je het niet wilt, moet je de eerste 833 regels code nemen, niet wat erna komt.


[...]

Ik heb het op mijn HTPC ook ingesteld en daar heb ik full HD. Maar ik pas wat breedtes aan via CSS in m'n browser welke ik nog eens via media rules in CSS in m'n profiel moet zetten. Ik pas dan ook nog eens de tekst grootte aan omdat 12 punten wat klein is om relaxt vanaf de bank te kunnen lezen.

De kleine changes aan de header mbt breedte en positie van elementen gaat uit van het aan hebben van de tracker links. M'n computer heeft een 27" scherm die ik overigens niet volledig vul met de browser en op werk had ik 2k schermen, maar is nu weer full HD en zie er eigenlijk geen problemen in. Heb je de tracker aan en links staan?

Euh, nee, die staat bij mij altijd uit eigenlijk

eens kijken wat het is mét tracker.

edit:
komt er wel iets beter uit, alleen Henk is een beetje te groot nog

[ Voor 3% gewijzigd door LodanMax op 15-04-2017 11:50 ]

[Hero of Time]

Plaatje? Dan kan ik eens kijken wat het mogelijk is. Weet je nog wat je aan mijn code hebt aangepast mbt tracker en header?

[LodanMax]

Hero of Time schreef op zaterdag 15 april 2017 @ 11:58:
Plaatje? Dan kan ik eens kijken wat het mogelijk is. Weet je nog wat je aan mijn code hebt aangepast mbt tracker en header?

Dit is de originele 1 op 1 code die ik even in een privé pastebin heb gegooid zodat ik terug kan kijken

De knop bij de zoekbalk is afwezig op het forum, maar Henk is een beetje te groot


Ergens is het raar, omdat in je CSS dit staat:

Cascading Stylesheet:

/* Henk it! */
#logo a {
    height: 45px !important;
    width: 150px !important;
    background: url(https://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png) no-repeat 20px -1px !important;
}
/* Peek-a-boo Henk */
#logo a:hover {
    height: 45px !important;
    width: 150px !important;
    background: url(https://tweakers.net/ext/f/5zAVOaOnkptw91F4uzckWMPh/full.png) no-repeat 20px -20px !important;
}

[ Voor 5% gewijzigd door LodanMax op 15-04-2017 21:52 . Reden: css tag ]

[Hero of Time]

Henk is net zo groot als het oorspronkelijke logo. Heb je nog wat aangepast aan de search? Want bij mij is die niet zo breed als bij jou. De knop op de FP heb ik ook en valt er ook onder. Dat is een van de zaken die later zijn toegevoegd in een Iteratie en daar heb ik mijn CSS nog niet op aangepast. Heb je al geprobeerd zonder het Henk deel van de code?

Je moet trouwens nog wel mijn icoon weghalen bij je usernaam. Zie regel 927 van mijn code. Zet daar "https://ic.tweakimg.net/usericons/733151/crop56bb16b0008f9_cropped.png" neer ipv de URL naar de mijne. Of je haalt het blokje weg.

[LodanMax]

Hero of Time schreef op zondag 16 april 2017 @ 12:09:
Henk is net zo groot als het oorspronkelijke logo. Heb je nog wat aangepast aan de search? Want bij mij is die niet zo breed als bij jou. De knop op de FP heb ik ook en valt er ook onder. Dat is een van de zaken die later zijn toegevoegd in een Iteratie en daar heb ik mijn CSS nog niet op aangepast. Heb je al geprobeerd zonder het Henk deel van de code?

Je moet trouwens nog wel mijn icoon weghalen bij je usernaam. Zie regel 927 van mijn code. Zet daar "https://ic.tweakimg.net/usericons/733151/crop56bb16b0008f9_cropped.png" neer ipv de URL naar de mijne. Of je haalt het blokje weg.

Ik heb even 100% een kopie van de code genomen, zonder aanpassingen.
Dus betreffende de zoekbalk, het aanpassen van d'n Henk en dergelijke loopt alleen via jouw CSS.

De afbeelding sloop ik er niet uit, vindt die wel leuk. Ik moet alleen nog tijd maken om hier een mooie voor te pakken.

[Hero of Time]

Enige wat ik je nu kan aanraden is om twee tabs open te hebben en een tekst editor zoals Notepad++. Je past de code aan in de tekst editor, plakt die in je voorkeuren en ververst de andere pagina om te zien wat het resultaat is. Rinse en repeat totdat je het hebt zoals je het wilt hebben. Heb ik ook zo gedaan, en met veel spelen in de developer console (rmb > inspecteer element). Vooral met dat laatste kan je wat preciezer werken en weten wat het doet zodat je niet constant zit te copy/pasten en F5'en.

[Tk55]

Ik zal mijne ook maar weer eens posten. Hij probeert dicht bij de stijl van Tweakers te blijven, maar dan met een stuk minder poespas, lege ruimte en wit. Probeer 'm en laat weten wat je er van vindt. Ook als je bugs tegenkomt hoor ik het graag!

Screenshot is al wat ouder, maar zo ziet ie er uit:


https://github.com/timotk/tweakers-css

[Meg]

Heeft iemand een mooie CSS die Tweakers donker maakt? Ik heb zelf geen idee hoe dat moet.

[Hero of Time]

Markimoo schreef op vrijdag 21 april 2017 @ 20:49:
Heeft iemand een mooie CSS die Tweakers donker maakt? Ik heb zelf geen idee hoe dat moet.

Anders kijk je eens verder dan 1 dag terug...

Mijne is niet meer beschikbaar, daar had je twee dagen eerder voor moeten zijn. Maar kan 'm zo weer online gooien.

[Zeehond]

@Hero of Time, zet je css anders gewoon in dit topic in quote tags, heb mijn in de 1000 regels tellende css ook op die manier hier gepost na de tip van Zeror om het zo te posten ,

[Hero of Time]

@-zeehond, dat past niet. Eerder wilde dat al niet omdat het te veel tekst was. Aantal regels code zegt niet altijd wat, het gaat om de grootte van het bericht. En dat klopt ook:

De inhoud is te lang na conversie: 142,699 bytes na conversie, 77,164 bytes meer dan mogelijk.

Ik zit na conversie dus al ruim op het dubbele van wat mag. Het zou dan dus minstens 2, maar denk eerder 3, berichten zijn om 't volledig te posten. Misschien ook maar eens op Github zetten, maar dan moet ik nog wel wat ander werk eraan doen, zoals wat opruimen en meer comments. Genoeg dingen waar ik mij van afvraag wat het ook alweer precies aanpaste en waar het voor was. Sommige zaken zijn niet meer nodig.

Nieuwe paste, dit keer 1 maand: https://pastebin.com/T42SiM3J
Met dank aan m'n clipboard manager, daar stond 'ie nog volledig in. Hoef ik 'm niet nog een keer te maken.

[Zeehond]

@Hero of Time, daar heb je zeker gelijk in, wist niet dat het probleem daar in zat. Wel een zeer mooie css heb je geschreven .

Heb je alleen geen last van dat je vaak iets moet wijzigen na een update van tweakers.net aan hun website?

Vergeten waar iets voor was heb ik ook wel eens last van , uit commentarieren maakt het ook nog niet eens altijd meteen duidelijk is vaak nog eens het probleem.

[Ramon]

Hero of Time schreef op zaterdag 22 april 2017 @ 10:25:
Ik zit na conversie dus al ruim op het dubbele van wat mag. Het zou dan dus minstens 2, maar denk eerder 3, berichten zijn om 't volledig te posten. Misschien ook maar eens op Github zetten, maar dan moet ik nog wel wat ander werk eraan doen, zoals wat opruimen en meer comments. Genoeg dingen waar ik mij van afvraag wat het ook alweer precies aanpaste en waar het voor was. Sommige zaken zijn niet meer nodig.

Des te meer reden om de ontwikkeling vanaf nu mbv versiebeheer te doen

[Hero of Time]

Zeehond schreef op zaterdag 22 april 2017 @ 11:29:
@Hero of Time, daar heb je zeker gelijk in, wist niet dat het probleem daar in zat. Wel een zeer mooie css heb je geschreven .

Jep, had in dit topic eerder een link naar m'n CSS op Google Drive geplaatst om die reden. Maar die is ondertussen erg verouderd en bevat ook nog extra code om elementen breder te maken.

Heb je alleen naar de code gekeken of heb je 'm toegepast? Het is namelijk niet overal even mooi.

Heb je alleen geen last van dat je vaak iets moet wijzigen na een update van tweakers.net aan hun website?

Daar heb ik al een paar keer last van gehad ja. Dan ga je opeens twijfelen of je dat element nou had aangepast of nog moest doen. Blijkt het dus net iets anders te heten.

Vergeten waar iets voor was heb ik ook wel eens last van , uit commentarieren maakt het ook nog niet eens altijd meteen duidelijk is vaak nog eens het probleem.

Gelukkig gebruik ik blokken van elementen, dus de code wat er staat is voor dat ene blok, soms heeft het ook effect op andere stukken, maar welk element nou net die ene regel of selectie doet is niet altijd even duidelijk.

Ramon schreef op zaterdag 22 april 2017 @ 11:31:
[...]
Des te meer reden om de ontwikkeling vanaf nu mbv versiebeheer te doen

Had dat vanaf het begin al moeten doen eigenlijk. Zou wel een leuke historie hebben gegeven.
Heb wel een paar revisies door handmatig er een timestamp aan toe te voegen, maar dat gebeurt ook niet consistent.

[NMe]

Hero of Time schreef op vrijdag 21 april 2017 @ 23:41:
[...]

Anders kijk je eens verder dan 1 dag terug...

Wat haal je er altijd weer enorm veel plezier uit om mensen erop te wijzen dat ze iets gemist hebben. Doe eens normaal, je bent verdorie mod.

[Hero of Time]

NMe schreef op zaterdag 22 april 2017 @ 13:36:
[...]

Wat haal je er altijd weer enorm veel plezier uit om mensen erop te wijzen dat ze iets gemist hebben. Doe eens normaal, je bent verdorie mod.

Mea culpa. Je hebt helemaal gelijk. Was niet netjes.

[Zeehond]

Hero of Time schreef op zaterdag 22 april 2017 @ 13:10:
[...]

Jep, had in dit topic eerder een link naar m'n CSS op Google Drive geplaatst om die reden. Maar die is ondertussen erg verouderd en bevat ook nog extra code om elementen breder te maken.

Heb je alleen naar de code gekeken of heb je 'm toegepast? Het is namelijk niet overal even mooi.

Daar kijk ik neven af , kan er zelf ook aan prutsen wat ik niet mooi vind maar het geeft een mooi startpunt . De code is natuurlijk ook mooi .

[...]

Gelukkig gebruik ik blokken van elementen, dus de code wat er staat is voor dat ene blok, soms heeft het ook effect op andere stukken, maar welk element nou net die ene regel of selectie doet is niet altijd even duidelijk.

Interessant, ook een manier op het bij te houden. Zelf heb ik het in drie delen op gesplitst, desktop, mobiel en tabblad, en vervolgens nog een splitsing op alleen kleur aanpassingen of echt vormen aanpassen/ onderdelen verplaatsen. Op die manier heb ik nog enig overzicht.

[Meg]

@Hero of Time super bedankt!

Hoort dit plaatje daar zo van achter te zitten?*weg*
En dit?
*weg*

Mogelijk false-positive, maar we krijgen malware melding van jouw image hoster, dus voor de zekerheid maar even weggehaald.

[ Voor 74% gewijzigd door Ginz op 06-09-2018 15:31 ]

[Hero of Time]

Zeehond schreef op zaterdag 22 april 2017 @ 14:53:
[...]

Daar kijk ik neven af , kan er zelf ook aan prutsen wat ik niet mooi vind maar het geeft een mooi startpunt . De code is natuurlijk ook mooi .

De code is helemaal niet mooi. Bijna overal staat er wel een onnodige !important achter.

[...]

Interessant, ook een manier op het bij te houden. Zelf heb ik het in drie delen op gesplitst, desktop, mobiel en tabblad, en vervolgens nog een splitsing op alleen kleur aanpassingen of echt vormen aanpassen/ onderdelen verplaatsen. Op die manier heb ik nog enig overzicht.

Zie de comments boven zulke blokken. Bijvoorbeeld stukje voor de pw, de fp comments, etc.

Markimoo schreef op zaterdag 22 april 2017 @ 16:20:
@Hero of Time super bedankt!

Hoort dit plaatje daar zo van achter te zitten? [afbeelding]

Niet helemaal. Het plaatje is immers mijn avatar. Maar als de breedte van je scherm niet genoeg is, gaat dit fout.

En dit?
[[url="https://weg"]afbeelding[/url]]

Net als je vorige shot heb je mijn extra code overgenomen. Vanaf regel 834 wordt de kleur niet meer aangepast. Je kan het weglaten en kijken wat je krijgt. Zou beter moeten gaan.

[ Voor 1% gewijzigd door Ginz op 06-09-2018 15:31 ]

[Meg]

Kan je dat aanpassen of is het lastig?

[Zeehond]

Hero of Time schreef op zaterdag 22 april 2017 @ 17:27:
[...]

De code is helemaal niet mooi. Bijna overal staat er wel een onnodige !important achter.

Daar val ik door de mand , maar waarom heb je die zoveel gebruikt als ze onnodig zjn? Heb er zelf nog nooit een gebruikt voor mijn css.

[Hero of Time]

Zeehond schreef op zaterdag 22 april 2017 @ 19:26:
[...]

Daar val ik door de mand , maar waarom heb je die zoveel gebruikt als ze onnodig zjn? Heb er zelf nog nooit een gebruikt voor mijn css.

Omdat ik was begonnen met de aanpassingen via de functie in mijn browser, Opera. Pas later heb ik het naar mij profiel verhuist omdat het op een gegeven moment niet meer bij te houden was op twee computers. Fix op de ene was dan niet op de andere tenzij ik het er handmatig bij zette. Dat werd iets te veel werk en werkte natuurlijk ook niet op m'n mobiel.

[Zeehond]

Hero of Time schreef op zaterdag 22 april 2017 @ 20:36:
[...]

Omdat ik was begonnen met de aanpassingen via de functie in mijn browser, Opera. Pas later heb ik het naar mij profiel verhuist omdat het op een gegeven moment niet meer bij te houden was op twee computers. Fix op de ene was dan niet op de andere tenzij ik het er handmatig bij zette. Dat werd iets te veel werk en werkte natuurlijk ook niet op m'n mobiel.

Ah, vandaar, dan begrijp ik het .

[LodanMax]

Markimoo schreef op zaterdag 22 april 2017 @ 17:29:
Kan je dat aanpassen of is het lastig?

Speciaal voor jou, alles na regel 834 weggehaald:

https://pastebin.com/7ELMibNj 1 week beschikbaar

[Meg]

LodanMax schreef op zondag 23 april 2017 @ 10:16:
[...]

Speciaal voor jou, alles na regel 834 weggehaald:

https://pastebin.com/7ELMibNj 1 week beschikbaar

Geweldig, ziet er een stuk beter uit, alleen het zoekstuk is nog wit. Enige hint waar dat ongeveer zit?
*weg*

Mogelijk false-positive, maar we krijgen malware melding van jouw image hoster, dus voor de zekerheid maar even weggehaald.

[ Voor 19% gewijzigd door Ginz op 06-09-2018 15:32 ]

[Tk55]

Hero of Time schreef op zaterdag 22 april 2017 @ 17:27:
[...]

De code is helemaal niet mooi. Bijna overal staat er wel een onnodige !important achter.

Hoe overrule je anders de css regels van Tweakers zelf?

[LodanMax]

Markimoo schreef op zondag 23 april 2017 @ 10:31:
[...]

Geweldig, ziet er een stuk beter uit, alleen het zoekstuk is nog wit. Enige hint waar dat ongeveer zit?
[afbeelding]

Cascading Stylesheet:

#searchbar
{
background:#FF0000;
}

Je moet de kleur wel ff aanpassen, ik gebruik FF0000 (en 00FF00 en 0000FF) om te identificeren

[Meg]

Super @LodanMax!

[LodanMax]

Tk55 schreef op zondag 23 april 2017 @ 10:31:
[...]

Hoe overrule je anders de css regels van Tweakers zelf?

Als Hero (en Elite) kun je op https://tweakers.net/instellingen/layout/ kun je onder het kopje Custom stylesheet en RSS trackers je eigen CSS wegzetten.

[Tk55]

LodanMax schreef op zondag 23 april 2017 @ 10:39:
[...]

Als Hero (en Elite) kun je op https://tweakers.net/instellingen/layout/ kun je onder het kopje Custom stylesheet en RSS trackers je eigen CSS wegzetten.

Ja dat weet ik, heb er zelf ook eentje (zie stukje hierboven). Wat ik bedoel is hoe je binnen je custom css zonder !important rules zou kunnen overrulen die de standaard Tweakers css heeft.

[LodanMax]

Ze worden altijd op volgorde uitgevoerd, de laatste is altijd de actieve.
Alles wat jij wegzet overruled Tweakers CSS omdat een privé CSS als laatste staat.

!important wordt alleen geprioriteerd en is eigenlijk niet nodig.
hier wordt uitgelegd waar Important wel handig kan zijn:
https://css-tricks.com/wh...tant-is-the-right-choice/

[Hero of Time]

Tk55 schreef op zondag 23 april 2017 @ 10:31:
[...]

Hoe overrule je anders de css regels van Tweakers zelf?

Iig niet via !important als je 't via de custom css optie hier doet. Ik heb het er bijna overal nog staan omdat ik het eerst via m'n browser deed. Die overruled niets tenzij er !important wordt gebruikt of het element wordt niet door de site zelf bepaald maar door een bovenliggende stijl zoals standaard font tekst kleur.

In een enkel geval staat !important in de css van Tweakers, maar dat zal dan zijn om een specifiek element net iets anders te stylen dan de globale selectie (denk aan een tabel bijvoorbeeld).

Markimoo schreef op zondag 23 april 2017 @ 10:31:
[...]

Geweldig, ziet er een stuk beter uit, alleen het zoekstuk is nog wit. Enige hint waar dat ongeveer zit?
[afbeelding]

Ik verberg die witte (meer grijs eigenlijk) balk in regels 898 t/m 901 en zet de search in de menubalk. Omdat jij niet meer dan de eerste 834 regels gebruikt is die niet verandert.

[Meg]

Hero of Time schreef op zondag 23 april 2017 @ 13:11:

[...]

Ik verberg die witte (meer grijs eigenlijk) balk in regels 898 t/m 901 en zet de search in de menubalk. Omdat jij niet meer dan de eerste 834 regels gebruikt is die niet verandert.

k heb het nu wel. ;-)