Tweakblogs custom CSS

Door Johan9711 op vrijdag 11 maart 2016 15:28 - Reacties (9)
Categorie: -, Views: 2.440

Ik ben hard bezig met een custom CSS voor tweakblogs, om het wat hedendaagser te laten lijken.
Allereerst: ik ben geen ster in CSS. Ik ben slordig, en heb relatief weinig CSS kennis, dus moet ik veel opzoeken, en weet ik veel gewoon niet.
Je kunt de CSS inladen via Stylish: https://userstyles.org/

Het is nog lang niet af, ik heb nog een hele weg te gaan. Ik weet helaas niet hoe ik het logo klikbaar kan maken, weet iemand dat misschien?
Verder ziet nu enkel de frontpage van Tweakblogs er een beetje beter uit, de blogs zelf zijn nog niet goed getest. Er zitten verder nog veel meer bugs in, maar die mag je zelf ontdekken, dan hoor ik ze graag!


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
#tweakblogsNav {
    position: relative;
    top: 0;
    height: 50px;
    background-color: #A11638;
    border-bottom: 1px solid #fff;
    color: #dcdcdc;
    font-size: 12px;
}
#tweakblogsNav .logo {
    background-image: url(http://tweakimg.net/g/if/v3/framework/tweakers_logo_v2_x1.png);
    background-size: contain;
    margin-left: 8%;
    margin-right: 8%;
    height: 50px;
    width: 90%;
    top: 0;
    position: relative;
    left: 30px;
    background-repeat: no-repeat;
}
.logo {
    width: 1000px;
    height: 50%;
}
#container {
    margin: 0 auto;
    width: 100%;
    border: 0px solid #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.body {
    font-family: arial, helvetica, "Liberation Sans", sans-serif;
    font-size: 14px;
}
.logo img {
    display: none;
    width: 1px;
}
#pagebody,
#banner,
.breadCrumb {
    display: block;
    padding-left: 10%;
    padding-right: 10%;
    border-bottom: 0px;
}
.columnwrapper {
    border-top: 2px solid #bcbdbd;
    padding-top: 10px;
}
.breadCrumb {
    margin: 0px;
}

Volgende: Vluchtelingen 03-'16 Vluchtelingen

Reacties


Door Tweakers user xleeuwx, vrijdag 11 maart 2016 15:35

Een mooi voorbeeld is hier al gemaakt: deathgrunt - apps voor Windows Phone en Android: tweakblogs 2.1 ...en nog wat

Misschien heb je er wat aan ;)


http://blog-henk.deathgru...7%2Ftweakblogs-custom-css
:D

[Reactie gewijzigd op vrijdag 11 maart 2016 15:36]


Door Tweakers user Johan9711, vrijdag 11 maart 2016 15:37

Die ken ik, maar dat heeft zijn beperkingen, omdat die enkel content ophaalt. Daardoor kan je niet inloggen en reageren.

Door Tweakers user deathgrunt, vrijdag 11 maart 2016 17:55

Het logo klikbaar maken met CSS gaat je niet lukken, omdat die functionaliteit buiten het spectrum van CSS valt...

Maar als je custom-JS kan injecteren, kan je eenvoudig het logo "wrappen" in een anchor - of gewoon een listener er op zetten, zodat hij getriggerd / gefired wordt als iemand er op klikt / drukt (en daarbij dan een href-attribute meegeven).

Door Tweakers user matroosoft, vrijdag 11 maart 2016 18:33

deathgrunt schreef op vrijdag 11 maart 2016 @ 17:55:
Het logo klikbaar maken met CSS gaat je niet lukken, omdat die functionaliteit buiten het spectrum van CSS valt...

Maar als je custom-JS kan injecteren, kan je eenvoudig het logo "wrappen" in een anchor - of gewoon een listener er op zetten, zodat hij getriggerd / gefired wordt als iemand er op klikt / drukt (en daarbij dan een href-attribute meegeven).
CSS is inderdaad puur bedoeld voor de opmaak van websites, een linkje ga je niet kunnen invoegen met custom CSS. Je kunt met CSS soms wel een paar trucjes uithalen om de bruikbaarheid te vergroten. Zo ook hier als ik het goed heb. Volgends mij kun je de hyperlink 'Tweakblogs Home' onder het logo plaatsen en vervolgens onzichtbaar maken door de tekstkleur te veranderen. En hoppa, je logo is klikbaar! :D Het is geen nette manier, maar wat mij betreft wel creatief knutselen met CSS. :)

