Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

Theme Conversion

edited June 2012 in Design

Has anyone done any theme conversions from WP themes to use on Elefant? I am working on one now. I have a main site I would really like to use Elefant on but my lack of knowledge of Elefants true capabilities are keeping me attached to WP for this project. Opinions anyone? I am open to suggestions for sure.

Thanks

«1

Comments

  • What I've done with Wordpress, since themes are usually so messy due to all the necessary hard-coded PHP in them, is save the rendered output from the browser and rebuild it from that, using the original theme files as more of a cross-reference.

    I'd love if there was a way to export themes from Wordpress to other formats, but Wordpress is particularly bad for that...

  • Yeah...tons of extras in the coding I've noticed. Platform seems to work well and is a major player, but why is the coding so bloated?? Seems like they could do a little better with it. I really want to build my site on Elefant...I just need to learn way more things...fast. I am on a time frame somewhat. Is Elefant basically capable of sidebar widgets and all like WP only no plugins to do the work for you? I would have to hand code them to do what I want right? For example, a twitter feed plugin in the sidebar...that's one example.

  • In a template, you define a sidebar like this:

    {! blocks/my-block-id !}
    

    You can name the ID anything you want, and that area will be editable. That's all the technical setup required.

    To make it dynamic, edit the block and use the Dynamic Objects button in the WYSIWYG editor (last button on the right), which gives you a couple dozen embeddable objects, including blog posts, RSS reader, embedded flash/audio/video, social plugins for Facebook, Twitter, and G+, dynamic menus, image galleries/slideshows, Google maps, etc. There is a Twitter feed option too.

    Elefant can definitely do a lot of what Wordpress can, just a bit differently. Templates are much simpler in Elefant, but to design a template/theme for any system you need HTML + CSS... no getting around that ;)

  • Yeah...I understand that. I am getting there for sure. Now...if I want to add more embedded objects, I should follow the same procedure as I did for the blogs app correct? And in regards to the WP Theme...you said you basically just view source and copy that and modify as needed?

  • Correct and correct :) The steps from view source are:

    1. Save the view source output to a new theme
    2. Copy the CSS and images into the theme as well (via FTP or locally if it's installed locally)
    3. Update references to the CSS and images so they're not broken
    4. Replace the rendered content with Elefant tags

    Then it's just a matter of testing/repeating step 4 until it's done. And here's a list of the main template tags (not including blocks) that you'll want:

    http://www.elefantcms.com/wiki/Page-elements-for-layouts

  • So you click on each stylesheet from the page your viewing and copy its content to a new a stylesheet into your layout folder? Or are you referring to a WP theme you may have locally already in a folder on your computer?

  • If you have it locally, just grab it from there, or if it's on your server better to use FTP than trying to grab all CSS and images from the view source.

  • Okay...just checking. I didn't know if you meant that you pulled from someone's site that you liked or just using a wp theme you had local. Got ya now.

  • One last thing...if I wanted to use a grid that I find I like, do I just upload the css to the proper folder and call it into my layout and reference it that way? Kind of you like you have for 960gs?

  • That's right. Also, if you're interested in responsive design, there are a few responsive grid systems popping up. Skeleton is the name of one I know, and even Twitter's Bootstrap went responsive in the latest version. Google around a bit and you should find one that works for you.

  • I have seen Skeleton, 960gs, Gridiculous, 1140 grid...there are tons. How do you like Skeleton? I have downloaded Twitters Bootstrap but not sure how current it is.

  • I do like Skeleton's class naming (e.g., class="six columns"), and their typography defaults are much nicer than 960 too (I also feel like 960 needs a serious update too). They also go a bit beyond what 960 and others do with their button and form styles, although not as far as Bootstrap so they're more lightweight.

    Bootstrap is handy for putting a UI together very quickly too, although now we're starting to see sites that all look the same since it provides so much out of the box...

  • Got ya...I didn't like 960 when I looked at it...I have Skeleton and Bootstrap downloaded. Going to check them out and see what I can come up with. The class naming is definitely nicely setup.

  • Well...I am in the midst of a Wordpress theme conversion. Half is decent so far but it's still quite a mess. Check it out at http://cms.wetype.it The one thing I do notice that is somewhat bothering me is having to reposition my content again and make it work with the css. Bit of a pain but should be nice in the end.

  • Hmmm...it was looking good till I had to change the location of the js files. If the js files are located under layouts/mytheme/js folder...do I reference them like that in the code? It seems to not be able to find them. I have this exact theme installed on a website running WP. If I set the location to point to where they are on the other site, the theme starts to look good. For example...the link would be www.mydomain.com/wp-content/themes/mytheme/js/custom.js If I leave that link in the coding for my elefant site using the same theme...it works and looks pretty good but once I change the location of the js files, it breaks. Can you tell me what path is supposed to be in the html file for referencing the js files? I tried a number of ways.

    Thanks

  • If you put the custom.js file into layouts/mytheme/js, then you would refer to it like this:

    <script src="/layouts/mytheme/js/custom.js"></script>
    

    Refer to them using absolute paths since URLs can take forms like /blog/post/123/my-blog-post which will screw up relative paths in URLs. Remember, it's relative to the URL of the current request, not the filesystem on the server, but absolute paths work relative to any URL.

  • edited June 2012

    Yeah...I referred to them as /layouts/mytheme/js/custom.js but for some reason under Inspect element...it would show a 404 error for the file. Strange. I know more than what it seems...but didn't know if different rules applied considering I haven't use a framework before.

  • No worries, I often try to make sure I cover things in extra detail in case it may help future visitors with similar issues too :)

    If your file is definitely there, and you're using an absolute path, could it be the file permissions? Can't think of much else it could be...

  • I will look into it some more. I do know that porting the theme over is a bit of a task but doesn't seem to be too bad.

  • Alright...I am sitting here working on this conversion...thinking. Probably too much thinking. Question I have for you is this...as I sit here asking myself if this is really a good choice to do, I cannot seem to convince myself to continue with this theme. I mean...it seems like by the time I strip it all down...there isn't anything left to it and it looks nothing like my WP site does. Should I just do themes from scratch since it seems to be a bit easier? Or am I missing something in the conversion process? What's your opinion?

  • Really depends on the theme and what you're after. Which theme is it btw?

  • Boldy by Site5. Its a nice theme just a lot going on with it at once...jquery slider...and some other fancy stuff. What I am after is to mock the theme but make it available to all for elefant. I kind of want to become a theming guy on this project. Contribution to society I guess...and a learning experience all at the same time.

  • https://github.com/shortjared/boldy.git

    I couldn't sleep. That should give you a good jumping off point to work with it. There is a few css flaws in it.

    If you need the whole dropdown menu thing working let me know, I have a navigation handler that displays the entire navigation tree the way you would need it. I just never got around to adding it for jbroadway to pull into the master.

    Good luck. :)

  • Very nice work ShortJ. Thanks a bunch! I have left so much coding in there compared to yours. Another thing I am seeing and maybe y'all can test this out. I notice that if I have for example, boldy.html, contact.html, and blog.html say and 3 stylesheets to match for the said html pages in my theme folder and I activate that theme. I get the following issues....The main page boldy.html will work for the index page but say the blog and contact might look like a default template. Now...if I delete the other folders I have in my layouts folder such as montreal, bluesatellite, etc....and just leave in my themes folder, my pages work and look as should. I have all the pages under extra options set as default layout but have my theme set as default in designer section of admin.

    It is very strange the issues I am having. Not sure whats up with that. Do either of you have multiple folders in your layouts for themes you have created that have multiple pages? I also notice that if I only have the themename.html file and themename.css sheet in there and use that same layout and style for all pages created on my site, it works fine. Seems to be only if you want more than one page and one stylesheet.

  • No problem. :) I had never really done a theme conversion for elefant before, I can tell you that that was about the quickest conversion I have ever had the pleasure of doing. Elefant is awesome!

    I do know that sometimes things are finicky if you have multiple files named the same thing. Also, caching plus same files names causes some weird collisions. I'll have to take a look at the layouts core and see if anything can be done, maybe you could try to confirm my suspicions as well.

  • Yeah...I am looking into it as well. Grr...but now since you have successfully converted the theme, I have to find another. This time I'm not telling y'all which one I am doing! Haha...I need to learn. But I will use the one you did to compare what I was doing so that I can see what I was doing wrong. I was about 75% done but it was still looking a bit rough because I was having issues placing my js and jquery files in proper locations.

  • ShortJ...did you do the suggested method of installing the theme and grabbing the HTML code? Or did you just save the php code from index.php on the theme and convert it that way?

  • I just used wget command line magic. So basically I had the HTML file (no php code) and just went through and converted that with elefant logic and blocks.

  • You did wget from the wordpress site? Not sure exactly what you mean. The reason I ask is because I do have a test WP site I can install the theme on and pull the html code but if there is an easier way or cleaner way, I am all ears.

  • edited June 2012

    I just used wget on site5's installation of boldy. Just skipped the install step. You can do it locally too, no real difference. I was just too lazy to go through installing Wordpress stuff.

Sign In or Register to comment.