Disclaimer : I am a big fan of comics !
First time when when I saw http://dev.to for some reason the style of it reminded me so so much of comics (that as I said I love) !
So at some point several days ago I switched to Minimal Light Theme for more clear look, but it was not my thing :(
You know there are themes right ? Anyway this theme is good but I don't know, something was missing and it was not cartoony and fun and comics enough maybe.
I am not a frontend guy, I have 0 knowledge in CSS even -1 and I am proud of it! I hate the DOM and I hate styling it with anything especially CSS, but I just had to see how it will look in a bit more... comicsish style?
So I used Stylus plugin for chrome to inject a bit of CSS into the page, basically just changed the border-styles and some alignments.
/* feeds view */
.sidebar-profile-snapshot {
border: solid black !important;
border-color: black !important;
border-width: 3px 4px 3px 5px !important;
border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}
.sidebar-nav-header{
text-align:right;
}
.widget {
border: solid black !important;
border-color: black !important;
border-width: 3px 4px 3px 5px !important;
border-radius: 95% 2% 162% 3%/9% 96% 2% 99% !important;
}
.widget header {
text-align:right;
}
.single-article {
border: solid black !important;
border-color: black !important;
border-width: 3px 3px 5px 5px !important;
}
/* article view */
.article article{
border: solid black;
border-color: black;
border-width: 3px 3px 5px 5px;
}
.inner-comment{
border: solid black !important;
border-color: black !important;
border-width: 3px 3px 5px 5px !important;
}
.primary-sticky-nav-author{
border: solid black !important;
border-color: black !important;
border-width: 3px 4px 3px 5px !important;
border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}
.primary-sticky-nav-element{
border: solid black !important;
border-color: black !important;
border-width: 3px 4px 3px 5px !important;
border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}
And YES I put !important everywhere cuz... it's only for me! My precious!
Anyway I think the results are quite good and I will use it this way from now on, but what do you think, should someone KNOWING how to do it properly can and will create a theme ?
Full feeds page:
And a single article page:
Also I tried to change the fonts.. I would love to have the Bangers font for the h4 headings but didn't had any luck :D
@font-face {
font-family: Bangers;
src: url(https://fonts.googleapis.com/css?family=Bangers);
}
h4{
font-family: Bangers !important;
}
Adding this for some idea doesn't work, the HTTP request is made properly the font is downloaded but...
at the end I would LOVE something like this for the right side :
It would be cool, but without CSS knowledge and for around 30mins this was my limit :D
Cya all, I will love to hear your thoughts - back to the backend and debugging Java.
Oh yes... I forgot I was experimenting here before applying CSS to DEV.TO
here we have the Bangers fonts and etc I was curious how to make the borders.
UPDATE.
Ah I am an idiot, it looks the value of @font-face src was incorrect it works in a link since it gets added in a style as stylesheet pf anyway, so
@font-face {
font-family: 'Bangers';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/bangers/v12/FeVQS0BTqb0h60ACH55Q2A.woff2) format('woff2');
}
Works (the url above was incorect) !
so VERSION 2 !
- Changed the sidebar titles
- Changed the shape of buttons
- Changed my name and username
I think this 2 screenshots show most of it:
I LOVE the new and improved header:
And the full look:
And what I added to the previous CSS:
/* feeds view */
@font-face {
font-family: 'Bangers';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/bangers/v12/FeVQS0BTqb0h60ACH55Q2A.woff2) format('woff2');
}
.sidebar-profile-name{
font-family: Bangers !important;
font-size:12px;
}
.sidebar-profile-username {
font-family: Bangers !important;
font-size:20px;
}
.widget header h4{
font-family: Bangers !important;
font-size:25px;
transform: rotate(2deg);
margin:15px;
padding:0 5px;
float:right;
background:#ddd;
border:1px solid #222;
box-shadow:3px 3px 0 #222;
}
.widget .cta-button {
border: solid black !important;
border-color: black !important;
border-width: 3px 4px 3px 5px !important;
border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}
.articles-list .nav-chronofiter-link {
border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}
.sidebar-profile-snapshot {
border: solid black !important;
border-color: black !important;
border-width: 3px 4px 3px 5px !important;
border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}
.sidebar-nav-header:first-child{
text-align:right;
font-family: Bangers !important;
font-size:25px;
transform: rotate(2deg);
margin:15px;
padding:0 5px;
float:right;
background:#ddd;
border:1px solid #222;
box-shadow:3px 3px 0 #222;
The full file (since the post is already too long) :
https://gist.github.com/gochev/1ee874a0bb6218ffcb652170ef3bb3a7
Anyone for up for how to make it a real theme thing ? :)
Top comments (25)
Fantastic! I'm likely to stick with my dark theme, but this seems absolutely perfect as an addition to the DEV themes. You should totally make a PR.
I second this. What a fun addition this would be! The
!importanttags could use some cleaning up, but it's nonetheless a cool theme.haha yes, well the !important tags are mostly what I didn't like and the backend developer thing ;)) :D:D but I know they magically fix everything :D:D and I didn't had time to check what is actually rewriting what, so I just put them ... everywhere.. ops :))
That's fine! I'm sure folks would be happy to help in your pull request.
haha :) yeah maybe this is the next step :), but there are a lot more views that needs styling ... I have styled only 2 of them :) and maybe the way how a theme is made is easier :)
Jason C. McDonald big thanks to you as well :)
@somedood do you happens to know how to create a theme, because checking at the github it is some crazyness :D:D
github.com/thepracticaldev/dev.to/...
or if it happens to know who I have to contact; )
I have good news! This document has all that you need to know in oder to start theming. 😉
Here is the file you would want to edit.
I have found the first document but the file is helpful as well :) will definitely do that ones I had it running :D:D: since I had some issues: D:D:D with running the project ;) but I am trying ! :D
That's good to hear, Nayden! Keep it up! 🥳🥳🥳
Setting up the development environment has always been a pain in the back side.Disliking or liking it, for a non-css guy, and one that says it hates it, you have achieved a lot in only 30 minutes, so congrats are in order ;)
haha thanks, actually the applying the stuff to dev.to took me around 10ish mins, I spend more time in writing the initial CSS and playing with codepen prior to moving the stuff to stylus and putting !important anywhere cuz I was angry :D:D
You can check the codepen vision here
I will actually put this in the post.
btw I was more angry to the CSS Grid... then anything else but that's a different story.
Wow... This is pretty awesome. Nice work
thanks man - looks pretty , written ugly like a backend dev :):):):)
Amazing job have been done here! Guys, what is the name of that library that provide this exact style?! Can't remember myself...
never heard of such thing but if it exists.. oh my oh my :D so I hope you will find it.
Dude I friggin found it 🤑
wiredjs.com/
@ben whayu think about it for a new theme 🤓
omg are u kidding me THIS is fcuking GREAT , are u kidding this is amazinggg
BTW maybe you will not like it but I am a games fan as well and I find this amazing as well nostalgic-css.github.io/NES.css/
Damn Nayden you and me are on the same line Ness.css is dope as heck haha 😉😍 2 themes in a row if this ever became themes for Dev we will be so proud 😅
Really well done. You have great design sense for someone not into design!
Good on you for giving CSS a shot. I'm sure you won't find a single comics nerd on this site. Ha!
haha well I am sure about LEGO fans because of the connection of people loving lego and loving programming, about the comics I was not sure it turns out there are a lot of nerds like me here :)) happy place ! :)
Wow amazing!
So freaking innovative! Love the look of it.
This is so beautifully done🌻 great work🦄🦄
Thanks man :)