Where can I find a guide to create a backend theme from scratch?

zedee

Hi!

I'm wondering if someone could give me some directions to create a front or backend theme from scratch.

Current documentation is a bit scarce. It gets you started but I'm missing lots of details.

Any ideas?

armababy

Well havn't seen any resources on this topic besides documentation, flatty theme and asgard website.

Are you looking anything specific or general overall view?
I personally do my Themes from scaffold tool and then missing stuff.

zedee

@armababy

Well, I'm looking for a more detailed process.

I personally do my Themes from scaffold tool and then missing stuff.

Could you elaborate a bit more what do you mean with this?

I followed this directions: Creating a Theme.

Now I think I've seen on the docs the theme scaffolding you told me Creating a Theme (Via scaffolding)

Will check the quickcast and update, because I've been a bit lost following the 'creating a theme' part.

armababy

@zedee Hmm it would take many moons to cover my full process and since i'm not frontend guy i tend to spend quite some time on basic tasks

What i can do is to share any information or way of me doing things for something specific.

So you scaffold-ed theme and now you have blank page.
First thing i do is create my layouts based on flatty master layout and index page.
I use bower for any vendor assets i need for example bootstrap.

If you have DebugBar enabled (which it is by default) you can see all available variables and what view/s being called.

zedee

@armababy

(Un)fortunately I have to take care of the front and the backend, so I'm the guy for everything

So far so good. Following the theme creation via scaffolding now I see it more clearly. At first time I think I did it by copying the same file&folder structure that one of the demo themes, hence being a bit confused about the process.

I'm also not much used to the bower/gulp workflow, as we've been doing pretty much of this stuff in the old school way. I'm trying to make this become a de facto standard in my work, but before that I need to achieve some mastery about the process.

Now with a completely blank theme I think I'll found my way to build it. Thanks for pointing me to the Scaffolding way!

armababy

@zedee np, it's not clear cut to me either yet I have made 3 themes on development stage only.
But there's all Laravel potential available, like elixir and also any other 3rd party stuff.

zedee

By the way, I've observed that when you create a theme via php artisan asgard:theme:scaffold, the directory structure inside themeName\resources, shouldn't be this way:

resources
    |- assets/
        |- js/
        |- less/
    |- images/

instead of:

resources/
    |- css/
    |- js/
    |- images/

I noticed it because when I ran gulp after npm install I had this error (non related directly to it):

    this.registerWatcher("stylistPublish", "**/*.less");
         ^

TypeError: this.registerWatcher is not a function

Which I solved modifying the gulpfile.js to make it work, as I used the Flatly's gulpfile.jsas a template for my theme, and now the lines:

elixir.extend("stylistPublish", function() {
    gulp.task("stylistPublish", function() {
        gulp.src("").pipe(shell("php ../../artisan stylist:publish "+themeInfo.name));
    });

    this.registerWatcher("stylistPublish", "**/*.less");

    return this.queueTask("stylistPublish");
});

Should be:

elixir.extend("stylistPublish", function() {
    gulp.task("stylistPublish", function() {
        return gulp.src("").pipe(shell("php ../../artisan stylist:publish "+themeInfo.name));
    })
    .watch("**/*.less");
});

Then, running gulp again I had this error:

Fetching Less Source Files...
   - resources/assets/less/main.less <-- Not Found

Which I solved giving the first directory structure in this post inside the resources folder.

I'm unsure if this is an issue from floatingpointsoftware/stylist package, or from AsgardCMS? Or something I've missed when creating the theme?

zedee

@armababy

What I still don't get, is how deep is AdminLTE integrated theme into the CMS.

So if I want to design a whole different backend theme, I have to rewrite most of the CMS module behavior...?

The most I dive in into this, the more confused I get

@nWidart
Could you give some advice about how did you integrated AdminLTE theme into the CMS? Any guides to follow? Laracasts? Documentation?

armababy

@zedee

Well CMS only provides you with controller responses.
What you do with those responses(variables) depends on you.

Themes are totally decoupled from CMS itself, only tied by Core module and Stylist Theme package. But that should be no concern.
You basically have full control of freedom to do whatever you want with your theme.

Modular behavior changes would already become another topic as you would need your own rewrite modules.

I can help with any specific question, but for a broad view you would have to figure it our by trying and analyzing AdminLTE.

zedee

@armababy

you would have to figure it our by trying and analyzing AdminLTE.

Yep, that's what I'm trying to analyze.

But I'm driving nuts about how the publishing is done in AdminLTE ? I'm only being able to publish via Elixir, but I can't find how to publish the vendor folder as well...

Also, I had trouble with touching asgard.core.core.php assets. I've removed all with the theme key, but then an AssetMissingException is thrown.

Well, I'll try to analyze in deepness everything about AdminLTE. The only drawback is that I'd need that days had 96 hours instead of 24 to stay on schedule... My research time is starting to get tight!

Anyway thanks for the tips