Natuurlijk is het beter om zoiets met js te doen, maar zoals TS al zegt heeft hij nog niet zoveel ervaring met met CSS. Het opstapje naar js kan dan net teveel van het goede zijn. Voor een beetje hobby'en is het dan prima om een beetje te knutselen op de onofficiŽle manier. Vind ik. :)

@TS: Kijk ook even naar het GoT-draadje over custom CSS, als je dat niet gedaan hebt. Is best informatief. :)

Door Tweakers user deathgrunt, vrijdag 11 maart 2016 19:25

matroosoft schreef op vrijdag 11 maart 2016 @ 18:33:
[...]
Volgends mij kun je de hyperlink 'Tweakblogs Home' onder het logo plaatsen en vervolgens onzichtbaar maken door de tekstkleur te veranderen. En hoppa, je logo is klikbaar! :D Het is geen nette manier, maar wat mij betreft wel creatief knutselen met CSS. :)
Dat is een creatieve manier van CSS gebruik :)

En kan in dit geval best goed werken; alleen even kijken hoe het responsive werkt, dus als je de browser gaat "schalen".

Maar je kan inderdaad bv. het logo op visibility:hidden; zetten, en dan een linkje uit de pagina nemen en die op position:absolute;left:0;z-index:666; zetten, zodat hij over het logo valt en je dus "denkt" dat je op het logo klikt :P

Overigens heb ik de custom-css niet ingeladen, dus wat ik hierboven schrijf is puur fantasie!

-------------------------------------------------------

-edit- Als logo source kan je ook deze nemen;

http://tweakimg.net/g/if/v3/framework/tweakers_logo_v2_x2.png

Die is groter en zal op high-res DPI schermen wat scherper ogen.

Aan de andere kant zie je bij dit logo ook hoe slecht het is samengesteld, omdat er een duidelijk zichtbare "unsharp" mask over heen is gegooid (een soort witte aura in het groene deel).

Dus het beste upload je een eigen versie als .svg naar ImgUr en link je die (zo werk ik altijd met externe images in dit geval; gewoon een third party image-server misbruiken)!

[Reactie gewijzigd op vrijdag 11 maart 2016 19:28]


Door Tweakers user Johan9711, vrijdag 11 maart 2016 19:44

Ik kan natuurlijk altijd een leuk script maken voor tampermonkey. Ik zal eens kijken.

Het is trouwens wel knap vervelend dat ze al die afbeeldingen in de HTML hebben gezet in plaats van in de CSS.

[Reactie gewijzigd op vrijdag 11 maart 2016 19:45]


Door Tweakers user matroosoft, vrijdag 11 maart 2016 19:53

Johan9711 schreef op vrijdag 11 maart 2016 @ 19:44:
Ik kan natuurlijk altijd een leuk script maken voor tampermonkey. Ik zal eens kijken.

Het is trouwens wel knap vervelend dat ze al die afbeeldingen in de HTML hebben gezet in plaats van in de CSS.
Afbeeldingen staan toch altijd in de HTML?

Door Tweakers user Johan9711, vrijdag 11 maart 2016 19:55

matroosoft schreef op vrijdag 11 maart 2016 @ 19:53:
[...]


Afbeeldingen staan toch altijd in de HTML?
Nee hoor. Anders had ik dat Tweakers logo nooit kunnen vervangen ;-)

Door Tweakers user deathgrunt, vrijdag 11 maart 2016 19:59

Als je van een logo "in" de html af wil, kan je iets doen als dit;

div.logo a img { visibility:hidden }

Daarmee maak je het logo (in de html) onzichtbaar, en kan je (bv. in de achtergrond van diezelfde img / a een eigen logo plaatsen).

De "src" van een "img" aanpassen in css is ook mogelijk, maar dat is oneigenlijk gebruik van css (omdat je daarmee "officieel" geen src-attributen mag / kan benaderen).

(omdat je via de css daarmee de content zou aanpassen... en content / styling / techniek (functies) dien je strikt gescheiden te houden (trias politica bij het maken van een site).

[Reactie gewijzigd op vrijdag 11 maart 2016 20:01]


Reageren is niet meer mogelijk