Custom Laracasts.com Styles

I like the dark background. Very nice.

I like the dark background. Nice work. (y)

:) Will need to update some parts as text is too dark for the new background. If you installed it, you can check for updates in the manage styles area.

Edit: updated most of the dark text parts

@bashy looks great! This could turn out to an awesome thread

Done an update to that style and also made a GitHub repo so people can contribute to/for new styles.

https://github.com/bbashy/Laracasts-Styles

Already using it. Thanks again :)

@bashy wow that is seriously nice looking

Wow Beautiful !! will you be doing one for the lessons page ?

Never done this before. I have installed stylish .. then what ?

ok - got it. That was easy !

I will be making sure the lesson page looks better yes, doing some updates now to the forum page but I wanted to release it soon as.

@vincej Once you got it installed, just visit this page: https://userstyles.org/styles/108123/laracasts-dark-blues

Edit: Okay :)

I created this custom style, what do you guys think?

http://i.imgur.com/4xkunPg.png

http://i.imgur.com/Qi6h3HW.png

Is it worth sharing?

Colours look nice and it's more of a "Laravel" style one :)

If you want me to add it up, add it to the GitHub repo? https://github.com/bbashy/Laracasts-Styles

@bashy Done!

Just seen it, thanks. Will also add it to userstyles.org

@bashy I can't find @RachidLaasri's styles on usestyles...

@MThomas Sorry, had to adjust his PR since there was no Userstyles domain check. Just added it now: https://userstyles.org/styles/108174/laracasts-laravel

@bashy, thanks!

@Bashy - just great buddy!

Too much white is hard on the old eyes when I'm staring at a screen for up to 16 hours a day. Love the dark theme, thanks.

No problem!

Updating it daily to fix little bits so keep checking for updates on the "Manage installed styles" part of the plugin. I also push them to GitHub (linked in thread).

Awesome work, both of you!

This is just awesome! My eye's thank you. I don't know how hard it is to extend this, but I'd add the series lists and the lesson comments too. But wow, that's brilliant.

@Roni Pretty much any CSS item is changeable. I can do the list of videos in the series (if this is what you mean)

If you wanted to contribute and add some simple CSS additions, just make a pull request with the changes on GitHub :)

https://github.com/bbashy/Laracasts-Styles

Is there a quick decent tuturial on how to live test this? I'm' using google chrome to make some modifications that seem to work well, however not really sure how to test my local changes. I'll see if I can point Stylish to my local fork of your css.

You can do it locally by installing CSS manually. Check the manage styles section on browser extension

@bashy, here is an example of a change I'd make, It's not mind blowing design or anything, just my quest to remove this infernal bright green! But I digress, I can't get Stylish to add this, either to your style by copying the whole thing and adding these, or by adding these individually.

.banner{
  background: #414A5C;
  padding: 7em 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #333A49;
}

.banner__series-learning-points {
  border-left: 1px solid #B6BAC1;
  padding-left: 40px;
  margin-top: 65px;
  position: relative;
  left: 40px;
  color: #fff;
}

.banner__series-learning-points h5 {
  color: #A4B0BF;
  font-size: 1.5em;
  margin: 0 10px 0.5em 26px;
}

I actually had a bunch more, but deleted it accidentally by refreshing. Is there, no way to edit these files locally and have them reference the local stylesheet as it's changed?

@Roni Sure, I did the styling for the base of my colour scheme in a local style.

Here's a screenshot of where you can add the CSS. There's a link saying "Add New Style" in the manage styles section.

Cool I like the black layout

Thanks, I added a bunch. I'll send it back to github

Yeah got it, few things which I should of mentioned :P

Probably need to use !important else rules get overwritten. Please make sure this is in the file still (which wraps around it all)

@-moz-document domain("laracasts.com") {

}

Done,

I still couldn't figure out the mouseover's for all the unique lessons to remove the green bar, I'd still change the lessons instead of alternating dark and light to an all dark neutral back and have a blue highlight on your mouse over. Finally I'll try and tackle the disqus section at the bottom of the lessons, as I spend a fair amount of time reading there. On the whole, thanks a ton for all this @bashy.