Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

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

Pagina: 1 ... 15 16 17 Laatste
Acties:

Onderwerpen


  • matroosoft
  • Registratie: juni 2011
  • Laatst online: 11:36

matroosoft

Lone Christian

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

Je bedoelt
Cascading Stylesheet:
1
.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). :X :+
Haha. :) Maar nee, ik bedoel die badges die aangeven dat je abonnee bent. Kan het niet aanzien, al die patsers.. :+ :+

  • Evest
  • Registratie: januari 2014
  • Niet online

Evest

Moderator General Chat

The Mountain

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
  • Registratie: juni 2011
  • Laatst online: 11:36

matroosoft

Lone Christian

quote:
Evest 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:
1
2
/* 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:
1
2
/* tweakerBadge verwijderen */
.tweakersBadge{ display:none; }

Ik dacht dat je abonnee was?! :9

  • Raven
  • Registratie: november 2004
  • Niet online

Raven

Marion Raven fan

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

After the first glass you see things as you wish they were. After the second you see things as they are not. Finally you see things as they really are, and that is the most horrible thing in the world...

Oscar Wilde


  • matroosoft
  • Registratie: juni 2011
  • Laatst online: 11:36

matroosoft

Lone Christian

quote:
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. :P

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
/* toggle-quote verwijderen */
.messagecontent .toggle-quote {
    display:none;
}
.messagecontent .message-quote-div.large-quote {
    height: initial;
    overflow: visible;
    padding-bottom: 10px;
}


  • Raven
  • Registratie: november 2004
  • Niet online

Raven

Marion Raven fan

Thanks, dat lijkt te werken :)

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

After the first glass you see things as you wish they were. After the second you see things as they are not. Finally you see things as they really are, and that is the most horrible thing in the world...

Oscar Wilde


  • Evest
  • Registratie: januari 2014
  • Niet online

Evest

Moderator General Chat

The Mountain

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

  • Raven
  • Registratie: november 2004
  • Niet online

Raven

Marion Raven fan


Cascading Stylesheet:
1
padding-bottom: 10px;

erbij did the trick, thanks :)

After the first glass you see things as you wish they were. After the second you see things as they are not. Finally you see things as they really are, and that is the most horrible thing in the world...

Oscar Wilde


  • matroosoft
  • Registratie: juni 2011
  • Laatst online: 11:36

matroosoft

Lone Christian

quote:
Raven schreef op dinsdag 16 februari 2016 @ 17:21:
Cascading Stylesheet:
1
padding-bottom: 10px;

erbij did the trick, thanks :)
Klopt, ook gevonden. Heb het even aangepast.

  • matroosoft
  • Registratie: juni 2011
  • Laatst online: 11:36

matroosoft

Lone Christian

quote:
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:
1
2
3
4
5
6
7
8
.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
  • Registratie: januari 2011
  • Laatst online: 11:59
quote:
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!

V&A advertenties


  • matroosoft
  • Registratie: juni 2011
  • Laatst online: 11:36

matroosoft

Lone Christian

