Log in

View Full Version : CSS blue banners for your team's website!

ErikBoesen
11-09-2016, 21:35
https://raw.githubusercontent.com/ErikBoesen/banners.css/master/screenshot.png

A while back I created some pure-CSS (with the exception of an SVG image) blue banners for my team's website (http://1418.team).

I thought the banners might be interesting for other teams to make use of. I've extracted their code from our website, and it's now available here (https://github.com/ErikBoesen/banners.css). Enjoy!
tjf
11-09-2016, 21:53
1257 also used a version of his on our team website.

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

Excellent work overall by Erik.
Eugene Fang
13-09-2016, 01:20
Cool! Added I them to The Blue Alliance with a few tweaks.

http://i.imgur.com/UeCsEgUl.png
SpaceBiz
13-09-2016, 10:50
https://raw.githubusercontent.com/ErikBoesen/banners.css/master/screenshot.png

A while back I created some pure-CSS (with the exception of an SVG image) blue banners for my team's website (http://1418.team).

I thought the banners might be interesting for other teams to make use of. I've extracted their code from our website, and it's now available here (https://github.com/ErikBoesen/banners.css). Enjoy!

Hate to break it to you, but there wasn't a Chesapeake Regional in 2016. If only 1418 won some higher level event at it's former location...

Also, great work to both Erik and Eugene. I really like seeing those banners on TBA.
ErikBoesen
13-09-2016, 11:16
Oh wow. Somehow I missed that. I made those on a late night a long time ago and, and a freshman, didn't quite understand how the events worked. Will fix in just a moment.
lynca
14-09-2016, 13:23
Cool! Added I them to The Blue Alliance with a few tweaks.


A terrific TBA addition ! Thank you Eugene
Andrew Schreiber
14-09-2016, 13:34
Cool! Added I them to The Blue Alliance with a few tweaks.

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

Any chance we could get the banner for WFA winners added? I know it's kinda an oddball banner but it IS in fact a banner.
Eugene Fang
14-09-2016, 16:51
Any chance we could get the banner for WFA winners added? I know it's kinda an oddball banner but it IS in fact a banner.

Yeah I'll do that.
Richard Wallace
14-09-2016, 17:27
Blue banners on the Blue Alliance!

Like most good ideas, it is obvious AFTER someone has done it.
FrisbeeFunTime
18-09-2016, 21:34
This is awesome! It makes it so much easier to see if a team has won an event a certain year. Plus it also looks really cool!
orangelight
18-09-2016, 21:49
I'm not sure what looks better these or the banners on our website (https://www.robostangs.com/about/awards/). I think these might look generally better on websites vs. a traditional blue banner that looks better on a wall
roboguy28
22-09-2016, 19:34
How would I post a banner to our Blue Alliance page? Do I make a pull request on Git Hub, with the code? Does Blue Alliance use HTML or CSS?
frcguy
22-09-2016, 19:49
How would I post a banner to our Blue Alliance page? Do I make a pull request on Git Hub, with the code? Does Blue Alliance use HTML or CSS?

They should be automatically generated.
tjf
22-09-2016, 20:13
How would I post a banner to our Blue Alliance page? Do I make a pull request on Git Hub, with the code? Does Blue Alliance use HTML or CSS?

They're automatically generated. Just note that your default page will only display banners for the current history. To view all of your digital banners, go to https://thebluealliance.com/team/(number)/history
roboguy28
23-09-2016, 16:01
They should be automatically generated.

They're automatically generated. Just note that your default page will only display banners for the current history. To view all of your digital banners, go to https://thebluealliance.com/team/(number)/history

Okay, Thanks for the information!
runneals
23-09-2016, 17:38
They're automatically generated. Just note that your default page will only display banners for the current history. To view all of your digital banners, go to https://thebluealliance.com/team/(number)/history

I was looking at our team compared to what you had and we didn't get a blue banner for the Innovation in Control award back in 2013 (At least I didn't think we did). Also we got Engineering Inspiration award in 2014 which pushed the team to champs, but I didn't see a banner on our page for that (although I could be going crazy).
bstew
23-09-2016, 18:06
I was looking at our team compared to what you had and we didn't get a blue banner for the Innovation in Control award back in 2013 (At least I didn't think we did). Also we got Engineering Inspiration award in 2014 which pushed the team to champs, but I didn't see a banner on our page for that (although I could be going crazy).

Innovation in Control and Engineering Inspiration don't give blue banners, so on TBA, they don't show up as blue banners. However, if someone wants to put a blue banner on their team website for an award that doesn't give them a blue banner, they are free to do that.

(Hope we can get some blue in 2017!)
NotInControl
01-10-2016, 05:17
Innovation in Control and Engineering Inspiration don't give blue banners, so on TBA, they don't show up as blue banners. However, if someone wants to put a blue banner on their team website for an award that doesn't give them a blue banner, they are free to do that.

(Hope we can get some blue in 2017!)


Integration on TBA Looks pretty nice, for awards maybe someone could make an award image, or a plaque image (like the new awards since 2015) with the first logo and the award name, this way blue banners and awards can be segregated but still seen from a glance
tjf
02-10-2016, 10:46
Integration on TBA Looks pretty nice, for awards maybe someone could make an award image, or a plaque image (like the new awards since 2015) with the first logo and the award name, this way blue banners and awards can be segregated but still seen from a glance

I think the difficult thing is that each plaque looks different.

http://www.firstinspires.org/sites/default/files/uploads/resource_library/frc/game-and-season-info/awards/2016/post-season-sales/2016-award-plaque-v2.jpg
http://www.firstinspires.org/sites/default/files/uploads/resource_library/frc/game-and-season-info/awards/2016/post-season-sales/2015-award-plaque-v2.jpg

Unless you were to make the whole thing a dynamically-generated SVG, it wouldn't be easy, not would it be pure CSS as originally envisioned.

Something that might meet the criteria ( to me at least) it to just make frcplaques.css and do a brown background, throw the svg of that year's game on it, and generate the text like they did for banners.css on TBA.

(just my 2c)
Eugene Fang
02-10-2016, 15:48
I think the difficult thing is that each plaque looks different.

It wouldn't have to be the actual plaque with background, it could just be something that looks "plaque-esque"