WordPress.org

Ready to get started?Download WordPress

Forums

New Theme!: Drag n Drop Layout, Three columns, Flexible (36 posts)

  1. Ment0r
    Member
    Posted 8 years ago #

    Check it out!

    Working title is "ment-blox" and you can see it in action on my page: http://www.m3nt0r.de/blog/ (named v4 in theme switcher, but is activated by default). Play around and give feedback please. Site is in german tho, but as for demonstration purpose that shouldn't matter :)

    ABOUT:
    Okay.. This is it! This definitly blows me away. I was so excited once i got it working.. seriously.. i was going "uuu weeee" on front of my PC. Awesome.

    Kassad came up with the idea to add the netvibes functionality of a fully dragable layout. It was kinda hard for me to make it possible and started to play around with the DBX script which was also used in the CrimsonMilk Theme by Jalenack. But it was too limited. You couldn't give any custom dropzone which was what i need to declare one of the three columns in this theme as possible targets.

    The whole site are just 3 big unordered lists, floating, no fixed widths, with then again the usual WP lists.

    In version 3 i had this small dynamic box attached to every post with useful links. I didn't know where to put all this information so i thought it's nice to have in one quicklink-box and to call it "options". You can call that box, coming up with a nice slide effect, by clicking the options image at bottom of every post.

    You can colapse/expand everything on this site.

    Why?: For example. While being on "home" you could look for the posts you are interested in, just expand those and sort them before reading. I think that's a nice feature.

    As for "home" i wrote a small script. On load usually all items are collapsed, but i made it so that the first 2 articles are visible. I was checking some boxes on the left and right but i couldn't find anything of value to be shown every time the page loads. (who needs categories all the time.. etc..), so for the rest it will stay like that atm.

    Overall this site is using nearly all latest technologies while still being XHTML valid which makes me absolutly proud. (tis ma baby ^^) It's so lovely and also so expandable. I thought some more while finishing the current state:

    - How about fetching the content on box-expand via ajax.
    like: you click on the small arrow, the loading bar fades in and the content slides down once its all there.
    - How about you could generate more dragable boxes by doing a search or "browse" without having the page refreshed. That way you would have access to the whole content on one page!! "lets take this, and this, put it here, okay - thats also nice, search some more, drag, drop.. etc.." and then SAVE*!

    But before i let you finish reading, i have to admit some downsides (of course it's not final):
    - *major: the layout doesn't get saved YET! (any ideas somebody?)
    - the highlight after dragging isn't perfect (but its okay for average visitors)
    - if you abuse the functions by clicking rapidly the script starts hanging (who's so nasty, huh? ;)

    Erm.. well.. That's it for now (as if it wouldnt be much, heh). I will dig myself into the AJAX functions tonite and give you guys a shout later again. I hope you guys like it and i'm planning to make it public as soon as i'm done. And because of that i wanna collect some suggestions. Go ahead.. my motto is "nothing is impossible."

    - m3nt0r

    copy of this thread, english, for comments: http://www.m3nt0r.de/blog/?page_id=211

  2. katie1
    Member
    Posted 8 years ago #

    I like it. Nice use of colors, clean, uncluttered. I like your drop categories, as well as the ability to move stuff around. Pretty cool.

  3. Kassad
    Member
    Posted 8 years ago #

    I am awed!
    You did it, again!
    It will be hard to ask for more :)

  4. trashcast
    Member
    Posted 8 years ago #

    Very nice...seems like lots of fun to play with!
    -trav

  5. Ment0r
    Member
    Posted 8 years ago #

    thanks. i hope i can make the layout saving possible soon.

    that would bring me and wordpress to another level. what i wanna do is to make visitors able to not only save the frontend by drag & drop.

    the idea i mentioned in the first place is, that visitors can search for content and then make it static.

    theory:
    let's say you have a site about "cars" and you offer your visitors "reviews" about various models. A user now comes to your websites and would like to compare those reviews.

    usually he can achive this by opening new windows or tabs in his browser which could be quite frustrating after a while depending on his research.

    With the technique i want to develope in this theme, everything a user would need to do is type in some "models" into the live-search (ajax), click on a result and a new dynamic draggable block gets created in between all the default ones.

    Now while we are having here the possibilty to sort content live, he could take these new blocks and line them up as he likes to. Okay.. this is what we have now basicly

    The big final is: He could actually save this combination of content for later review! Bookmark it.. Any time he gets back to the page his choice of content is presented the way he wanted it.

    it's like sticking notes on any website. but the notes are the content somewhere in depths of the sites archive!

    i bet this will bring up alot new thoughts on how to create and present content within wordpress.

    if you have any more ideas like this, please share to really get the best out of this upcoming theme.

  6. justex07
    Member
    Posted 8 years ago #

    absolutely fantastic. would love to see it with more dynamic image implementation just for beauty sake but my goodness it is awesome!

  7. Kassad
    Member
    Posted 8 years ago #

    Right now, I am in the process of compiling a full review.

    I am rather excited, this is really a thought provoking theme, full with innovative solutions and with new fields of possibilities.

    For the moment, please check it in IE: the right column gone down and left.

  8. Kassad
    Member
    Posted 8 years ago #

    I put up two pictures.
    One about IE, an other about mozilla: there seems to be a "close" sign not functioning.

    Mentor4 pictures

  9. Kassad
    Member
    Posted 8 years ago #

    Oops!
    You are certainly, fast :)

  10. Ment0r
    Member
    Posted 8 years ago #

    hehe.. erm.. i tried another style of making a tableless layout, but the footer was bugging me. before i put now hours into this i just make the overall size 99% instead of 80%, making more room for the columns what should stop the breaking.

    btw.. fixed a major ajax bug in IE (wasnt working at all), and in my research you can scale the window in IE down to 882pixels at current state.

    i dont expect problems on IE + 1024. sorry for that, but i was more into functionality recently.

    Also, since the i hacked the comments templates, the site aint valid on single post view anymore.. i have no idea where it is.. and actually the code is so huge that tinker on that small particular bug is too time consuming. HTML tidy just throws random erros. i bet i forgot some closing tag in between the http-gets .. bah. evil.

    i rather work on my next version 4.2 for now which will be overworked alot. if i change now the base files to much i need to synch alot of old crap tho..

    i hope this temporary quick adjust works out.
    im back to desk :)

    -mentor

  11. Kassad
    Member
    Posted 8 years ago #

    First of all, I congratulate!
    You surpassed all my expectations and just in a so short time.

    Now, back to business :)
    Technically, I cannot find major problems. Those, you have already mentioned, certainly you will sort them out.
    From users' point of view, when opening the site, it seems a bit sparse, so I would let those boxes have opened at the first time and let the user decide how to configure them, personally.
    I would put all box-functions in the title bar of the boxes (just like netvibes) and and make the open/close cycle a two-way/one-click option. Generally, I would put all functions in the title bars if it is possible.
    When you click more... in an article it stays. Perhaps, it would be nice to make it work backward, as well.

    As to your ideas:
    Fetching content via AJAX ? Please do it! I am not sure but it may effect positively overall site performance.
    The idea of generating your own content via "live search" is GREAT!
    There are two possible use of this feature:
    First, you may, kind of "syndicate" the site itself and make a personalized view of it, making it your "favorites" and bookmarks, as well.
    Secondly, you may use it as your own "built-in" newsreader (supposedly in a different page) just like netvibes.
    I cannot boast about it sufficiently, because it is great: in a glance I can overview the fresh news on the subjects I thought important for me. The previewing is also great! And all this, in one place.

    I see three possible use of this "new technology":

    1. Theme design:

    If you "wrap" the sidebar and content boxes and give the option to "use/do not use" or "on/off" then the user would be able, kind of, make an on-line design, choosing layouts (two/three colum) positioned (left/right), etc.

    2. Content handling:

    As I have already mentioned above: user definable content, either insite or outsite.

    3. WP-core

    Now, it is really time to introduce some really useful features into wp functionality like post-saving with AJAX, some kind of visual style or theme editing. Those, previewed in 1.6a are nice but more of a play then really useful, from my point of view.

    The aboves are my absolutely personal views and if I said something foolish, I ask for pardon, in advance, myself not being a programmer. Certainly, there will be other opinions and observations and sure, will be welcomed by the author.

  12. c0y0te
    Member
    Posted 8 years ago #

    Mentor,

    I love this theme, and I love what you are planning to do with it. Are you intending on making this available to the public when complete? If so - I want a copy, its exactly the sort of direction I want to take my site.

  13. Ment0r
    Member
    Posted 8 years ago #

    Kassad:
    Fetching content via AJAX ? Please do it! I am not sure but it may effect positively overall site performance.

    Actually the site is ajax enabled. The user gets on first launch only the excerpts of all the posts. if he click on "more.." the content is loaded over ajax (indicated by the small animated clock under the posttitle).

    Kassad:
    1. Theme design:
    If you "wrap" the sidebar and content boxes and give the option to "use/do not use" or "on/off" then the user would be able, kind of, make an on-line design, choosing layouts (two/three colum) positioned (left/right), etc

    Im working on this at the moment. All blocks are actually already generated over PHP. The Layout is now nothing more then just a list of numbers. Now i only need to call this over ajax and some buttons and the user is able to flip around the whole content, randomize, sort, hide, choose from onsite layout templates, etc... :)

    I'm close!! :)

    once i got that i just need to write a small script to save this layout (list of numbers) and it's done!

    modular themes & web2.0, here i come..

  14. Kassad
    Member
    Posted 8 years ago #

    I am thrilled :)

    I would not hold you up but it just struck me while I was doing my weekly conservation procedure, what effect will have the modular design cross-browser-wise.

    Is it possible to have a common "frame" that would work securely for both IE and Mozilla ?
    Also, what are the possibilities to customize these "modules" individually ?

    On some other issues, I will comment in your blog :)

  15. Ment0r
    Member
    Posted 8 years ago #

    yes. the whole deal.

    i have a "blox" folder in my theme with all the small scripts and wp-tags which normal themes have in their sidebars. now while i ripped that into tiny pieces, you could basicly put everything in there and as much as you want.

    freely modifiable "modules/plugins". you can also ad an unlimited amount of "columns". sky is the limit!!

    you just give the script a list of columns and modules and hit the load button.. thats it. you could basicly do a complete AJAXed 5 column layout with the full CSS power if you like to :) .. or even 20 columns and 50 boxes with tons of stuff. the style and functions wont break!

    i think thats really a FRAME to get started. imagine making visitors able to completly redesign your site. not only drag/drop.. adding content and columns!

    about compatibility: the "big browsers" are fully supported. i used a brandnew Web2.0 javascript framework, powered by the "prototype" api, which is very common in todays huge web applications online. i had no issues so far, but as we all know... you can always run into trouble. if so, ill find a solution.

    Edit:

    heres a small configuration script: (i can define "presets" this way)

    "preset" is named "default" and has 2 blocks on the left, the posts in the center and 2 other blocks on the right.

    i'm working with numbers.. thats why you can add as many as you want. ajax loads it all and there you go..

    $layout["default"][$col[0]][] = $modules['archive'];
    $layout["default"][$col[0]][] = $modules['cats'];
    $layout["default"][$col[1]][] = $modules['post'];
    $layout["default"][$col[2]][] = $modules['amazon'];
    $layout["default"][$col[2]][] = $modules['stuff'];

    for example.. if i put in now $col[3] then i have a four-column theme, etc...

    you could also define new presets and link them on your site, or in a easy dropdown like seen in the "theme switcher" plugin.. only it's all live n nice. :)

    this will rock! :D

  16. Kassad
    Member
    Posted 8 years ago #

    Wow!
    I am silenced :)

  17. angsuman
    Member
    Posted 8 years ago #

    Wonderful Theme.
    I wonder if you could put the content ahead of the menus. AFAIK it helps the search engines in properly classifying the pages.

  18. angsuman
    Member
    Posted 8 years ago #

    Where to download it?

  19. Ment0r
    Member
    Posted 8 years ago #

    its beta. no download yet. as you can see i have alot on my mind with this, so please be patient. this beauty needs care :)

  20. Ment0r
    Member
    Posted 8 years ago #

    Version 4.2 is live!
    Choose layout style beneath the Header!!

    :) .. this is completly dynamic. just need to write an admin plugin. some issues tho with the positions of columns. please test it. im not saying its perfect, but nearly..

    check it out. thank you :)

  21. angsuman
    Member
    Posted 8 years ago #

    I nearly gave up on CSS wrt. flexibility issues. Now you made me look again.

  22. Ment0r
    Member
    Posted 8 years ago #

    okay. there are some issues right now. The main one is, that i somehow killed the permlinks ^^ .. linking to a post directly aint possible anymore since i am now having "active content" only.

    but i am already up to figure out a way. maybe some sort of wrapper wp <> my theme :)

    You can find a feature, todo and coming-soon list in my most recent post at http://www.m3nt0r.de

  23. Kassad
    Member
    Posted 8 years ago #

    Been away, for a while. I have a backlog as big as hell :)
    Great progress! Trying to catch up.

    Wow, even I can move a post window over the viewport.

    Still some minor things.

    There seems to be "hidden hotspots" affecting window behavior when moving around like sidebar items assuming post dimensions and vica versa. Some funny things when over viewport and opening/closing items.
    This needs a heavy testing. There may be unexpected behaviours.
    But, overall: it is GREEEEAAAAT :D

  24. moloko
    Member
    Posted 8 years ago #

    Great job. I have been trying to impliment this javascript into my blog for a while now. This look awsome. Great job.

    Some errors pop up when moving things from sidebar to content. This is superflexible. LOL.

  25. mpm
    Member
    Posted 8 years ago #

    god man. i want this theme so bad I can taste it. It is exactly what I've been looking for. Do you have a projected time you think it will be available?

  26. Ment0r
    Member
    Posted 8 years ago #

    i am up to great things, even greater then already. i think 10-12 days is a good guess. i need at least another full weekend. during the week my regular job takes a good amount of time.

  27. angsuman
    Member
    Posted 8 years ago #

    I am holding my breath :)

  28. Ment0r
    Member
    Posted 8 years ago #

    Version 4.2 RoundUp:

    - Direct Links didnt work. Now fixed, added GET wrapper for WordPress
    - Removed AJAX-loading from search results (messed up drag/drop)
    - Removed various Highlights (yellow flashs, suggest: Kassad)
    - Cleaned Comments AJAX
    - Removed hidden Garbage container which caused trouble (reported: Kassad)
    - Added 3 step post reading (ajax)
    1 step: loading page: excerpt only
    2 step: clicked on more: content only
    3 step: clicked on comments: load comments

    - Introduced Layout-Presets
    - Fixed DOM issues and onload stuff
    - System is now complete modular and flexible
    - Added custom template_tags

    ### upcoming
    adding cookie system. another interesting feature i want to invent is based on this step. since the cookie is stored on visitors harddisk, the cookie COULD influence the layout of any page running my system!

    1 layout, all blogs with the theme will be able to read and use it...no matter how they look like. example: have archives block, search block, always on top.. everywhere!
    or create a complete other look. basicly: you can make a layout on Blog A and also use it on Blog B :)

    ill explain more on that topic later. dont want to say too much. stay tuned :)

    http://www.m3nt0r.de/blog/?page_id=211

  29. Kassad
    Member
    Posted 8 years ago #

    Well, Mentor!
    Thank you for your mentioning my name more than one time but there is really no need for it.
    It would seem I was calling for it :)
    I am vain but not to that degree.

    There are still some minor annoyances in IE e.g. when dragging the Comments box to the right side there will not work the open/close cycle. The others looks fine. I suppose, you still not reached the right configuration for 800. This IE is a real pain in the ass.

    What about making a pre-release?
    Let the good people make the debug :)

    At the present, I am not sure what is happening in the "Your layout" section. As you indicated, we may actually influence your system. Or is it you who actually put some stuff there, right now? The preset layouts, one column and two colums are left aligned. Would not it be better to center them?

    I suppose, there may be two kind of behaviours for the presets. They follow a "snap to grid" principle or they may be positioned unimpeded. Certainly, the first one would be the right method otherwise it would be easy to create uneven layouts. Though, perhaps introducing gridline system would help in exact positioning.

    And yes, I think, now, it is a "must" to augment this system toward a full blown CMS.

    Just, as you said: "the sky is the limit" :)

  30. Ment0r
    Member
    Posted 8 years ago #

    The child has a name!

    From ment-blox to BloxPress.

    I have just openend a site dedicated to this theme project over at http://www.bloxpress.org.

    Infos about further development will be posted there. My website m3nt0r.de will be furthermore my beta/demonstration page.

Topic Closed

This topic has been closed to new replies.

About this Topic