Support » Your WordPress » New Theme!: Drag n Drop Layout, Three columns, Flexible

  • Check it out!

    Working title is “ment-blox” and you can see it in action on my page: (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 🙂

    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:

Viewing 15 replies - 1 through 15 (of 35 total)
  • 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.

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

    Very nice…seems like lots of fun to play with!

    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.

    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.

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

    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.

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

    Mentor4 pictures

    You are certainly, fast 🙂

    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 🙂


    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.


    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.

    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).

    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..

    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 🙂

    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.


    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! 😀

    I am silenced 🙂

Viewing 15 replies - 1 through 15 (of 35 total)
  • The topic ‘New Theme!: Drag n Drop Layout, Three columns, Flexible’ is closed to new replies.