"Cyber Manager" (for lack of a better name)
Moderator: General Moderators
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
"Cyber Manager" (for lack of a better name)
Hello, world!
Just though I'd share a project I'm working on with everyone. It's a centralized online "presence" manager. It takes care of email, feeds, blogs, everything. The reason I'm doing this, is partly for the challenge (advanced CSS and making an HTML5 web app), and partly because I don't use Google, but I really like their "look".
So, here it is. No dynamics, just the bare bones. No hacks (see viewtopic.php?f=68&t=108996). Just one stylesheet, and displays perfectly in Webkit and Gecko. This is the most advanced CSS I've ever done. Let me know what you think. It's a mix between Wave and Chromium.
http://nucleussystems.com/test_files/cybermanager/
P.S. Please ignore the lame name. It's all I can come up with for now. Got a better one?
Edit: Used CSS suggested by MichaelR, added logo, placed all code under GPL-3.
Just though I'd share a project I'm working on with everyone. It's a centralized online "presence" manager. It takes care of email, feeds, blogs, everything. The reason I'm doing this, is partly for the challenge (advanced CSS and making an HTML5 web app), and partly because I don't use Google, but I really like their "look".
So, here it is. No dynamics, just the bare bones. No hacks (see viewtopic.php?f=68&t=108996). Just one stylesheet, and displays perfectly in Webkit and Gecko. This is the most advanced CSS I've ever done. Let me know what you think. It's a mix between Wave and Chromium.
http://nucleussystems.com/test_files/cybermanager/
P.S. Please ignore the lame name. It's all I can come up with for now. Got a better one?
Edit: Used CSS suggested by MichaelR, added logo, placed all code under GPL-3.
Last edited by Jonah Bron on Sun Dec 13, 2009 7:31 pm, edited 2 times in total.
Re: "Cyber Manager" (for lack of a better name)
Looks good. I'd suggest adding the following to stop Chrome's annoying textbox highlighting:
Code: Select all
:focus {
outline: none;
}Re: "Cyber Manager" (for lack of a better name)
This looks great - very clear and usable interface, although when I click on a tab (any tab), it pretends it's doing something but doesn't go anywhere ("Main" tab stays highlighted)
I love this idea - I'm trying to do something similar but it's not coming out quite so clean or pretty. I hope this project progresses well for you ^_^
I love this idea - I'm trying to do something similar but it's not coming out quite so clean or pretty. I hope this project progresses well for you ^_^
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
Re: "Cyber Manager" (for lack of a better name)
ahh, that explains why they don't seem to do anything. Still, looks great - if you're planning to develop under an Open Source license, I'd love to see your source code (I'm a css n00b, the tabs concept alone awes me), but I wouldn't be offended if you said no.
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
Re: "Cyber Manager" (for lack of a better name)
Sure, but there is none, yet. What you see is all I've done so far. I'll setup a page for it. Keep you posted.
If you come up with a good name for this thing, let me know.
If you come up with a good name for this thing, let me know.
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
Okay, I've decided to make this part of a larger project, called Cloud Suite. It'll be several opensource web apps to run on a personal server. Here's the project:
https://sourceforge.net/projects/cloudsuite/
You can download what's done so far on "Data Manager".
https://sourceforge.net/projects/cloudsuite/
You can download what's done so far on "Data Manager".
Re: "Cyber Manager" (for lack of a better name)
I'm grabbing this as I type - really looking forward to toying around with it - just wanted to say thanks for making this available as open source ^_^
I also see it's part of a suite of web-apps, I'm thinking based on what I've already seen, I can hardly wait to see what other goodies are in there. Again, kudos and thanks!
I also see it's part of a suite of web-apps, I'm thinking based on what I've already seen, I can hardly wait to see what other goodies are in there. Again, kudos and thanks!
Re: "Cyber Manager" (for lack of a better name)
I've got my copy. You've got some nice looking HTML here.
Tab titles aside, what sorts of information do you see this application housing and keeping track of?
Tab titles aside, what sorts of information do you see this application housing and keeping track of?
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
Re: "Cyber Manager" (for lack of a better name)
Bug: "/img/bottom-strip-....png" images are white at the top, but background is #F4F9FE
All top navigation images you could place into single sprite file to save few requests.
All top navigation images you could place into single sprite file to save few requests.
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
Re: "Cyber Manager" (for lack of a better name)
I see. Didn't notice that, thanks. I'll look into sprite files.
Okay, this is wierd. I just switched over to my Linux OS, and Firefox (3.5.6) doesn't display it correctly anymore. Chromium works fine. Is there some sort of difference between Windows Firefox and Linux Firefox? If so, how do I change the stylesheet for Firefox?
Thanks.
Edit: By "change the stylesheet", I mean selective stylesheet loading
Okay, this is wierd. I just switched over to my Linux OS, and Firefox (3.5.6) doesn't display it correctly anymore. Chromium works fine. Is there some sort of difference between Windows Firefox and Linux Firefox? If so, how do I change the stylesheet for Firefox?
Thanks.
Edit: By "change the stylesheet", I mean selective stylesheet loading
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: "Cyber Manager" (for lack of a better name)
Maybe you could use something like the code below for 'changing' the stylesheet. The second line of code is for I.E, I don't know of any that might be specific to Firefox.
Nice work on the css, it's refresing to see a developer/designer using % widths, floats and not the dreaded table. Kudos on that. Btw, tested it on vista ( not on FF 3.5.6 yet ) and it looks good.
Code: Select all
<html>
@import url("../style/test.css");
<!--[if IE]><link rel="stylesheet" type="text/css" href="../style/test.css" media="screen" /><![endif]-->
</html>
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
Re: "Cyber Manager" (for lack of a better name)
looks sort of funny to me. like there are "artifacts". looks exactly the same in opera 10.10 and firefox 3.5.5 on ubuntu. css is kind of hard to follow. think about structuring it differently and having a order for the tags.
i go from top to bottom of the page with child elements following parent elements and i usually place all the images in their own little space to make it easy to find them. i always order attributes like so:
images like this:
and then its not really all that important anymore with all the bandwidth going around but you can structure the css of slow-loading sites to allow the layout to come together faster while elements are still loading. i remember having dial up and always hating watching website bounce around like flubber before they finished loading.
oh and by the way you are using the html5 doctype but none of the new elements?
i go from top to bottom of the page with child elements following parent elements and i usually place all the images in their own little space to make it easy to find them. i always order attributes like so:
Code: Select all
display: block;
position: relative;
z-index: 10;
top: 0;
left: 0;
width: 1em;
height: 1em;
margin: 0;
padding: 0;
border: 0;
overflow: auto;
text-align: right;
vertical-align: bottom;
font-family: tahoma;
font-size: 11pt;
font-weight: normal;
color: #0a1634;
background-color: #efefff;
Code: Select all
/* Images ****************************************************/
header div#image { background: transparent url('../img/header.png') left bottom no-repeat; }
footer div.l { background: transparent url('../img/menu_bg_left.png') bottom no-repeat; }
footer nav { background: transparent url('../img/menu_bg_grad.png') bottom repeat-x; }
footer div.r { background: transparent url('../img/menu_bg_right.png') bottom no-repeat; }
nav a.button div.l { background: transparent url('../img/menu_button_left.png'); }
nav a.button div.m { background: transparent url('../img/menu_button_grad.png'); }
nav a.button div.r { background: transparent url('../img/menu_button_right.png'); }
nav a.button:hover div.l { background: transparent url('../img/menu_button_left_hover.png'); }
nav a.button:hover div.m { background: transparent url('../img/menu_button_grad_hover.png'); }
nav a.button:hover div.r { background: transparent url('../img/menu_button_right_hover.png'); }
nav a.button:hover div.l { background: transparent url('../img/menu_button_left_hover.png'); }
nav a.button:hover div.m { background: transparent url('../img/menu_button_grad_hover.png'); }
nav a.button:hover div.r { background: transparent url('../img/menu_button_right_hover.png'); }
div.audio div.l { background: transparent url('../img/player_left.png') no-repeat; }
div.audio div.t { background: transparent url('../img/player_grad.png') repeat-x; }
div.audio div.f { background: transparent url('../img/player_frame.png') no-repeat; }
div.audio div.t div#track div.l { background: transparent url('../img/player_track_left.png') no-repeat; }
div.audio div.t div#track div.m { background: transparent url('../img/player_track_grad.png') repeat-x; }
div.audio div.t div#track div.r { background: transparent url('../img/player_track_right.png') no-repeat; }
div.audio div.t a div#last { background: transparent url('../img/player_seek_last.png') no-repeat; }
div.audio div.t a div#next { background: transparent url('../img/player_seek_next.png') no-repeat; }
div.audio div.f a div#play { background: transparent url('../img/player_play_button.png') no-repeat; }
div.audio div.f a div#pause { background: transparent url('../img/player_pause_button.png') no-repeat; }
div.audio div.t a:hover div#last { background: transparent url('../img/player_seek_last_hover.png') no-repeat; }
div.audio div.t a:hover div#next { background: transparent url('../img/player_seek_next_hover.png') no-repeat; }
div.audio div.f a:hover div#play { background: transparent url('../img/player_play_button_hover.png') no-repeat; }
div.audio div.f a:hover div#pause { background: transparent url('../img/player_pause_button_hover.png') no-repeat; }
article div#top div.left { background: transparent url('../img/article_bg_t_l.png') no-repeat; }
article div#top div.middle { background: transparent url('../img/article_bg_t_m.png') repeat-x; }
article div#top div.right { background: transparent url('../img/article_bg_t_r.png') no-repeat; }
article div#middle div.left { background: transparent url('../img/article_bg_m_l.png') repeat-y; }
article div#middle div.middle { background: transparent url('../img/article_bg_m_m.png'); }
article div#middle div.right { background: transparent url('../img/article_bg_m_r.png') repeat-y; }
article div#bottom div.left { background: transparent url('../img/article_bg_b_l.png') no-repeat; }
article div#bottom div.middle { background: transparent url('../img/article_bg_b_m.png') repeat-x; }
article div#bottom div.right { background: transparent url('../img/article_bg_b_r.png') no-repeat; }
oh and by the way you are using the html5 doctype but none of the new elements?