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

Using a downloaded theme

Has anyone tried using a paid or downloaded theme in elefant? Something like https://wrapbootstrap.com/theme/unify-responsive-website-template-WB0412697 -- what's involved in getting it to work in elefant?

Comments

  • It really depends on the HTML of the theme itself. Elefant's template tags are pretty simple, but some themes can have fairly complex HTML that can make it harder to find a fit for things.

    Sometimes you have to adapt things like navigation styles, because they'll assume a specific HTML structure in their CSS, which can make it harder to use things like {! navigation/top !} to generate dynamic menus.

    In those cases, you can either make the navigation static, or modify the CSS to use Elefant's HTML output instead of that part of the theme.

    Hope that helps!

  • Thanks, that's helpful. How about more generally, do you have any suggestions for theming Elefant? One thing that makes WordPress so tempting for clients is that it's so easy to find and install themes.

  • That's a hard one to compete with, since there are a million themes for WP. I find theming Elefant much easier since the template language is so simple and so much cleaner by comparison, but it's still work to convert themes from raw HTML into anything, or worse, from another CMS's idioms into ours.

    Most sites I work with have custom designs, so it's not something that comes up often for me.

    For a few sample "real world" Elefant themes, view the source on these links:

    Theme for this website: https://www.elefantcms.com/layouts/e2/e2.html

    Theme for alysonshane.com: http://alysonshane.com/layouts/alysonshane/alysonshane.html

    Theme for 245mcdermot.ca: https://245mcdermot.ca/layouts/245mcdermot/245mcdermot.html

    The last one is a bit more complex, but as you can see they're a far cry from a lot of the WP themes I've seen :P

  • Thanks, those look good. Themes also include css, though, right? Basically, I'm looking for a way to slap out quick and dirty Elefant sites without having to start from scratch every time, since a number of my clients don't really need (or want the expense of) custom design. Also, I'm starting to farm out some work to colleagues and they tend to find getting started with Elefant a little daunting. (Too blank-slate-ish, I guess.)

    How about starting with bootstrap?

  • There are a few themes you could use as a starting point over here:

    https://www.elefantcms.com/listings/theme

    A couple of them use Bootstrap, but I know the one I made is woefully out of date with Bootstrap's releases.

    Maybe it's time to revamp Elefant's default theme to make it more useful out of the box.

  • What kind of changes are you thinking of?

    The Elefant themes look good, but there are only ten of them. I think it'd be awesome if it were relatively straightforward to spend a few bucks somewhere like http://themeforest.net/category/site-templates (where there are thousands of themes) and have an Elefant insta-theme.

    It seems like the difficulty is as much with the themes as with Elefant, though.

  • Not sure I'd change too much, but I'd probably replace the slideshow with a single editable photo, same with the logo space, and add an optional login for users so it's not so buried.

    I have some changes planned to make it easier to customize properties of a theme without having to modify the theme itself, similar to how Tumblr works. So I wouldn't change too much, just some things to make it easier to tweak an existing theme to a user's liking.

  • OK, I bought the theme I mentioned in the first post and I've installed it. So far, I've mostly moved things around to correspond to Elefant's directory structure and updated the layout to reflect the moves. But I'm running into an issue when logged in -- Elefant's top admin bar doesn't show. Firebug says "TypeError: $.i18n is not a function -- top-bar.js (line 185, col 240)"

    I think the theme's jquery is conflicting with Elefant's but I'm not sure how to debug.

  • I would try taking out their jQuery include and adding in these lines above the theme's additional script includes:

    {! admin/head !}
    {{ head|none }}
    

    Let me know if that helps.

  • Thanks. I had already added in {! admin/head !} and {{ head|none }}; taking out their jQuery include fixed it.

  • Hooking the theme up to elefant is working pretty well. So far, I've only had to hack elefant code once: to add classes to the <ul> in {! navigation/top !}.

  • Nice! What classes are they? Would it help to have a few default classes added to the navigation output?

  • I changed <ul> to <ul class="nav navbar-nav"> Would there be a way to supply the class(es) to the handler?

  • That's a cool idea actually, just passing the classes to the nav call...

    {! navigation/top?classes[ul]=nav navbar-nav&classes[li]=navbar-item !}
    

    It would still add the active and current classes to the active list item, but that would make it easier to match the classes of an existing stylesheet instead of modifying the stylesheet to suit Elefant's output.

    There's probably a nicer syntax than the above sample though ;)

  • Yeah, something like that would be great!

Sign In or Register to comment.