The first commercial channel tournament: CSS coding
Reading newest dag's post I noticed that yes, CSS-customizing the channel would be really cool.
Now, I know a few CSS, but I really really really suck in designing graphics, and even if I had the time to create a new layout - which I do not - I would surely come up with something horrible.
So, anyone can post their ideas about a new layout, and anyone can post the final .css file.
Who gave me the file that I choose as "winner", wins 1 promote and 2 saves.
If he implemented an idea given by someone else, that "someone else" wins a free save too, otherwise he wins a third save, for a total of 1 promote and 3 saves.
Only requirement: this has to be optimized for reading well, without harming the eyes, so, pay special attention to:
* no white or near-white backgrounds;
* no black or near-black backgrounds;
* use soft colors for background, either some pastel background with a dark text or some middle brightness background with a light text, dunno, you get the idea;
Let's start coding!
ps: when this task is completed, I'll start new tournaments, I guess
Now, I know a few CSS, but I really really really suck in designing graphics, and even if I had the time to create a new layout - which I do not - I would surely come up with something horrible.
So, anyone can post their ideas about a new layout, and anyone can post the final .css file.
Who gave me the file that I choose as "winner", wins 1 promote and 2 saves.
If he implemented an idea given by someone else, that "someone else" wins a free save too, otherwise he wins a third save, for a total of 1 promote and 3 saves.
Only requirement: this has to be optimized for reading well, without harming the eyes, so, pay special attention to:
* no white or near-white backgrounds;
* no black or near-black backgrounds;
* use soft colors for background, either some pastel background with a dark text or some middle brightness background with a light text, dunno, you get the idea;
Let's start coding!
ps: when this task is completed, I'll start new tournaments, I guess
24 Comments
OK, here's one:

preview
proposed logo
commercialsift.css
Please note that if there's a way to rearrange the elements or change the background of the post / comments I haven't found them. Also, nifty corners don't render in the preview but work when you upload the css. I'll be glad to tinker with it for a few more hours if you decide to use it.
Comment hidden because you are ignoring dag. (show it anyway)
that looks great.
looks great, except the overall background which should be darkened, but I can bear with small changes.

the logo I belive I can edit if you give me either the XCF (if using gimp) or a transparent PNG (I only have gimp, so no photoshop formats).
since I like it, I'd say it's fair to wait 12h to wait if someone pops up saying "but I was making one too!" and then we can fine tune and name you winner if this doesn't happen
thanks!!
I do use photoshop but would be glad to share the font details for the logo. And it looks like I can learn a few things from Arvana about the backgrounds. lol.
don't like those gradients, but he having them means they can be edited

(didn't look at the code yet, but I guess he hosts a background file somewhere, and link it in the css?)
the logo in my mind is not very clear, but it could be a nice idea both to use the raiders (as a background maybe?) and the jennifer government logo (it really DO rapresents "commercial"). How this could be done in these few pixels, and in a non-horrible way, is far behind my comprehension
Not sure about the dollar sign but I like it. What I don't like about it is that, well, it is not, well, rapresentative of the world. I mean. Well you understand. But I'm against putting in lots of symbols. So I dunno. I'd stick with this logo, just with a background to be defined, for now.
Hmmm...
Preview #2
I like the Jennifer Government logo!
Comment hidden because you are ignoring dag. (show it anyway)
That's hot! I liked that book too.
That is like way totally righteous, bro. Way to kick some css ass, mlx.

I'd like to take this opportunity to mention that I added some simple styles (but nothing along the lines of the Rock n Roll Channel) to the Asia channel. Have a looksee.
Comment hidden because you are ignoring dag. (show it anyway)
That's pretty damn cool Lucky - I like the bamboo.
Comment hidden because you are ignoring dag. (show it anyway)
I'm going to *sticky this, as this is where all the CSS action is happening.
Stickying this post at the top of Sift Talk - sticky requested by dag.
@mlx: great!
just tell me when to promote and save what!
just few requests
(1) in preview 1 there was the $ symbol in every box, in top-right corner, now nothing: I belive this image (i.e. current logo) could go there, couldn't it?
(2) could you add the text "CommercialSift" under the barcode, following its shape?
(3) lucky's bamboo's at top of his page are great, any idea what could we put there? Money? Or m&m's? Mmmmh...
thanks, you win
Cool, thanks! It's time for me to quit playing on the computer and get ready for my work day, but I'll get the final css and images to you by this evening.
thanks to you! have a good work
Wow, nice work, mlx and Lucky! And I love your latest logo too, mlx. This is really fun! I never thought of adding a background to the header, hmmm.....

As looris suggested, the way I added gradients to 1stTube was to create 1px-wide gradient gifs, host them elsewhere, and add them as repeat-x backgrounds to the elements I wanted. The tricky thing is that the rounded box corners are the same colour as the background colour, so the gradient has to start and end with that.
I also cheated a little on my CSS and snuck in some extra elements that weren't in the sample CSS file. I hope Lucky doesn't start filtering those out!
Are there instructions somewhere that I can read for this CSS stuff? I'd like to spruce up my page a bit, but I don't know how.
HistNerd, CSS is a complicated animal, but if you want to give it a go, here are some good reading resources:
CSS From the Ground Up
Introduction to CSS Tutorial
CSS Reference Sheet
Thanks, arvana.

I hope Lucky doesn't start filtering those out!
Nothing to worry about there. The default css file was just intended to be a very basic skeleton without overloading our CSS-inexperienced channel owners and charter members with tmi. I hope it's not too little to be of enough use for everyone without hacking through the site's CSS/HTML to figure things out. Anyhow, feel free to redecorate any elements on the page that you so desire.
The only unwritten restrictions are that you musn't make it unusable (e.g., using white text on a white background) or intentionally, disgustingly unattractive. (No example for that; I guess you'll know it when you see it.) After all, the channels are official, full sub-websites of VideoSift now and we don't want to turn the Sift into a joke.
Great idea for the tournament looris!
.

I was wondering if any of you CSS inclined people would be willing to take a look at my British Invasion channel and spruce it up. I'll offer 2 Saves and 2 Promotes (and my eternal gratitude) for anyone willing to help out
I'm not great with graphic design or layout so any of my feeble attempts haven't turned out good at all.
Hope I'm not hijacking the thread looris
Here you go, Looris:
commercialsiftV2.css
Jennifer Government Logo
'course you're not hijacking the thread zif


@mlx: great work!
I've just switched two more whites with greens, and now apart from the textareas and buttons, which I will edit later, we're done with CSS, thanks
about the logo, it's great, but I really feel the need to personalize it. Why? Well, because I don't like going there stealing a great logo and using it myself, even if it's really a related thing. So I was thinking about mixing it with other relevant logos, such as my avatars and who knows what else. I'll think about it. (a PNG with the text "commercialsift" would be useful in that case
Very cool, looris, thanks!
Zifnab, oh..what I could do with those colors! lol
Comment hidden because you are ignoring dag. (show it anyway)
I liked the Jennifer Government logo. Is a Raider the same thing as a Twix?
Yeah, and that's why I think it's really a symbol of marketing.
There was Twix in the USA.
Then they exported it to Europe, but in some countries they decided it would sell better if they simply renamed it to "Raider" (and changed a bit logo colors too).
After some years, they changed idea and decided to revert it to the original name in every country. And when they did that, they came up with a horrible commercial, that as I kid I thought was great, which explained that "everything's the same, only the name is modified".
Discuss...
Enable JavaScript to submit a comment.