A farewell to paars

[ard1998]

PromWarMachine schreef op zaterdag 05 maart 2016 @ 01:09:
Leuke actie mensen!

Hoewel ik alweer een tijdje ben overgestapt, was ik wel altijd voorstander van paars. Ik hoor dan ook zeker bij de 0.13% waar zeef het over heeft..
Toen paars als default ging verdwijnen was ik zeker niet blij en dat heb ik laten weten ook.

Ik hoop dat iemand zo creatief is om een goed lijkende CSS te bouwen, dan ga ik die zeker proberen!

bedoel je dan iets dat zoveel mogelijk op paars lijkt (aleen in goT of voor de hele website) of iets dat de moderne stijl wat paarser maakt (aleen in goT of de hele website)?

[ Voor 58% gewijzigd door ard1998 op 05-03-2016 08:22 ]

[Zeehond]

Het grootste pruts werkje is hier (op eventuele kleur wijzigen na) inmiddels klaar, de menu bar



Nog alleen even kijken wat ik met de tracker ga doen.

edit
henk is toegevoegd

[ Voor 57% gewijzigd door Zeehond op 05-03-2016 16:23 ]

[PromWarMachine]

ard1998 schreef op zaterdag 05 maart 2016 @ 07:55:
[...]

bedoel je dan iets dat zoveel mogelijk op paars lijkt (aleen in goT of voor de hele website) of iets dat de moderne stijl wat paarser maakt (aleen in goT of de hele website)?

Laat je niet teveel leiden door mij hoor!
Alleen het forum is mij best. Inclusief frontpage ga je er nog wel even zoet mee zijn..

Oude glorie herstellen zou mij nvoorkeur genieten, maar dus wel alleen op het forum.
Succes!

[ard1998]

Ik vind het met paars zo mooi dat ik er meteen een css voor de hele website van maak onderstaand een paar screenshots totdusver.

edit 15-3-2016 - ik heb de orginele screenshots verwijderd en vervangen door nieuwe

[ Voor 57% gewijzigd door ard1998 op 15-03-2016 16:40 . Reden: nieuwe screenshots V1.0RC1 ]

[Verwijderd]

ard1998 schreef op zaterdag 05 maart 2016 @ 21:27:
Ik vind het met paars zo mooi dat ik er meteen een css voor de hele website van maak onderstaand een paar screenshots totdusver.

frontpage.
[afbeelding]

forum.
[afbeelding]

profiel pagina van femme.
[afbeelding]

Cool

[ard1998]

ik heb de eerste versie van mijn paars css. Deze is getest met de desktop view ICM google chrome.
momenteel werk ik aan mobiele ondersteuning en in de toekomst wil ik ook werken aan webkit en -moz ondersteuning. ook het ordenen van de css elementen staat op de planning

Cascading Stylesheet: ard1998_paars_css.css

/*ALGEMEEN*/

#tracker, #trackerButton{
position: relative;
visibility: hidden;
}

td.pwimage.large{
border-bottom: #000000;
}

#menubottombar{
        background: #00084A;
        width:initial;
margin-left: -6px;
}

#bottom{
        background: #00084A;
        width:100.5%;
        margin-left: -6px;
}

#menubar{
    background:#00084A;
    z-index:110;border-bottom:1px solid #00084A;
    box-shadow:inset 0 -1px 0 #00084A;left:0;height:44px;
}

#entity{
        background-color: #9E99DB;
}
div.hr{
        background-image: linear-gradient(#9E99DB,#9E99DB);
}

body, #searchbar{
background-color: #9E99DB;
}

#contentArea, div.wrap{
    background: #C6C3EF;
}

table.newtable.searchTable{
        background-image: linear-gradient(#C6C3EF,#C6C3EF);
}

.columnwrapper .sidebar{background: #C6C3EF;border:1px solid #e8eaea;border-radius:1px;float:right;padding:10px;width:170px;
}

tr{
    background: #C6C3EF;
}

h3.bar, h2.bar{
        background: #9CA2E7;
}

/*FRONTPAGE*/

td.score, td.desc, td.multiplier{
        background: #424444;
}
tr.average, tr.last{
        background: #424444;
}
tr td hr.spacer{
        background: #424444;
}
.frontpage #community .userReview .userReviewDescription{
background:linear-gradient(#9CA2E7,#9CA2E7);
}

div.communityItem.useVisitedState, div.fpItem.darkFpBlock, td.publicationTime, div.relatedBlock, td.replies, td.title, div.fpItem, #recentlyTested{
    background: #C6C3EF;
}

div.reactieBody.informative.nochilds, div.reactieBody.informative, div.reactieBody.spotlight, div.reactieBody.spotlight.nochilds{
    background: #AAAAE6;
}

/*REVIEWS + PRICEWATCH + V&A + DOWNLOADS*/

tr.largethumb{
    background: #C6C3EF;
}

div.filterOption.collapsed, div.filterOption, div.filterOption.active{
    background: #C6C3EF;
}

#categoryBrowser div{position:relative;width:280px;height:372px;background: #C6C3EF;
}

#categoryBrowser li:hover{background:#9CA2E7;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.03);
}

#categoryBrowser .sublist{
        background:#C6C3EF;
}

.searchAanbod #nearbyAdForm{
background: #C6C3EF;
}

#categoryBrowser li.active.more{
        background: linear-gradient(#9CA2E7,#9CA2E7) 0 0;
}

#categoryBrowser .sublist li.active.more{
        background: linear-gradient(#9CA2E7,#9CA2E7) 0 0;
}

/*FORUM*/

th, h2.bar.question, h2.bar.answer, h2.bar.other{
    background-image: linear-gradient(#9CA2E7,#9CA2E7);
}
#reageer.bar{
    background-color: #9CA2E7;
}

table.listing td.title, td.timeshort.last, td.topics, td.poster{
    background-image: linear-gradient(#C6C3EF,#C6C3EF);
}

table.listing td.topic{
    background: #C6C3EF;
}

table.listing td.time{
    background: #C6C3EF;
}

table.listing td.topics{
    background-image: linear-gradient(#C6C3EF,#C6C3EF);
}

div.message{
    background: #C6C3EF;
}

table.listing td.tags {
    background-image: linear-gradient(#AAAAE6,#AAAAE6);
}

table.listing td.replies{
    background-image: linear-gradient(#AAAAE6,#AAAAE6);
}

div.message{
    background: #C6C3EF;
}
table.listing td.poster{
    background: #AAAAE6;
}
table.listing td.frm{
    background: #AAAAE6;
}
div.message.bestAnswer{
    background: #AAAAE6;
}

/*PROFIELEN*/
div.galleryHeadingContainer, div.pageTabsContainer{
        background-color: #9E99DB;
}

/*Karmastore*/
table.itemList, table.text-fontsmall.marginTop5{
        background: #C6C3EF;
}

/*Tweakblogs admin*/
table.tweakblog{
        background: #C6C3EF;
}

/*ABOSHOP*/

.aboShop .info{
        background:#C6C3EF;
        background-image:linear-gradient(#C6C3EF,#C6C3EF);
}

/*VIDEO'S*/

td.item{
        background: #242626;
} } 

ik sta open voor suggesties en/of verbeteringen.

[ Voor 0% gewijzigd door ard1998 op 08-03-2016 12:50 . Reden: for loop weggehaald ]

[AW_Bos]

Zeehond schreef op vrijdag 04 maart 2016 @ 23:11:
De menue balk is hier al paars, morgen even de menubar in het midden zetten en ronde hoeken geven.

[afbeelding]

Is alleen nog niet het correcte paars, nog even zoeken.

#C6C3EF en #AAAAE6

Aldus de colorpicker-addon in mijn Firefox

[GerardVanAfoort]

ard1998 schreef op dinsdag 08 maart 2016 @ 10:03:
ik heb de eerste versie van mijn paars css. Deze is getest met de desktop view ICM google chrome.
momenteel werk ik aan mobiele ondersteuning en in de toekomst wil ik ook werken aan webkit en -moz ondersteuning. ook het ordenen van de css elementen staat op de planning

Cascading Stylesheet: ard1998_paars_css.css

 for (i = 0; i < 4; i++) { /*ALGEMEEN*/

#tracker, #trackerButton{
position: relative;
visibility: hidden;
}

td.pwimage.large{
border-bottom: #000000;
}

#menubottombar{
        background: #00084A;
        width:initial;
margin-left: -6px;
}

#bottom{
        background: #00084A;
        width:100.5%;
        margin-left: -6px;
}

#menubar{
    background:#00084A;
    z-index:110;border-bottom:1px solid #00084A;
    box-shadow:inset 0 -1px 0 #00084A;left:0;height:44px;
}

#entity{
        background-color: #9E99DB;
}
div.hr{
        background-image: linear-gradient(#9E99DB,#9E99DB);
}

body, #searchbar{
background-color: #9E99DB;
}