quote:
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):
quote:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/*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:
1
2
3
4
5
/*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:

Ratingcount & thumbs up

matroosoft wijzigde deze reactie 06-12-2016 15:03 (30%)


  • Flippylosaurus
  • Registratie: augustus 2012
  • Laatst online: 12:23

Flippylosaurus

dd if=/dev/null of=/dev/sda

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:
quote:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/* 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.

Flippylosaurus wijzigde deze reactie 11-03-2016 14:58 (9%)

PlakBak, een advertentievrije pastebin kloon!
Develop all the things!
PSA: Gebruik alsjeblieft "Quote" als je op me reageert! Zo krijg ik een melding als je reageert!


Acties:
  • 0Henk 'm!

  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

quote:
Flippylosaurus 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. :P

Spekkies | Commandline FTW


Acties:
  • +1Henk 'm!

  • nanoChip
  • Registratie: januari 2009
  • Laatst online: 18-11 13:09
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 :D).

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!
quote:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
/* 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;
}

prozor.nl & server.red


  • matroosoft
  • Registratie: juni 2011
  • Laatst online: 11:36

matroosoft

Lone Christian

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)
http://static.tweakers.net/ext/f/rT6OoLH65v78cQ2OepQv2PTj/thumb.pnghttp://static.tweakers.net/ext/f/6zy8K7V6rLh43U4Twk60GAEr/thumb.pnghttp://static.tweakers.net/ext/f/eUwkG9Ijwhjvn9kPVy4CycKC/thumb.pnghttp://static.tweakers.net/ext/f/MVtjPsmIILbMacWMacSP28x4/thumb.png
http://static.tweakers.net/ext/f/MgjfrpcZiBgSDKu1v5mQ4aFC/thumb.pnghttp://static.tweakers.net/ext/f/lk8JA9Xc5nRNwgpANSp9iP4x/thumb.png
http://static.tweakers.net/ext/f/fQwWZt0nttgmpzQCVdOv6Jn9/thumb.png
http://static.tweakers.net/ext/f/5C8J30qdrl3uSe3GCyFQD3hv/thumb.png

http://static.tweakers.net/ext/f/yj1YBzpKFBHJfR5XDKnouw6g/thumb.png
http://static.tweakers.net/ext/f/99Enu0eJXIaUEqbpmUJvhebQ/thumb.png


Meer info in de blogpost.

Acties:
  • 0Henk 'm!

  • Devian
  • Registratie: juni 2000
  • Nu online
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 :p

Acties:
  • +1Henk 'm!

  • Vermeulen
  • Registratie: april 2010
  • Niet online

Vermeulen

Stomp niet af, blijf slijpen

quote:
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 :p

code:
1
2
3
4
5
6
7
8
9
10
11
12
/* 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 :)

Do whatever you love and you'll be free (Outlandish - Warrior // Worrier)


Acties:
  • +1Henk 'm!

  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

quote:
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 :p
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.

Spekkies | Commandline FTW


Acties:
  • 0Henk 'm!

  • Flippylosaurus
  • Registratie: augustus 2012
  • Laatst online: 12:23

Flippylosaurus

dd if=/dev/null of=/dev/sda

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

PlakBak, een advertentievrije pastebin kloon!
Develop all the things!
PSA: Gebruik alsjeblieft "Quote" als je op me reageert! Zo krijg ik een melding als je reageert!


Acties:
  • 0Henk 'm!

  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

Nog geen 600 regels en veel zwart/donker gemaakt? Knap. Ik zit al op 1234 regels op m'n HTPC. :P 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.

Spekkies | Commandline FTW


Acties:
  • 0Henk 'm!

  • Devian
  • Registratie: juni 2000
  • Nu online
quote:
Vermeulen schreef op maandag 16 mei 2016 @ 15:07:
[...]
code:
1
2
3
4
5
6
7
8
9
10
11
12
/* 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?
quote:
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!

Acties:
  • +1Henk 'm!

  • matroosoft
  • Registratie: juni 2011
  • Laatst online: 11:36

matroosoft

Lone Christian

quote:
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:
1
2
3
#bestBuyGuides{
display:none;
}

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

Acties:
  • 0Henk 'm!

  • Devian
  • Registratie: juni 2000
  • Nu online
quote:
matroosoft schreef op vrijdag 20 mei 2016 @ 09:27:
[...]


Om de Best Buy Guide te verwijderen:
Cascading Stylesheet:
1
2
3
#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!

Acties:
  • 0Henk 'm!

  • Kid_Stevie
  • Registratie: december 2006
  • Niet online
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? :)

Acties:
  • 0Henk 'm!

  • matroosoft
  • Registratie: juni 2011
  • Laatst online: 11:36

matroosoft

Lone Christian

quote:
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.

Acties:
  • 0Henk 'm!

  • Kid_Stevie
  • Registratie: december 2006
  • Niet online
quote:
Super! Dankjewel :)
en misschien had ik zelf even beter moeten zoeken |:( :P

Acties:
  • 0Henk 'm!

  • Bastien
  • Registratie: augustus 2001
  • Laatst online: 10:57
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:
1
2
3
.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.

Acties:
  • 0Henk 'm!

  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

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. :P

Spekkies | Commandline FTW


Acties:
  • +2Henk 'm!

  • Evest
  • Registratie: januari 2014
  • Niet online

Evest

Moderator General Chat

The Mountain

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: :P
https://tweakers.net/ext/f/wvflj5TvXu9Xi6oA1eMkqFBD/full.png
Cascading Stylesheet:
1
2
3
4
/* 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 :+

Evest wijzigde deze reactie 28-06-2016 14:01 (10%)


  • 3raser
  • Registratie: mei 2008
  • Laatst online: 20-11 14:10

3raser

_aPW1Cp4WDg

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:
1
2
#reactieContainer { width:900px; }
.reactie { width:600px; }

Het resultaat

Voor de custom CSS:


Na de custom CSS:

  • Zeehond
  • Registratie: juni 2015
  • Niet online

Zeehond

T.net PowerMod / Moderator Witgoed

Plons!

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





quote:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
/* 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;
}

Frontpagemoderatie forum | Discusie over witgoed, Themaforum Witgoed


  • Zeror
  • Registratie: september 2003
  • Laatst online: 11:17

Zeror

Ik Henk 'm!

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

Nintendo ID: Zeror_rk | SW-6670-3316-6323
Stem op 👍: 'Henk' knop (uitproberen?) | Betrouwbare reviews in PW


  • Zeehond
  • Registratie: juni 2015
  • Niet online

Zeehond

T.net PowerMod / Moderator Witgoed

Plons!

quote:
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 d:)b , slimme oplossing

Frontpagemoderatie forum | Discusie over witgoed, Themaforum Witgoed


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

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





Huidige instelling:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
#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;
}
}

TeamTechSupport wijzigde deze reactie 23-10-2016 13:37 (30%)
Reden: CSS bijgewerkt (23-10-2016)

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • Hahn
  • Registratie: augustus 2001
  • Nu online

Hahn

Tegendraads

quote:
TeamTechSupport 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#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:
1
2
3
#categoryBrowser li.active.more {
    background: url(../../../g/if/categories/arrows.png) no-repeat 212px -18px,linear-gradient(#c02b50,#b9143c);
}

Hahn wijzigde deze reactie 24-09-2016 11:56 (3%)

The devil is in the details.


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

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

Makkelijk te achterhalen met inspect element:
Cascading Stylesheet:
1
2
3
#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.

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • Hahn
  • Registratie: augustus 2001
  • Nu online

Hahn

Tegendraads

quote:
TeamTechSupport 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

The devil is in the details.


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

quote:
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!

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@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

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • Zeehond
  • Registratie: juni 2015
  • Niet online

Zeehond

T.net PowerMod / Moderator Witgoed

Plons!

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.
quote:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
/* 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;
}

Zeehond wijzigde deze reactie 13-02-2017 14:03 (100%)

Frontpagemoderatie forum | Discusie over witgoed, Themaforum Witgoed


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

quote:
FireWood schreef op donderdag 18 oktober 2012 @ 19:03:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 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:

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • matroosoft
  • Registratie: juni 2011
  • Laatst online: 11:36

matroosoft

Lone Christian

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
  • Registratie: april 2002
  • Laatst online: 12:58

Rubman

Just as clear as a foggy night

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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
/* 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;
}

Ik ben achteruit de toekomst in gestruikeld. - van Rossum M.
Laaiend enthousiast kwam hij uit de brandende kerncentrale en keek stralend om zich heen.


  • ard1998
  • Registratie: december 2015
  • Laatst online: 08:19
quote:
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
  • Registratie: april 2002
  • Laatst online: 12:58

Rubman

Just as clear as a foggy night

quote:
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 O-)

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

Rubman wijzigde deze reactie 25-11-2016 08:20 (19%)

Ik ben achteruit de toekomst in gestruikeld. - van Rossum M.
Laaiend enthousiast kwam hij uit de brandende kerncentrale en keek stralend om zich heen.


  • ard1998
  • Registratie: december 2015
  • Laatst online: 08:19
quote:
Rubman schreef op vrijdag 25 november 2016 @ 08:19:
[...]
Cascading Stylesheet: filename
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
/* 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?

ard1998 wijzigde deze reactie 25-11-2016 09:14 (0%)
Reden: -moz- en -webkit- versie van de animatie weggehaald.


  • Rubman
  • Registratie: april 2002
  • Laatst online: 12:58

Rubman

Just as clear as a foggy night

quote:
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

Ik ben achteruit de toekomst in gestruikeld. - van Rossum M.
Laaiend enthousiast kwam hij uit de brandende kerncentrale en keek stralend om zich heen.


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

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.

Spekkies | Commandline FTW


  • Rubman
  • Registratie: april 2002
  • Laatst online: 12:58

Rubman

Just as clear as a foggy night

quote:
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. O-)

Ik ben achteruit de toekomst in gestruikeld. - van Rossum M.
Laaiend enthousiast kwam hij uit de brandende kerncentrale en keek stralend om zich heen.


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

quote:
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. O-)
Klopt, ik heb het ook wel eens dat 'ie verschijnt en dan weer direct verdwijnt. Dan heb je net niet genoeg gescrollt.

Spekkies | Commandline FTW


  • Rubman
  • Registratie: april 2002
  • Laatst online: 12:58

Rubman

Just as clear as a foggy night

quote:
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?

Ik ben achteruit de toekomst in gestruikeld. - van Rossum M.
Laaiend enthousiast kwam hij uit de brandende kerncentrale en keek stralend om zich heen.


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

quote:
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.

Spekkies | Commandline FTW


  • Rubman
  • Registratie: april 2002
  • Laatst online: 12:58

Rubman

Just as clear as a foggy night

quote:
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.

Ik ben achteruit de toekomst in gestruikeld. - van Rossum M.
Laaiend enthousiast kwam hij uit de brandende kerncentrale en keek stralend om zich heen.


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

Speciaal voor oud en nieuw even het Tweakers-logo wat bewerkt :P
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 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 :P) en niet op smartphones
https://i.imgur.com/LsJUvGd.png

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • P_Tingen
  • Registratie: maart 2005
  • Laatst online: 09:25

P_Tingen

omdat het KAN

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.

-O-

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:
1
2
3
4
5
body, #searchbar 
{
background:#333333;
background-color:#333333;
}

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

... en gaat over tot de orde van de dag


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

quote:
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.

-O-

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:
1
2
3
4
5
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.

Spekkies | Commandline FTW


  • P_Tingen
  • Registratie: maart 2005
  • Laatst online: 09:25

P_Tingen

omdat het KAN

Zou leuk zijn! Evt via pastebin.com?

... en gaat over tot de orde van de dag


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

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. :P

Spekkies | Commandline FTW


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

quote:
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. :P
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)

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

@P_Tingen, @TeamTechSupport, 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. :P
En vul je eigen nicknaam in op regel 1116. :)

Hero of Time wijzigde deze reactie 12-04-2017 19:44 (8%)

Spekkies | Commandline FTW


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

quote:
Hero of Time schreef op woensdag 12 april 2017 @ 19:42:
@P_Tingen, @TeamTechSupport, 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. :P
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:

https://i.imgur.com/SWR2JVwl.png

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

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.

Spekkies | Commandline FTW


  • P_Tingen
  • Registratie: maart 2005
  • Laatst online: 09:25

P_Tingen

omdat het KAN

quote:
Hero of Time schreef op woensdag 12 april 2017 @ 19:42:
@P_Tingen, @TeamTechSupport, 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:

... en gaat over tot de orde van de dag


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

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

Spekkies | Commandline FTW


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

quote:
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 :P 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.

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

quote:
TeamTechSupport 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 :P 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.
quote:
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. :P

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?

Spekkies | Commandline FTW


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

quote:
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. :P

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 7(8)7

eens kijken wat het is mťt tracker.

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

TeamTechSupport wijzigde deze reactie 15-04-2017 11:50 (3%)

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

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

Spekkies | Commandline FTW


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

quote:
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 :P


Ergens is het raar, omdat in je CSS dit staat:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
/* 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;
}

TeamTechSupport wijzigde deze reactie 15-04-2017 21:52 (5%)
Reden: css tag

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

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.

Spekkies | Commandline FTW


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

quote:
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.

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

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.

Spekkies | Commandline FTW


  • Tk55
  • Registratie: april 2009
  • Niet online
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

  • Markimoo
  • Registratie: september 2016
  • Niet online

Markimoo

"HAAA-BERSKY"

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

"If you lose your left arm your right arm will be left."
"The difference between stupidity and genius is that genius has its limits." - Albert Einstein


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

quote:
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.
:F 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.

Spekkies | Commandline FTW


  • Zeehond
  • Registratie: juni 2015
  • Niet online

Zeehond

T.net PowerMod / Moderator Witgoed

Plons!

@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 :),

Frontpagemoderatie forum | Discusie over witgoed, Themaforum Witgoed


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

@-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:
quote:
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. :)

Spekkies | Commandline FTW


  • Zeehond
  • Registratie: juni 2015
  • Niet online

Zeehond

T.net PowerMod / Moderator Witgoed

Plons!

@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 :Y.

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 :P, uit commentarieren maakt het ook nog niet eens altijd meteen duidelijk is vaak nog eens het probleem.

Frontpagemoderatie forum | Discusie over witgoed, Themaforum Witgoed


  • Ramon
  • Registratie: juli 2000
  • Laatst online: 12:47
quote:
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
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

quote:
-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 :Y.
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. ;)
quote:
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.
quote:
Vergeten waar iets voor was heb ik ook wel eens last van :P, 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. :P
quote:
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. ;)

Spekkies | Commandline FTW


  • NMe
  • Registratie: februari 2004
  • Nu online

NMe

Admin Devschuurģ

Quia Ego Sic Dico.

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

:F 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.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

quote:
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.

Spekkies | Commandline FTW


  • Zeehond
  • Registratie: juni 2015
  • Niet online

Zeehond

T.net PowerMod / Moderator Witgoed

Plons!

quote:
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 :P, kan er zelf ook aan prutsen wat ik niet mooi vind maar het geeft een mooi startpunt :). De code is natuurlijk ook mooi ;) .
quote:
[...]

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. :P
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.

Frontpagemoderatie forum | Discusie over witgoed, Themaforum Witgoed


  • Markimoo
  • Registratie: september 2016
  • Niet online

Markimoo

"HAAA-BERSKY"

@Hero of Time super bedankt!

Hoort dit plaatje daar zo van achter te zitten? https://a.pomf.cat/dhvbpp.png
En dit?

Markimoo wijzigde deze reactie 22-04-2017 16:21 (25%)

"If you lose your left arm your right arm will be left."
"The difference between stupidity and genius is that genius has its limits." - Albert Einstein


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

quote:
-zeehond schreef op zaterdag 22 april 2017 @ 14:53:
[...]

Daar kijk ik neven af :P, 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.
quote:
[...]

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.
quote:
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.
quote:
En dit?
[afbeelding]
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.

Spekkies | Commandline FTW


  • Markimoo
  • Registratie: september 2016
  • Niet online

Markimoo

"HAAA-BERSKY"

Kan je dat aanpassen of is het lastig?

"If you lose your left arm your right arm will be left."
"The difference between stupidity and genius is that genius has its limits." - Albert Einstein


  • Zeehond
  • Registratie: juni 2015
  • Niet online

Zeehond

T.net PowerMod / Moderator Witgoed

Plons!

quote:
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 :P, maar waarom heb je die zoveel gebruikt als ze onnodig zjn? Heb er zelf nog nooit een gebruikt voor mijn css.

Frontpagemoderatie forum | Discusie over witgoed, Themaforum Witgoed


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

quote:
-zeehond schreef op zaterdag 22 april 2017 @ 19:26:
[...]

Daar val ik door de mand :P, 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.

Spekkies | Commandline FTW


  • Zeehond
  • Registratie: juni 2015
  • Niet online

Zeehond

T.net PowerMod / Moderator Witgoed

Plons!

quote:
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 :).

Frontpagemoderatie forum | Discusie over witgoed, Themaforum Witgoed


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

quote:
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 ;)

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • Markimoo
  • Registratie: september 2016
  • Niet online

Markimoo

"HAAA-BERSKY"

quote:
TeamTechSupport 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?

"If you lose your left arm your right arm will be left."
"The difference between stupidity and genius is that genius has its limits." - Albert Einstein


  • Tk55
  • Registratie: april 2009
  • Niet online
quote:
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?

  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

quote:
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:
1
2
3
4
#searchbar
{
background:#FF0000;
}

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

Please consider the environment before posting on the internet.
Tweakers.Net Discord


Acties:
  • +1Henk 'm!

  • Markimoo
  • Registratie: september 2016
  • Niet online

Markimoo

"HAAA-BERSKY"

"If you lose your left arm your right arm will be left."
"The difference between stupidity and genius is that genius has its limits." - Albert Einstein


  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

quote:
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.

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • Tk55
  • Registratie: april 2009
  • Niet online
quote:
TeamTechSupport 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.

  • TeamTechSupport
  • Registratie: februari 2016
  • Laatst online: 06:59

TeamTechSupport

Systeem en Netwerkbeheerder

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/

Please consider the environment before posting on the internet.
Tweakers.Net Discord


  • Hero of Time
  • Registratie: oktober 2004
  • Laatst online: 12:57

Hero of Time

Moderator NOS

There is only one Legend

quote:
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).
quote:
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. ;)

Spekkies | Commandline FTW


  • Markimoo
  • Registratie: september 2016
  • Niet online

Markimoo

"HAAA-BERSKY"

quote:
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. ;-)

"If you lose your left arm your right arm will be left."
"The difference between stupidity and genius is that genius has its limits." - Albert Einstein

Pagina: 1 ... 15 16 17 Laatste


Apple iPhone X Google Pixel 2 XL LG W7 Samsung Galaxy S8 Google Pixel 2 Sony Bravia A1 OLED Microsoft Xbox One X Apple iPhone 8

© 1998 - 2017 de Persgroep Online Services B.V. Tweakers vormt samen met o.a. Autotrack en Hardware.Info de Persgroep Online Services B.V. Hosting door True

*