HOME | DD
flatmo1 —
EIGHT - start page - UPDATE
by-nd
Published: 2011-06-12 18:27:47 +0000 UTC; Views: 300615; Favourites: 1066; Downloads: 128029
Redirect to original
Description
- HTML + CSS + jQuery start page for web browsers
- inspired by Windows 8 screenshots
- easy customizable - via WYSIWYG editor directly in browser
License changed to CC BY-ND 3.0 because of some users, which are sharing not working modifications of my work!
NEW: Support page with download, demo, instructions and FAQs - eight.kx.cz
thumbnails icons could be find here: Thumbnails for "EIGHT" by ~jeppethe
Update 1.8.2011:
- added WYSIWYG editor of config file - config.htm
- vertically centered screens
- fixed some small bugs in CSS and jQuery
Big update 28.6.2011:
- added ability to have more blocks with names and animated switch between blocks (by clicking, keyboard, mouse wheel)
Update 24.6.2011:
- compatible with Firefox 5.0, Chrome 12, Opera 11.50, IE8
- added ability to change search engine before searching
Update 15.6.2011:
- compatible with Firefox 4.0.1, Chrome 12, Opera 11.11, IE8
- added hover effect (can be used or not)
- custom search engine (google, bing, yahoo)
- settings stored in .js file - thanks ~custofreak for nice idea
This work is licensed under a Creative Commons Attribution-No Derivative Works 3.0 License
Related content
Comments: 569
Very nice work ! Congratulations ! One question....I would like to change the background colors on 2nd and 3rd Page with my own...how can I do that ? As it is.... I can only change it on 1st page....
👍: 0 ⏩: 0
thanks. Why don't you create the ''EIGHT-start page'' add-on for there browser ?
👍: 0 ⏩: 0
Using this as my firefox's start page. This is really very good. Although there are some things I'd like to point out with editing the configuration:
1. Cannot edit the links in the next slide, neither does it appear as default when the first slide is modified.
2. No mention of the font used, neither does that font get applied to (modified) links with no thumbnail.
In short, configuration is very rigid, at best. There are many other features that could be added, but that's upto you.
👍: 0 ⏩: 1
Configuration tool is only some kind of help for users. All settings can be set manually.
👍: 0 ⏩: 0
great! but why does it keep bringing me to a search engine when i type in index.htm?
👍: 0 ⏩: 2
Because there is set to focus search bar after page load.
👍: 0 ⏩: 0
Awesome. It would be nice if we have mouse drag feature also.
Thanks
👍: 0 ⏩: 0
I use Firefox and this is far better then the original FF startpage
👍: 0 ⏩: 0
Please read my comment with Welcome to the future of eight start page
👍: 0 ⏩: 0
how do you add hover effect for ALL arrows
👍: 0 ⏩: 0
It is not possible, jQuery can work only with DOM objects (i.e. document), cannot work with browser objects.
👍: 0 ⏩: 0
keep up the great work! this is pretty awesome. I've already put it on my TabletPC...
👍: 0 ⏩: 0
Is anyone else not getting the favicon in chrome (v.13)? I see it in IE and firefox but not in chrome...any ideas?
👍: 0 ⏩: 1
There is a problem in chrome, that chrome doesn't load favicon from local machine.
👍: 0 ⏩: 1
Okay thanks! I fixed it by putting the file on my local web
👍: 0 ⏩: 0
Whoa dude nice, I was gonna ask if I could copy your idea only make it more accessible to the public, but you did that your self so props!
👍: 0 ⏩: 0
Awesome, do you mind if I upload my version of it?
👍: 0 ⏩: 1
Please, respect conditions of CC BY-ND 3.0 license and do not share your version of EIGHT - start page.
👍: 0 ⏩: 0
Scrap that. I've already got it in my favourites. XD
👍: 0 ⏩: 0
Hi! I love this design, thanks for sharing it 
👍: 0 ⏩: 1
Theoretically it is possible by editing 'style.css' and 'index.htm'. But I thing, it looks better with search bar. If you want to have this design without search bar, just edit this two files.
👍: 0 ⏩: 0
how on earth do you customize it? i've set it as my homepage, but from there it seems pretty concrete. do i need to know programming or CSS or any of that stuff?
👍: 0 ⏩: 1
No, you do not need to know any programming language. All settings are stored in 'source.js'. There you can set all according to your choice. Or you can download new updated version (update from 1.8.2011) and there is a WYSIWYG editor directly in browser, which generate config file. Then you just replace 'source.js' text with this generated text.
👍: 0 ⏩: 0
Amazing job !!!
Just one job is a good reason for using DA..........
👍: 0 ⏩: 0
Welcome to the future of eight start page (rework design)
[link]
👍: 0 ⏩: 1
it would also be nice if it could re-size appropriately when the browser isnt maximized so the tiles would still be viewable in a smaller setting
👍: 0 ⏩: 0
Hello, is possible to change the effect when I hover item mouse over? I had the effect of increasing size of button in previous version and i liked it much more than the glow which is now. I would like to have increasing size effect again. thanks
👍: 0 ⏩: 1
I have made only the "glow" effect. Other effect are not my work. It is relatively easy to make other effect with CSS3 functionality.
👍: 0 ⏩: 0
Is there anyway of adding another row or reducing the padding around the tiles - I'm running at 1920x1080 and there is a lot of purple wasted space that would be great if I could utilize. on the older version I could zoom in and it centered - with the multi screen version I loose the links on the right.
Awesome work - This has become my home page on all my systems
👍: 0 ⏩: 0
Great Work - Can't wait for the Editor - thanks for the effort!
👍: 0 ⏩: 0
i would like to make different bg colors for each pane. like when the page opens you have most used then social then news but say i want a red back grouns for nwtflix in most used but in the same spot under social i want the same location to be yellow or blue in news section is there away this can be done with out major changes?
👍: 0 ⏩: 1
It is possible. In 'lib/style.css' add:
#thumb1-1{
background-image:none;
background-color: -hex code of color-;
}
thumb1-1 mean first pane of first screen, so thumb2-9 is ninth pane of second screen etc.
👍: 0 ⏩: 0
I love this...You should make a tutorial how to edit it up, so we can change the first page, delete last page etc. I mean I can do it [link] obviously but others might not figure this one out...
👍: 0 ⏩: 1
I am working now on a WYSIWYG like editor (HTML file) for easiest customization.
👍: 0 ⏩: 0
Is there any way of making it have more than 3 pages?
👍: 0 ⏩: 1
Yes, it is possible. Maybe in some of next update I will add more pages.
👍: 0 ⏩: 0
Ok, I figured out how to get the background to actually be the "bg.png" in the lib folder. Originally, the "style.css" file just specifies a color as the background, but for the people who want to be able to edit it, this doesn't do much good. To set the file to be the background, one simply has to replace the line in the "style.css" that originally said:
Background:#260930;
with this line:
Background:url('bg.png');
This change should allow the background to be edited via the "bg.png" file.
👍: 0 ⏩: 1
Using image background instead of background color is better only in case, if you want to use background with no solid color.
If somebody have screen resolution for example 1920x1080, he need to make a file with relatively big size and this is not good for loading speed. So it is better to use solid color background. And it is not so hard to find HEX code of color.
👍: 0 ⏩: 1
I realize this, but the reason that I posted this is to help those that are not quite as familiar with css coding to know how to use an image as the background instead of the solid color. I myself have a large display and have the exact problem you have described.
👍: 0 ⏩: 0
<= Prev | | Next =>