#contentArea, div.wrap{
    background: #C6C3EF;
}

table.newtable.searchTable{
        background-image: linear-gradient(#C6C3EF,#C6C3EF);
}

.columnwrapper .sidebar{background: #C6C3EF;border:1px solid #e8eaea;border-radius:1px;float:right;padding:10px;width:170px;
}

tr{
    background: #C6C3EF;
}

h3.bar, h2.bar{
        background: #9CA2E7;
}

/*FRONTPAGE*/

td.score, td.desc, td.multiplier{
        background: #424444;
}
tr.average, tr.last{
        background: #424444;
}
tr td hr.spacer{
        background: #424444;
}
.frontpage #community .userReview .userReviewDescription{
background:linear-gradient(#9CA2E7,#9CA2E7);
}

div.communityItem.useVisitedState, div.fpItem.darkFpBlock, td.publicationTime, div.relatedBlock, td.replies, td.title, div.fpItem, #recentlyTested{
    background: #C6C3EF;
}

div.reactieBody.informative.nochilds, div.reactieBody.informative, div.reactieBody.spotlight, div.reactieBody.spotlight.nochilds{
    background: #AAAAE6;
}

/*REVIEWS + PRICEWATCH + V&A + DOWNLOADS*/

tr.largethumb{
    background: #C6C3EF;
}

div.filterOption.collapsed, div.filterOption, div.filterOption.active{
    background: #C6C3EF;
}

#categoryBrowser div{position:relative;width:280px;height:372px;background: #C6C3EF;
}

#categoryBrowser li:hover{background:#9CA2E7;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.03);
}

#categoryBrowser .sublist{
        background:#C6C3EF;
}

.searchAanbod #nearbyAdForm{
background: #C6C3EF;
}

#categoryBrowser li.active.more{
        background: linear-gradient(#9CA2E7,#9CA2E7) 0 0;
}

#categoryBrowser .sublist li.active.more{
        background: linear-gradient(#9CA2E7,#9CA2E7) 0 0;
}

/*FORUM*/

th, h2.bar.question, h2.bar.answer, h2.bar.other{
    background-image: linear-gradient(#9CA2E7,#9CA2E7);
}
#reageer.bar{
    background-color: #9CA2E7;
}

table.listing td.title, td.timeshort.last, td.topics, td.poster{
    background-image: linear-gradient(#C6C3EF,#C6C3EF);
}

table.listing td.topic{
    background: #C6C3EF;
}

table.listing td.time{
    background: #C6C3EF;
}

table.listing td.topics{
    background-image: linear-gradient(#C6C3EF,#C6C3EF);
}

div.message{
    background: #C6C3EF;
}

table.listing td.tags {
    background-image: linear-gradient(#AAAAE6,#AAAAE6);
}

table.listing td.replies{
    background-image: linear-gradient(#AAAAE6,#AAAAE6);
}

div.message{
    background: #C6C3EF;
}
table.listing td.poster{
    background: #AAAAE6;
}
table.listing td.frm{
    background: #AAAAE6;
}
div.message.bestAnswer{
    background: #AAAAE6;
}

/*PROFIELEN*/
div.galleryHeadingContainer, div.pageTabsContainer{
        background-color: #9E99DB;
}

/*Karmastore*/
table.itemList, table.text-fontsmall.marginTop5{
        background: #C6C3EF;
}

/*Tweakblogs admin*/
table.tweakblog{
        background: #C6C3EF;
}

/*ABOSHOP*/

.aboShop .info{
        background:#C6C3EF;
        background-image:linear-gradient(#C6C3EF,#C6C3EF);
}

/*VIDEO'S*/

td.item{
        background: #242626;
} } 

ik sta open voor suggesties en/of verbeteringen.

De images zien er echt gaaf uit. Echter werkt de css niet bij mij. Als ik straks tijd heb/maak zal ik is wat gedeeltelijk invoegen om te zien of het dan wel de juiste layout weergeeft. Hulde voor je inzet.

[ard1998]

bedankt voor de reactie, welke browser gebruik je? ik heb de css totdusver alleen werkend gekrgen op de nieuwste google chrome. support voor andere browsers komt later.

[GerardVanAfoort]

ard1998 schreef op dinsdag 08 maart 2016 @ 12:15:
bedankt voor de reactie, welke browser gebruik je? ik heb de css totdusver alleen werkend gekrgen op de nieuwste google chrome. support voor andere browsers komt later.

Firefox 44.0.2 en Safari op iOS 9.2.1 en 7.1.2.

[ard1998]

voor firefox en safari zijn de browsers waarvoor ik nog exstra code in de css moet schrijven, firefox gebruikt het moz framework en safari gebruikt het webkit framework. Voor beide browsers ben ik van plan om hier code voor toe te voegen zodat deze goed weergeven worden. ik hoop ergens deze of volgende week de comptabiliteit met alle browsers rond te hebben. totdat ik de CSS hiervoor aangepast heb kan ik je aleen aanraden om een andere browser te gebruiken. ik zal de CSS update in dit forum plaatsen waneer deze af is.

[GerardVanAfoort]

ard1998 schreef op dinsdag 08 maart 2016 @ 12:35:
voor firefox en safari zijn de browsers waarvoor ik nog exstra code in de css moet schrijven, firefox gebruikt het moz framework en safari gebruikt het webkit framework. Voor beide browsers ben ik van plan om hier code voor toe te voegen zodat deze goed weergeven worden. ik hoop ergens deze of volgende week de comptabiliteit met alle browsers rond te hebben. totdat ik de CSS hiervoor aangepast heb kan ik je aleen aanraden om een andere browser te gebruiken. ik zal de CSS update in dit forum plaatsen waneer deze af is.

Dat ik nu helemaal geen paars zie op Firefox kan ook door iets heel anders komen... Transip, caches en andere ongein. [fp] Layout kapot op hele site

Maar voor de paarse layout ga ik wel tegen mijn principes in ff Chrome installeren op Win 7

[PromWarMachine]

Bij mij doet hij helaas niets. Net een upgrade gedaan naar de nieuwste versie van Chrome. (Versie 49.0.2623.75 m)

'k Zal vanavond even gaan debuggen waar de fout kan zitten.
Heb mijn eigen CSS er allemaal uit gehaald, dus daar ligt het niet meer aan.

Iemand anders dan ard1998 die het aan de praat heeft?

[NMe]

Gewoon die overbodige for-loop weg laten.

[ard1998]

je heb net voor het eerst firefox geinstalleerd (ben een trouwe GG gebruiker), maar ik zie vrijwel alles normaal

[PromWarMachine]

NMe schreef op dinsdag 08 maart 2016 @ 12:48:
Gewoon die overbodige for-loop weg laten.

Je was me nét voor.
Dan werkt het inderdaad!

Best een aardige poging. Jammer dat ik het niet meer kan vergelijken met de echte paars.
Hoewel, zeef had gezegd van wel toch? Hmm

[ard1998]

ik heb de post aangepast

[Thandor]

Bij deze plak ik mijn work-in-progress CSS ook even hier neer. Ik heb het e.e.a. ook "verpaarst". Ik heb verder geen specifieke CSS-skills dus heb simpelweg default CSS gekopieerd en de kleuren aangepast .

Screenshots:


Stylesheet:

Cascading Stylesheet:

/* Menu gradient */
#menubar{background:#9B9BE1;background-image:-webkit-linear-gradient(#9B9BE1,#AAAAE6 68px);background-image:-moz-linear-gradient(#9B9BE1,#AAAAE6 68px);background-image:linear-gradient(#9B9BE1,#AAAAE6 68px);z-index:110;border-bottom:1px solid #313232;box-shadow:inset 0 -1px 0 #b03941;left:0;height:44px}
#menubar{background:#9B9BE1;background-image:-webkit-linear-gradient(#9B9BE1,#AAAAE6 68px);background-image:-moz-linear-gradient(#9B9BE1,#AAAAE6 68px);background-image:linear-gradient(#9B9BE1,#AAAAE6 68px);z-index:110;border-bottom:1px solid #313232;box-shadow:inset 0 -1px 0 #b03941;left:0;height:44px}
#menubar{background:#9B9BE1;background-image:-webkit-linear-gradient(#9B9BE1,#AAAAE6 68px);background-image:-moz-linear-gradient(#9B9BE1,#AAAAE6 68px);background-image:linear-gradient(#9B9BE1,#AAAAE6 68px);z-index:110;border-bottom:1px solid #313232;box-shadow:inset 0 -1px 0 #b03941;left:0;height:44px}

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

/* Menu hover*/
#menu>ul>li:hover,#logo:hover{height:43px;background:#9B9BE1;background-image:-webkit-linear-gradient(#9B9BE1,#AAAAE6);background-image:-moz-linear-gradient(#9B9BE1,#AAAAE6);background-image:linear-gradient(#9B9BE1,#AAAAE6);border-bottom:1px solid #9B9BE1}

/* Rode lijn onder het menu */
#menubar{background:#9B9BE1;background-image:-webkit-linear-gradient(#9B9BE1,#AAAAE6 68px);background-image:-moz-linear-gradient(#9B9BE1,#AAAAE6 68px);background-image:linear-gradient(#9B9BE1,#AAAAE6 68px);z-index:110;border-bottom:1px solid #313232;box-shadow:inset 0 -1px 0 #313232;left:0;height:44px}

/* Tekst */
h1,h2,h1 a,h2 a{color:#00084A}

/* Geselecteerde item in menubar */
#menu>ul>li.active a{color:#FDD103}

/* Geselecteerde item in forum */
.pageTabs li.active a, .pageTabs li.active a:hover { padding-top: 1px; color: #00084A;}

/* Hover op subfora */
table.listing td a:hover, table.listing td.topic a:hover, table.listing td.title a:hover, table.listing td.tags a:hover, table.listing td.topic small a:hover, table.listing td.poster a:hover {
    color: #336699;
}

/* FP menu hovers (pricewatch, settings e.d.) */
#categoryBrowser li.active.more {
    background-position: 252px -18px;
    background: url(../../g/if/categories/arrows.png) no-repeat 252px -18px,-webkit-linear-gradient(#AAAAE6,#C6C3EF) 0 0;
    background: url(../../g/if/categories/arrows.png) no-repeat 252px -18px,-moz-linear-gradient(#AAAAE6,#C6C3EF) 0 0;
    background: url(../../g/if/categories/arrows.png) no-repeat 252px -18px,linear-gradient(#AAAAE6,#C6C3EF) 0 0;
}

.settingsSideBar #categoryBrowser.sidebar li.active.more {
    background: url(../../g/if/categories/arrows.png) no-repeat 160px -18px,rgba(0,0,0,0) linear-gradient(#AAAAE6,#C6C3EF) repeat scroll 0 0;
}

/*  
 -= Officiele kleuren =-
Donkerpaars: AAA-AE6
Lichtpaars: C6C-3EF
Donkere tekst: 000-84A

-= Onofficiele kleuren =-
Donkerderpaars: 9B9-BE1
Lichterderpaars: D0C-EF2
*/

/* Forum posts */
div.info, div.error, div.message, div.faq, form.insertMessage, form.form1, form.form2, #folders, #myprofilecontainer {
    border: 1px solid #AAAAE6;
    border-radius: 1px;
    background: #0effff no-repeat;
    background-image: -webkit-linear-gradient(#AAAAE6,#C6C3EF 40px);
    background-image: -moz-linear-gradient(#AAAAE6,#C6C3EF 40px);
    background-image: linear-gradient(#AAAAE6,#C6C3EF 40px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.33);
}

/* Achtergrond forum posts */
#contentArea {
    padding-top: 20px;
    padding-bottom: 20px;
    background: #D0CEF2;
    margin-bottom: 20px;
}

/* Achtergrond subfora titels */
table.listing td {
    border-bottom: 1px solid #AAAAE6;
    border-top: 1px solid #AAAAE6;
    background: #AAAAE6;
    background-image: -webkit-linear-gradient(#AAAAE6,#C6C3EF);
    background-image: -moz-linear-gradient(#AAAAE6,#C6C3EF);
    background-image: linear-gradient(#AAAAE6,#C6C3EF);
}

/* Achtergrond forum categorieen */
table.listing {
    background: #9B9BE1;
    background-image: -webkit-linear-gradient(#9B9BE1,#AAAAE6);
    background-image: -moz-linear-gradient(#9B9BE1,#AAAAE6);
    background-image: linear-gradient(#9B9BE1,#AAAAE6);
}
table.listing td.ind, table.listing td.ind2 {
    border-left: 1px solid #AAAAE6;
}
table.listing td.last {
    border-right: 1px solid #AAAAE6;
}

/* Forum page tabs */
.pageTabs li {
    float: left;
    height: 28px;
    margin-top: 1px;
    margin-right: 9px;
    border: 1px solid #9B9BE1;
    border-bottom: 0;
    background: #9B9BE1;
    background-image: -webkit-linear-gradient(#9B9BE1,#AAAAE6);
    background-image: -moz-linear-gradient(#9B9BE1,#AAAAE6);
    background-image: linear-gradient(#9B9BE1,#AAAAE6);
}

.pageTabs li.active {
    height: 30px;
    margin-top: 0;
    border-color: #AAAAE6;
    background-image: -webkit-linear-gradient(#9B9BE1,#4D5CD5);
    background-image: -moz-linear-gradient(#9B9BE1,#4D5CD5);
    background-image: linear-gradient(#9B9BE1,#4D5CD5);
}

/* Site achtergrond */
body, #bottom div.hr, #entity, #searchbar, .galleryHeadingContainer, .pageTabsContainer, .notificationsContainer {
    background-color: rgb(109, 112, 137);
}

/* Reclame block */

.relatedBlock, .rightInfoBlock {
    padding: 15px 15px 0 17px;
    border: 1px solid #fff;
    border-radius: 1px;
    background: #AAAAE6;
    background-image: -webkit-linear-gradient(#AAAAE6,#AAAAE6);
    background-image: -moz-linear-gradient(#AAAAE6,#AAAAE6);
    background-image: linear-gradient(#AAAAE6,#AAAAE6);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.33);
}

/* Polls en dergelijk */
.darkFpBlock {
    padding: 15px 15px 17px;
    border: 1px solid #dddede;
    border-radius: 1px;
    background: #AAAAE6;
    background-image: -webkit-linear-gradient(#AAAAE6,#AAAAE6);
    background-image: -moz-linear-gradient(#AAAAE6,#AAAAE6);
    background-image: linear-gradient(#AAAAE6,#AAAAE6);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.33);
}

/* Verbergen menu bottom bar (Wij stellen technologie op de proef)*/
#menubottombar {
    height: 0px;
    line-height: 1.7;
    overflow: hidden;
}

/* Informatieve reactie */
.reactieBody.informative {
    background: #AAAAE6;
}

[ard1998]

PromWarMachine schreef op dinsdag 08 maart 2016 @ 12:49:
[...]

Best een aardige poging. Jammer dat ik het niet meer kan vergelijken met de echte paars.
Hoewel, zeef had gezegd van wel toch? Hmm

op het forum had paars de tags td.altmsg1 en td.altmsg2 die ervoor zorge dat ma de eerste post in kleur a de tweede post kleur b had en de derde weer kleur a enzovoort. het ontbreken van deze code in de huidige vorm van t.net vind ik jammer.

[ Voor 29% gewijzigd door ard1998 op 08-03-2016 13:23 ]

[PromWarMachine]

ard1998 schreef op dinsdag 08 maart 2016 @ 13:19:
[...]


op het forum had paars de tags td.altmsg1 en td.altmsg2 die ervoor zorge dat ma de eerste post in kleur a de tweede post kleur b had en de derde weer kleur a enzovoort. het ontbreken van deze code in de huidige vorm van t.net vind ik jammer.

Dat was juist iets dat heel kenmerkend was voor paars inderdaad!
@zeef/crisp, is dit iets waar jullie in kunnen voorzien in het kader van deze contest, zonder dat het jullie bestaande template(s) in de weg zit?

[NMe]

ard1998 schreef op dinsdag 08 maart 2016 @ 13:19:
[...]


op het forum had paars de tags td.altmsg1 en td.altmsg2 die ervoor zorge dat ma de eerste post in kleur a de tweede post kleur b had en de derde weer kleur a enzovoort. het ontbreken van deze code in de huidige vorm van t.net vind ik jammer.

Vroeger kon je niet zonder maar tegenwoordig is dat nergens meer voor nodig.
https://css-tricks.com/almanac/selectors/n/nth-of-type/

[ Voor 8% gewijzigd door NMe op 08-03-2016 13:42 ]

[ard1998]

NMe schreef op dinsdag 08 maart 2016 @ 13:38:

Vroeger kon je niet zonder maar tegenwoordig is dat nergens meer voor nodig.
https://css-tricks.com/almanac/selectors/n/nth-of-type/

bedankt voor het advies alvast een nieuwe screenshot

[ Voor 5% gewijzigd door ard1998 op 08-03-2016 14:35 ]

[Zeehond]

AW_Bos schreef op dinsdag 08 maart 2016 @ 11:47:
[...]

#C6C3EF en #AAAAE6

Aldus de colorpicker-addon in mijn Firefox

Thanks nooit aan gedacht zo'n addon te gebruiken. Echter heb ik besloten gebruik te maken van het blauw welke de balk heeft in de "oer layout", volgens de colorpicker addon die ik gebruik is dat #041365.

Inmiddels kan ik weer wat voortgang laten zien (echter nog steeds geen paars, maar die menubalk goed krijgen kost zoveel moeite (zoveel browsers en scherm formaten ) Volgende stap is zorgen dat het forum wat paars kleurt en daarna bugs gaan fixen

Hier in elk geval hoe de menu balk er momenteel uit ziet in Firefox. Firefox werkt redelijk goed op verschillende schermformaten, in IE minder goed(de menu balk krijgt een of ander maf stuiter effect bij het scrollen) en chrome weet ik niet.


De zoekbalk moet nog een beetje naar beneden zoals te zien is. Verder zijn de forum tabbladen verplaatst naar onder de gele balk in vergelijking met de vorige versie die ik in dit forum eerder poste).

Gezien de inmiddels zeker 220 regels lange code welke nog vrij bugie is laat ik deze nog maar even achterwegen (eerste ervaring is belangrijk), Echter mocht iemand toch heel graag de custom css al willen uitproberen en de bugs voor lief nemen kan ik hem die wel even dm'n.

[ Voor 11% gewijzigd door Zeehond op 08-03-2016 16:39 ]

[Tyrian]

We gaan er even uit voor de reclame:

[Erycius]

Tyrian schreef op dinsdag 08 maart 2016 @ 16:19:
We gaan er even uit voor de reclame:
[afbeelding]

Het heeft gewerkt. Ik kwam.

[Jochem]

gaaf paars! Doet me erg terugdenken aan de begin tijd.

[DAzN]

Wauw, dat is een "blast from the past" inderdaad. Zojuist even op "paars" gezet en het activeert de nodige hoeveelheid nostalgie. Maar goed, vernieuwen is vooruitgang, dus ik ga weer terug naar tweakers_ng. Leuke actie om op deze manier afscheid te nemen.

[Uberprutser]

Paars en dan een ouwe CRT monitor voor je snuffert... Nostalgie!

[AW_Bos]

Ballebek schreef op woensdag 09 maart 2016 @ 16:16:
Paars en dan een ouwe CRT monitor voor je snuffert... Nostalgie!

Oh ja, die ga ik straks ook maar even van zolder slepen. Verder geloof ik dat XS4ALL nog een inbelpunt heeft, dus de nostalgische smaak terug brengen, dat moet wel lukken

[Karloe]

Inbel: Check.
17" CRT: Check, stond nog op zolder.
en de "boze"mailtjes van mijn Forum gebruikers stromen Binnen. Check.
(die kleurstelling had ik nog staan, en het zegt wat over mijn forum gebruikers....)

[ard1998]

[Zeehond]

Het heeft een tijdje geduurd maar hier is hij dan eindelijk GoT in het paars met een menubalk die ik heb proberen te laten lijken op die van de oude versie. Het heeft flink wat tijd gekost maar hieronder het resultaat.

afkomstig uit versie 1.21


Ik heb het met een aantal schermformaten getest en in firefox vind ik het prima werken. ook in IE en edge werkt het redelijk op een stuiter effect bij het scrollen na (allen wanneerhet wieltje van de muis gebruikt wordt) die ik niet krijg verholpen. In google chrome, safari en opera heb ik niet getest dus feedback hoe het daar in werkt wordt gewaardeerd .

let op Om gebruik te maken van de in de afbeelding weergeven menubar is een breedte van minimaal 1100 pixels nodig. indien dit niet het geval is zal automatisch de normale menubar worden getoond (op de kleuren naar dan), en worden verder alleen wat kleuren in paars gewijzigd. Zo kun je op een smartphone toch nog van het paarse GoT genieten terwijl alles lekker blijft werken, en op een groter scherm van een mooie menubar.

Ik ben momenteel nog aan het uitzoeken of er toch onderdelen van de menubar ook op tablet kan laten terugkomen maar dat kost nog wat tijd. Ook kan het natuurlijk zo zijn dat er onverhoopt toch nog een bugje schuil houd omdat ik niet alle schermformaten, en browsers heb kunnen testen, of omdat ik het simpelweg niet heb gezien. Mocht iemand dus zo'n bugje vinden meld het dan gerust aan mij via dm of in dit topic. (p.s. wanneer een onderdeel in de menubalk wordt geselecteerd wordt een rood boogje of lijntje weergeven, ik wilde het uiruit halen maar kon nergens in de code vinden waar het zich schuil houd, uiteindelijk vind ik het er nog niet zo slecht uit zien toen ik klaar was met de custom css, maar ik ga nog kijken of ik dat toch blauw krijg).

Wanneer ik een update uitbreng van de code zal ik deze in deze forum post plaatsen en er een vermelding bij zetten, dus mocht iemand het willen bijhouden, hou dan deze post in de gaten. dus mocht iemand het willen bijhouden, hou dan deze post in de gaten.

Deze css is helaas niet bruikbaar met de instelling header weergave niet altijd in beeld. Mogelijk komt hier in de toekomst een aparte css voor, maar meerdere css codes onderhouden kost tijd die ik helaas momenteel hiervoor niet beschikbaar heb.

Dan hier de code (schrik niet )

code:

/* versie 2.1*/

/*  --------- 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%;
}
}

Versie 2.0
css compitable gemaakt met de laatste Development-iteratie (#86)
Nog wat andere verbeteringen
huidige versie 2.1
Verbeteringen voor de mobiele versie.

[ Voor 255% gewijzigd door Zeehond op 13-06-2016 14:52 ]

[ard1998]

na even bezig geweest te zijn wil ik een update voor mijn css met jullie delen.

changelog:

forum: twee kleuren paars die elkaar afwisselen, net zoals vroeger, met dank aan NMe voor de tip die dit mogelijk maakt

bugfix: avhtergrond verandert niet meer als instellingen gewijzigd worden of notificaties bekeken worden

multi: enkele elementen zijn paars gemaakt.

Cascading Stylesheet: ard1998_paars_css.css

/* --------------- ALGEMEEN --------------- */

/*weghalen tracker*/
#tracker, #trackerButton{
position: relative;
visibility: hidden;
}

/*menu achtergrond aanpassen*/
#menubottombar{
        background: #00084A;
        width:initial;
margin-left: -6px;
}

#menubar{
    background:#00084A;
    z-index:110;border-bottom:1px solid #00084A;
    box-shadow:inset 0 -1px 0 #00084A;left:0;height:44px;
}

/*footer aanpassen*/
#bottom{
        background: #00084A;
        width:100.5%;
        margin-left: -6px;
}
#menubottombar{
        background: #00084A;
        width:initial;
}

/**/
td.pwimage.large{
border-bottom: #000000;
}

.pageTabsContainer,#entity{
background-color: #9E99DB!important
}

body.customColor, body.customColor #bottom div.hr{
        background-image: linear-gradient(#9E99DB,#9E99DB);
}

body.customColor #searchbar{background-color: #9E99DB;}


#contentArea, div.wrap, div.faq{
    background: #C6C3EF;
}

table.newtable.searchTable{
        background-image: linear-gradient(#C6C3EF,#C6C3EF);
}

tr{
    background: #C6C3EF;
}

h3.bar, h2.bar{
        background: #9CA2E7;
}

/* --------------- FRONTPAGE --------------- */

td.score, td.desc, td.multiplier{
        background: #424444;
}
tr.average, tr.last{
        background: #424444;
}
tr td hr.spacer{
        background: #424444;
}
.frontpage #community .userReview .userReviewDescription{
background:linear-gradient(#9CA2E7,#9CA2E7);
}

div.communityItem.useVisitedState, div.fpItem.darkFpBlock, td.publicationTime, div.relatedBlock, td.replies, td.title, div.fpItem, #recentlyTested{
    background: #C6C3EF;
}

div.reactieBody.informative.nochilds, div.reactieBody.informative, div.reactieBody.spotlight, div.reactieBody.spotlight.nochilds{
    background: #AAAAE6;
}

/* --------------- REVIEWS + PRICEWATCH + V&A + DOWNLOADS ---------------*/

tr.largethumb{
    background: #C6C3EF;
}

div.filterOption.collapsed, div.filterOption, div.filterOption.active{
    background: #C6C3EF;
}

#categoryBrowser div{position:relative;width:280px;height:372px;background: #C6C3EF;
}

#categoryBrowser li:hover{background:#9CA2E7;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.03);
}

#categoryBrowser .sublist{
        background:#C6C3EF;
}

.searchAanbod #nearbyAdForm{
background: #C6C3EF;
}

li.active.more{
        background: linear-gradient(#9CA2E7,#9CA2E7) 0 0;
}
/* --------------- FORUM ---------------*/

th, h2.bar.question, h2.bar.answer, h2.bar.other{
    background-image: linear-gradient(#9CA2E7,#9CA2E7);
}
#reageer.bar{
    background-color: #9CA2E7;
}

table.listing td.title, td.timeshort.last, td.topics, td.poster{
    background-image: linear-gradient(#C6C3EF,#C6C3EF);
}

table.listing td.topic{
    background: #C6C3EF;
}

table.listing td.time{
    background: #C6C3EF;
}

table.listing td.topics{
    background-image: linear-gradient(#C6C3EF,#C6C3EF);
}

/* achtergrond forumpost veranderen*/
div.message{
    background: #C6C3EF;
}

/* achtergrond iedere tweede forumpost veranderen*/
div.message:nth-of-type(2n){
        background: #AAAAE6;
}
/**/
table.listing td.tags {
    background-image: linear-gradient(#AAAAE6,#AAAAE6);
}

table.listing td.replies{
    background-image: linear-gradient(#AAAAE6,#AAAAE6);
}

div.message{
    background: #C6C3EF;
}
table.listing td.poster{
    background: #AAAAE6;
}
table.listing td.frm{
    background: #AAAAE6;
}
div.message.bestAnswer{
    background: #9CA2E7;
}

/* --------------- PROFIELEN --------------- */
div.galleryHeadingContainer, div.pageTabsContainer{
        background-color: #9E99DB;
}

/* --------------- KARMASTORE ---------------*/
table.itemList, table.text-fontsmall.marginTop5{
        background: #C6C3EF;
}

/*--------------- TWEAKBLOGS ADMIN ---------------*/
table.tweakblog{
        background: #C6C3EF;
}

/* --------------- ABOSHOP --------------- */

.aboShop .info{
        background:#C6C3EF;
        background-image:linear-gradient(#C6C3EF,#C6C3EF);
}

/* --------------- VIDEO'S --------------- */

/*uitzindering op td uit de agemeen sectie, veranderen achtergrondkleur*/
td.item{
        background: #242626;
}

ik ga binnenkort een tweakblog maken waarin ik de code en de changelog update.

- edit -
blogpost(s) aangemaakt. de nieuwste versies gaan hier weergeven worden: ard1998's blog: ard1998 paars css

[ Voor 1% gewijzigd door ard1998 op 11-03-2016 18:25 . Reden: link toevoegevoegd naar blogpost. ]

[Lief Adje]

top

[NMe]

Lijkt me sowieso handiger dan steeds je WiP-code hier te posten. Dat maakt het uiteindelijk alleen maar moeilijker om je meest recente versie te selecteren voor de wedstrijd.

[Zeehond]

Ik heb de gelen slogan bar laten terugkomen in de mobiele versie en gefixed dat de menubar nu ook in de mobiele versie echt blauw is. Verder heb ik nog een probleempje verholpen waardoor op de mobiele versie de titels van de nieuwsberichten op de frontpage te breed waren.

De mobiele versie ziet er nu zo uit:


De nieuwe versie staat in Zeehond in "A farewell to paars". Wanneer je gebruikt maakt van deze custom css, en bovenaan niet versie 1.9 staat, maar versie 1.8, 1.7, of helemaal geen versie nummer, gebruik je een oude variant. In het vervolg kun je ook naar deze versie nummer kijken bovenin en vergelijken met de code in de bovengenoemde reactie om te zien of deze kan worden bijgewerkt.

edit versie 1.9
verder is nu bij de balk met de forum tabbladen mooie gemaakt, (in eerder versie was deze net een stukje tekort).

[ Voor 31% gewijzigd door Zeehond op 11-03-2016 19:29 . Reden: aangepast op nieuwste versie 1.9 ]

[ard1998]

Zeehond schreef op vrijdag 11 maart 2016 @ 18:09:

edit versie 1.9
verder is nu bij de balk met de forum tabbladen mooie gemaakt, (in eerder versie was deze net een stukje tekort).

ik heb nog een leuke cleanup voor je regel 279+280 en 371+372 bevatten beide een } ik weet niet of het zo hoort, maar zo bespaar je toch weer twee regels code

[Zeehond]

ard1998 schreef op vrijdag 11 maart 2016 @ 22:10:
[...]


ik heb nog een leuke cleanup voor je regel 279+280 en 371+372 bevatten beide een } ik weet niet of het zo hoort, maar zo bespaar je toch weer twee regels code

Bedankt voor het meedenken , echter is van grot belang dat die twee } er staan. Deze geven namelijk het einde aan van de

Cascading Stylesheet:

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

regel en de

Cascading Stylesheet:

@media screen and (max-width: 1099px) {

Zonder deze twee haakjes zouden dus de stukjes codes niet goed meer werken die zorgen dat je bij kleinere schermen een anderen variant van de menu bar krijgt voorgeschoteld als op een groter scherm.

Mocht iemand nog een bugje vinden of een tip hebben hoor ik het natuurlijk graag

---

Ik heb in versie 1.10 nog wel een stukje site gevonden welke wit was en dit paars gemaakt, en de notificatie menu's paarse left en bottem borders gegeven .


Ik was mij wel aan het afvragen of het voor schermen die net de breedte van 1100px halen het misschien wat fijner is als de menu bar wat breder is.

[ Voor 22% gewijzigd door Zeehond op 11-03-2016 22:59 ]

[ard1998]

ik heb vanmorgen nog een test gedaan met jouw css. toen ik deze code toevoegde was een deel van het menuprobleem opgelost

#menu>ul>li:hover,#logo:hover{
height:43px;
background:#00084A;
background-image:linear-gradient(#00084A,#00084A);
border-bottom:1px solid #00084A;
}

ik had helaas geen tijd om voor de instelligen nog een uitzonderig te schrijven, maar ik ga ervanuit dat jij dat ook kan

overgens zijn er nog veel onderdelen op t.net die wit weergeven worden, een aantal frontpage elementen en de faq.

[Zeehond]

ard1998 schreef op zaterdag 12 maart 2016 @ 08:41:
ik heb vanmorgen nog een test gedaan met jouw css. toen ik deze code toevoegde was een deel van het menuprobleem opgelost

#menu>ul>li:hover,#logo:hover{
height:43px;
background:#00084A;
background-image:linear-gradient(#00084A,#00084A);
border-bottom:1px solid #00084A;
}

ik had helaas geen tijd om voor de instelligen nog een uitzonderig te schrijven, maar ik ga ervanuit dat jij dat ook kan

overgens zijn er nog veel onderdelen op t.net die wit weergeven worden, een aantal frontpage elementen en de faq.

Wow thanks, ik heb het meteen geïmplementeerd en nog even gezorgd dat dat stukje bij het tandwieltje weg is. De code zit nu op versie 1.11 en is hier te vinden. Uiteraard ere wie re toekomt dus jouw naam staat in commentaar in de code opgenomen . De onderdelen die op de frontpage wit zijn waren eerst paars, maar ik kwam er al snel achter dat niet lekker leest en heb ik ze met een update van de code wit gemaakt.

Gezien ik helaas niet meer tekst in mijn reactie mag plaatsen waar de code te vinden is zijn hier de precieze wijzigingen in versie 1.11 (ik heb namelijk nog wat gefixed).


Huidige versie 1.11
zorgt dat bij een muis over bij de icoontjes in de menu balk (waaronder ook de dm notificatie en enz.) geen roode lijntjes of boogjes meer word weergeven (met dank aan ard1998). Bij kleinere schermformaten (tot 1099px) is de top van de tracker nu ook donkerblauw, dit ziet namelijk beter uit (op grotere schermformaten is huis dus gewoon nog paars ). wanneer met de muis over de linkjes word gegaan in dropdown menu's meer, die van het profiel (in mijn geval -zeehond) zijn de linkjes nu ook blauw in plaats van rood.

mocht de code dus nog langer worden zal ik iets moeten verzinnen om deze toch te kunnen blijven posten hier. (ik weet niet of tekst in code blokken namelijk ook mee telt bij het max aantal tekens).

edit
en inderdaad, ik kan versie 1.12 niet publiceren Iemand een idee waar ik de code kan plaatsen? de code naar een mijn tweakers blog verplaatsen lijkt me ook niet helemaal gewenst.

[ Voor 17% gewijzigd door Zeehond op 12-03-2016 12:26 ]

[ard1998]

misschien kan je tijdelijk de css opslaan in een txt bestand en deze uploaden naar de cloud.

[Zeehond]

ard1998 schreef op zaterdag 12 maart 2016 @ 15:06:
misschien kan je tijdelijk de css opslaan in een txt bestand en deze uploaden naar de cloud.

Kan ik bestanden in private storage voor iedereen toegankelijk maken? Of bedoel je zoiets als OneDrive. Ik heb ook ven met een blogpost geprobeerd maar zelfs dat gaat niet, en dan heb ik alleen maar de code en nog niet eens een verhaaltje erbij...

[NMe]

Waarom post je het niet gewoon hier zodra je klaar bent? Je bent duidelijk nog volop bezig. Bovendien maak je het dan moeilijker voor de "competitie."

[Zeehond]

NMe schreef op zaterdag 12 maart 2016 @ 16:18:
Waarom post je het niet gewoon hier zodra je klaar bent? Je bent duidelijk nog volop bezig. Bovendien maak je het dan moeilijke voor de "competitie."

Versie 1.12 heb ik klaar, mochten er verder geen bugs meer komen bovendrijven zal er waarschijnlijk niets meer veranderen (oei dit heb ik eerder gezegd ). Inmiddels heb ik de code toch compact genoeg weten te maken dat hij in een weblogpost past maar niet in mijn eerdere reactie.

Maar ook al zou ik nog zaken wijzigen, veranderd er weinig aan dat de code niet hier in een reactie past. Of ik zou een reactie moeten posten met alleen de code en verder niets. Ik ben me er bewust van dat als ik mijn code verplaatst ik het moeilijker maak voor de "competitie." daarom geniet het plaatsen van de code in een blogpost ook niet van mijn voorkeur.

edit
als ik niet meer de = css gebruik in de code blokken kan ik wel mijn nieuwe versie posten in mijn eerdere reactie. Hoewel dan dus de opmaak weg valt. Ik weet niet waardoor dit komt en of dit een bugje is maar versie 1.12 is nu hier te vinden.

Ik zag overigens dat als ik een blogpost maak van mijn custom css ik dan niet de eerste ben. In eerste instantie wilde ik hier mee wachten tot na de wedstrijd omdat als ik nu al een blogpost maak mijn code dan breder onder de aandacht zou komen dan de code van iemand zonder tweakblog. Even kijken of ik nu al een blogpost neer zet.

[ Voor 31% gewijzigd door Zeehond op 12-03-2016 17:07 ]

[ard1998]

zullen we een apart topic openen voor de definitieve inzendingen?

[Verwijderd]

ard1998 schreef op zaterdag 12 maart 2016 @ 18:30:
zullen we een apart topic openen voor de definitieve inzendingen?

Waarom ? daar is dit topic toch voor?

[Zeehond]

ard1998 schreef op zaterdag 12 maart 2016 @ 18:30:
zullen we een apart topic openen voor de definitieve inzendingen?

Dit lijkt me eerder gezegd iets voor zeef om over te beslissen. Ik weet niet of er misschien zoiets al op de planning stond na 29 maart zodat er gestemd kan worden? Ik vind het nog niet meteen zo'n gek idee om in een topic allen definitieve inzendingen te zetten.

[Aphelion]

Leuk. Paars even aangezet. Daarna een kijkje in de huiskamer. Vroeger had een topic alleen niet 100 pagina's. Toch niet helemaal het zelfde als vroeger!

[zeef]

ard1998 schreef op zaterdag 12 maart 2016 @ 18:30:
zullen we een apart topic openen voor de definitieve inzendingen?

Verwijderd schreef op zaterdag 12 maart 2016 @ 18:48:
[...]


Waarom ? daar is dit topic toch voor?

Zeehond schreef op zaterdag 12 maart 2016 @ 20:01:
[...]

Dit lijkt me eerder gezegd iets voor zeef om over te beslissen. Ik weet niet of er misschien zoiets al op de planning stond na 29 maart zodat er gestemd kan worden? Ik vind het nog niet meteen zo'n gek idee om in een topic allen definitieve inzendingen te zetten.

[Paars] Post hier je definitieve CSS scripts

[Electrowolf]

zeef schreef op zondag 13 maart 2016 @ 10:52:
[...]

[Paars] Post hier je definitieve CSS scripts

Er zijn nu een aantal losse CSS wedstrijdresultaattopics met allemaal goede CSS setjes voor GoT en de FP. Echter merk ik wel dat ze allemaal zeer snel in de vergetelheid vervallen. Zou het mogelijk zijn er iets centraals van te maken zodat ze ook voor mensen die wat minder vaak op GoT rondstruinen te vinden zijn? BV een referentiepagina (of link naar) bij de custom css in je profiel? Al is het maar dat ze goed getagged worden en de link een search is naar die tag .

[ard1998]

Zeehond schreef op zaterdag 12 maart 2016 @ 20:01:
[...]

Dit lijkt me eerder gezegd iets voor zeef om over te beslissen. Ik weet niet of er misschien zoiets al op de planning stond na 29 maart zodat er gestemd kan worden? Ik vind het nog niet meteen zo'n gek idee om in een topic allen definitieve inzendingen te zetten.

en hoe kom je op 29 maart? er is aleen gezegd dat paars en grijs op 29 maart gestaakt word. misschien is het inzendronde tot en met 24 maart zodat de community van 25 tot en met de ochtend van 29 maart kan stemmen.dan hebben we een "winnaar" op het moment dat paars en grijs gestaakt worden.

[zeef]

Zullen we de inzendtermijn sluiten op 4 april? Dan heeft iedereen ruim de tijd om een inzending te maken.

Electrowolf schreef op zondag 13 maart 2016 @ 12:32:
[...]


Er zijn nu een aantal losse CSS wedstrijdresultaattopics met allemaal goede CSS setjes voor GoT en de FP. Echter merk ik wel dat ze allemaal zeer snel in de vergetelheid vervallen. Zou het mogelijk zijn er iets centraals van te maken zodat ze ook voor mensen die wat minder vaak op GoT rondstruinen te vinden zijn? BV een referentiepagina (of link naar) bij de custom css in je profiel? Al is het maar dat ze goed getagged worden en de link een search is naar die tag .

Dat inzendtopic, dat houden we als centraal topic aan.

[ Voor 75% gewijzigd door zeef op 14-03-2016 11:58 ]

[Zeehond]

ard1998 schreef op maandag 14 maart 2016 @ 09:43:
[...]


en hoe kom je op 29 maart? er is aleen gezegd dat paars en grijs op 29 maart gestaakt word. misschien is het inzendronde tot en met 24 maart zodat de community van 25 tot en met de ochtend van 29 maart kan stemmen.dan hebben we een "winnaar" op het moment dat paars en grijs gestaakt worden.

Dat kwam af van het volgende

Vanaf nu tot en met dinsdag 29 maart kunnen alle ingelogde tweakers paars en silver gebruiken*. Iedereen die nog een nostaligsche blast from the past wil doen kan zijn hart nog een keer oldskool ophalen.

en een stukje verder staat

We gaan tijdens die periode een wedstrijd houden: wie maakt de mooiste CSS-versie van paars?

Vanwege die ging ik er vanuit dat daarmee werd terugverwezen naar vanaf nu tot 29 maart en dat dus ook de inzend tijd voor je custum css was.

zeef schreef op maandag 14 maart 2016 @ 11:56:
Zullen we de inzendtermijn sluiten op 4 april? Dan heeft iedereen ruim de tijd om een inzending te maken.

Is mij prima op het moment zijn er nog maar weinig inzendigen dus ruim te tijd geven tot 4 april lijkt mij geen slecht idee. maar het is uiteraard aan tweakers om daar over te beslissen.

[zeef]

4 april it is.

[Electrowolf]

zeef schreef op maandag 14 maart 2016 @ 11:56:
Zullen we de inzendtermijn sluiten op 4 april? Dan heeft iedereen ruim de tijd om een inzending te maken.

[...]

Dat inzendtopic, dat houden we als centraal topic aan.

Ik bedoel vooral dat dit de zoveelste css wedstrijd is met een eigen inzendtopic.

Op dit moment vervalt het harde werk dat er wordt gedaan om iets moois te maken voor deze wedstrijden helaas snel in de vergetelheid. Daarom zou ik het mooi (en handig voor mezelf ) als er iets mee zou gebeuren.

Makkelijkste zou bv een tag zijn, maar iets fanciers kan natuurlijk ook.

[ard1998]

misschien op het forum een forumlist maken voor wedstrijden waarin je categorieen hebt, en per categorie aparte topics per wedstrijd.

---

Overgens heb ik net V1.0_RC1 gepost in het hiervoorbestemde topic. ik ben benieuwd of er iemand suggesties of verbeteringen heeft.

[dj_vibri]

geen echte tweaker hier heb hem op paars gezet, nadien op silver maar zie geen mogelijkheid om naar de huidige te gaan? Of het is al te laat op de dag

[zeef]

dj_vibri schreef op dinsdag 15 maart 2016 @ 14:24:
geen echte tweaker hier heb hem op paars gezet, nadien op silver maar zie geen mogelijkheid om naar de huidige te gaan? Of het is al te laat op de dag

Hier kiezen voor tweakers_ng, dan heb je 'gewoon' weer terug.

[ Voor 19% gewijzigd door zeef op 15-03-2016 14:42 ]

[dj_vibri]

zeef schreef op dinsdag 15 maart 2016 @ 14:40:
[...]

Kiezen voor tweakers_ng, dan heb je 'gewoon' weer terug.

dadelijk eens proberen, had tweakers gekozen (geen _ng erachter, deze staat er niet tussen :d ), maar dan kreeg ik alsnog een oude styling terug (op zich geen probleem hoor, stoor er mij verder niet aan en is lekker nostalgisch vroeg het mij alleen af )

update: Inderdaad veel te laat voor mij zat bij stylesheet te kijken

[ Voor 8% gewijzigd door dj_vibri op 15-03-2016 14:44 ]

[Zeehond]

Vandaag ng een beetje zitten sleutelen aan de bottom van de pagina. Dit heb ik er uiteindelijk va gemaakt om deze meer met de header te laten overeenkomen.

bottom zoals getoond op grotere schermen bijv. laptops en desktops. (minimaale breedte 1100px)


Overigens verschilt ook per schermformaat hoe de bottom precies zal worden weergegeven

[ Voor 8% gewijzigd door Zeehond op 16-03-2016 14:20 ]

[ard1998]

ik ga binnenkort meer comments in mijn css zetten om de css te verduidelijken.

[Zeehond]

Vandaag bezig geweest met het mooier maken van de tracker, en het beter integreren van de tracker met de rest van de lay-out. Verder nog een paar bugs geplet. De nieuwste versie staat hier



edit
huidige versie 1.21 Fix bottom mobiele versie

[ Voor 6% gewijzigd door Zeehond op 20-03-2016 14:36 ]

[ard1998]

Ondertussen heb ik (volgens mij) alle geplande functies geïmplementeerd. Ik hoop dat er geen bugs meer in zitten.

[PromWarMachine]

ard1998 schreef op maandag 21 maart 2016 @ 19:05:
Ondertussen heb ik (volgens mij) alle geplande functies geïmplementeerd. Ik hoop dat er geen bugs meer in zitten.

Top! Ik heb echter nog een klein verzoekje.
Je hebt in de topics zelf mooi de posts om en om een ander kleurtje gegeven.

Dit was bij de oude paars ook het geval in de active topics listing.
Kun je het daar nog maken?
Je hebt het nu zo gemaakt dat de kleuren verticaal steeds wisselen (kolommen dus), maar dat zou eigenlijk op de rijen moeten zijn, in plaats van de kolommen!

Vast bedankt

[ard1998]

Bedankt voor de suggestie, ik ga er vanmiddag mee aan de slag

--- edit ---

waarschijnlijk heb je het niet over de active topics listing
- oud https://web.archive.org/w...earch?action=activetopics
- nieuw http://gathering.tweakers.net/forum/list_activetopics

maar over de instellingen (vroeger prefs)
- oud https://web.archive.org/w....tweakers.net/preferences
- nieuw https://secure.tweakers.net/instellingen/layout/

heb ik dat goed?

[ Voor 77% gewijzigd door ard1998 op 22-03-2016 13:36 ]

[Zeehond]

Versie 1.22 breng Paarse DM, notificatie en producten menu's en 2 bugfixes. De CSS code is hier te vinden.

[F_J_K]

Nice!

[Zeehond]

F_J_K schreef op dinsdag 22 maart 2016 @ 21:50:
Nice!

Thanks

[mace]

* mace pours one out for the dead homie

[ Voor 8% gewijzigd door mace op 22-03-2016 22:08 ]

[ard1998]

V1.0_RC10 is uit. het is waarschijnlijk een van de laatste RC's

ik heb de notificaties aangepast en het ziet er momenteel zo uit
op mobiel zit het er vrijwel hetzelfde uit.

[ard1998]

Zou iemand willen helpen met het vinden van bugs in V1.0_RC13?

[GerardVanAfoort]

ard1998 schreef op donderdag 24 maart 2016 @ 11:40:
Zou iemand willen helpen met het vinden van bugs in V1.0_RC13?

Ja hoor, draaide nog RC9

[ard1998]

ik heb de afgelopen twee dagen veel bugs geplet en wat dingen toegevoegd(en 4 RC's uitgebracht )

-- EDIT --

RC15 is uit, het kan zomaar de laatste RC zijn voordat 1.0 uitkomt.

-- nog een editit --

RC 16 is uit, verbeteringen met navigeren in pricewatch.

[ Voor 61% gewijzigd door ard1998 op 25-03-2016 23:06 ]

[ard1998]

versie 1.0 is klaar en is vanaf hier te kopiëren

we kunnen de klassieke paars nu met een gerust hart uitzwaaien en het nieuwe verwelkomen.

Ik wil beloven dat ik de css na de wedstrijd blijf ondersteunen en verbeteren. Bugmeldingen, suggesties en vragen blijven welkom.

[ Voor 13% gewijzigd door ard1998 op 26-03-2016 15:13 ]

[Zeehond]

Vandaag flink aan de CSS gesleuteld. een update van versie 1.22 naar 1.24 brengt:

• Wanneer er met de muis over een notificatie heen word bewogen wordt deze blauw.
• Fix voor witte achtergrond als er items in producten vergelijker staan
• Paarse tracker op smartphones
• Paarse dm, notificatie en producten menu's op smartphones
• Paarse navigatie menu's op smartphones
• bredere menubalk bij schermen tussen de 1100px en 1499px.

De code is hier te vinden

Klik op een plaatje voor een grotere versie

[ Voor 5% gewijzigd door Zeehond op 26-03-2016 16:11 ]

[zeef]

't is gedaan.

[DDX]

[allure]

Shit! Dat is wennen na 15jaar "paars" gebruikt te hebben...

Cold turkey over haha

[AW_Bos]

R.I.P. paars

[DDX]

Meteen ook afscheid van m'n abonnement.

[ard1998]

Maar gelukkig hebben we twee CSS die paars aflossen

offtopic:
waneer is interatie #83 beschikbaar?

[Kees]

ard1998 schreef op dinsdag 29 maart 2016 @ 13:24:
Maar gelukkig hebben we twee CSS die paars aflossen

offtopic:
waneer is interatie #83 beschikbaar?

offtopic:
rond 13:37. Edit: voila: plan: Verbeterde telecomdata - Development-iteratie #83

[ Voor 24% gewijzigd door Kees op 29-03-2016 13:42 ]

[Electrowolf]

zeef schreef op dinsdag 29 maart 2016 @ 11:21:

't is gedaan.

En hoeveel mensen hadden paars als voorkeur staan aan het einde van de afscheidsperiode?

[zeef]

Electrowolf schreef op dinsdag 29 maart 2016 @ 13:56:
[...]


En hoeveel mensen hadden paars als voorkeur staan aan het einde van de afscheidsperiode?

Volgens onze schattingen zo'n 125*.

*= 122 gebruikers met 'got' of 'silver' die afgelopen 2 maanden ook actief zijn geweest.

[ Voor 18% gewijzigd door zeef op 29-03-2016 14:09 ]

[Electrowolf]

Hmm, maar een toename van 50 tot 100% aan actieve gebruikers. Had verwacht dat het er nog wel meer zouden zijn nu het nog voor de laatste keer kon. Klaarblijkelijk zijn er ook veranderingen die wat minder geschreeuw vanuit de community teweeg brengen .

[Major Carnage]

Dat is wel even een schok zeg, zo'n totaal andere forum layout

[_Ernst_]

DDX schreef op dinsdag 29 maart 2016 @ 13:04:
Meteen ook afscheid van m'n abonnement.

^^ Dit inderdaad.

Erg wennen dit, oogt op het eerste gezicht ook allemaal een stuk minder ruimte-efficiënt (myreact page is 3 keer zo lang, en moet naar de helft van de pagina scrollen om hetzelfde te zien al voorheen).

[Dirk]

Als je bovenaan op het tandwieltje klikt en dan vervolgens "Algemeen" ook nog uitvouwd, dan kun je onderaan de dichtheid op 'compact' zetten. Dat moet een eind schelen.

[ard1998]

Deze poll gaat over de eerste CSS uit dit forum
[Paars] Post hier je definitieve CSS scripts

Poll: wat vind je van mijn CSS
• Geweldig
• Henk
• Leuk
• Gaat wel
• Niet mijn smaak
• Slecht
• Overig (post uw mening)

^{Ook een poll maken? Klik hier}

[ Voor 7% gewijzigd door ard1998 op 30-03-2016 10:54 ]

[Zeehond]

De Vernieuwde telecomvergelijker bracht een extra tablad Prijzen met abonoment. Echter was in mijn CSS hiervoor niet altijd genoeg ruimte waardoor tabladen half weg vielen achter henk. In versie 1.26 is dit verholpen. De nieuwe code is hier te vinden.

[Major Carnage]

Ik sluit me aan bij de opmerkingen van Ernst. Ik heb zojuist de aangegeven optie voor compacte weergave aangezet, wat maar dat verhelpt niet dat er een enorm notepad vak ruimte inneemt dat ik elke keer weer weg moet scrollen om iets te kunnen zien. Door de huidige indeling blijft er onder het profielicon een hoop lege ruimte over.
De links naast je profielinformatie en vervolgens dat notepad ergens anders (eigen tab ofzo, of optie om uit te zetten) zou voor mij al een stuk prettiger werken.

[NMe]

De layout van de MyReact-pagina is juist vrijwel gelijk gebleven sinds paars, toch? Goed, de styling is moderner gemaakt maar de layout an sich is AFAIK hetzelfde.

[RobbyTown]

Echt gaaf dit het begin van Tweakers in leven te houden. Succes met de mensen die een mooie paarse layout in elkaar zetten.

[ard1998]

ik heb net 1.0.6 uitgebracht waarin ik de tweakmoticons achtergrond heb aangepast zodat het overeenkomt met de rest van de CSS.

[zeef]

Ik zou niet teveel moeite in TweakMoticons steken.

[ard1998]

zeef schreef op vrijdag 01 april 2016 @ 09:02:
Ik zou niet teveel moeite in TweakMoticons steken.

ach, het was slechts een toevoeging van 3 lijnen CSS.

--- edit ---
In 1.0.7 zijn deze lijnen css weer weggehaald

[ Voor 12% gewijzigd door ard1998 op 02-04-2016 07:16 ]

[ard1998]

De stemronde kan officieel beginnen, ik heb er zin in.

--- edit ---
zeef, hoe gaat er eigenlijk op de CSSjes gestemd worden?

[ Voor 40% gewijzigd door ard1998 op 06-04-2016 08:50 . Reden: vraag ]

[zeef]

ard1998 schreef op dinsdag 05 april 2016 @ 08:10:
De stemronde kan officieel beginnen, ik heb er zin in.

--- edit ---
zeef, hoe gaat er eigenlijk op de CSSjes gestemd worden?

Even een poll aanmaken.

Paarse CSS winnaar kiezen

Wie gaat het worden? jullie gaan kiezen! :)

Poll

ard1998
-Zeehond

De opties zijn uitgeschakeld omdat de deelname gesloten is

Je gebruikt een adblocker en daarom kun jij niet meedoen aan deze actie. Lees over ons verdienmodel en waarom jouw steun voor ons belangrijk is.

Aantal stemmen: 31. Deelname gesloten op 28-04-2016 15:41. Stemmen is niet meer mogelijk.

[ Voor 3% gewijzigd door zeef op 07-04-2016 15:46 ]

[Zeehond]

Yeah er mag gestemd worden Even nog snel mijn foto album geüpdatet met recente plaatjes.

Voor wie aan het zoeken is, de twee CSS codes zijn hier te vinden

Nu moet ik opletten voordat mijn nickname ineens gewijzigd word maar -zeehond is met een kleine letter, detail

[ Voor 38% gewijzigd door Zeehond op 08-04-2016 00:14 ]

[Jeroen Sack]

als abonnee maak je bovendien meer kans om te winnen.

Wordt er iets verloot dan?