Newbie question: where do you find templates???

26 Posts

Erica Reply #1, 6 years, 5 months ago

Hi,
This is probably a stupid question, but where do you find templates? It seems like people refer to the extras, but I can't seem to find anything that has something to do with templates in the extras menu (I mean, there are menu items like personalizations and style, but they don't seem to have much to do with templates). What am I missing?

This question has been answered by BobRay. See the first response.

932 Posts

LK Reply #2, 6 years, 5 months ago

MODX is really built on the principle of creative freedom, in that you can create whatever you want. It's not really centered around prebuilt templates and building the same old as everyone else. That being said I think there are a few themes available to purchase

■ email: [email protected] | ■ website: https://alienbuild.uk

The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.

571 Posts

Andy Tough Reply #3, 6 years, 5 months ago

Theme Forest have a few MODX templates. I don't have any experience of using them, so I cannot vouch for them.

https://themeforest.net/category/cms-themes/modx-themes

There are some good videos in the MODX documentation:

https://docs.modx.com/revolution/2.x/getting-started/video-quick-start-series/

If I help you out on these forums I would be very grateful if you would consider rating me on Trustpilot: https://uk.trustpilot.com/review/andytough.com

email: [email protected] | website: https://andytough.com

discuss.answer

24,544 Posts

BobRay Reply #4, 6 years, 5 months ago

A MODX template is basically just a bunch of HTML, optionally containing some MODX tags.

For example, you could take a static page from an old-fashioned site, paste its HTML code into a new MODX template, then create a new, empty resource that used that template. When viewed, that resource would be identical to the original from the other site. This would be a waste of MODX's talents, but it would work.

A minimal MODX template would look something like this:

<html>
<head>
    <title>[[*pagetitle]]</title>
</head>
<body>

<h2>[[*longtitle]]</h2>

<div class="content_div">
    [[*content]]
</div>

</body>
</html>

The three tags above come from the fields of the resource being viewed. MODX will replace them with the results of the tags.

Here's a slightly more complicated version:

<html>
<head>
    <title>[[*pagetitle]]</title>
</head>
<body>
    <div class="header_div>
        [[$header]]
    </div>

    [[Wayfinder? &startId=`0`]]

    <h2>[[*longtitle]]</h2>

    <div class="content_div">
        [[*content]]
    </div>
    <div class="side_bar_div>
        [[$sidebar]]
    </div>

    <div class="footer_div">
        [[$footer]]
    </div>

</body>
</html>

The three extra $ tags are chunk tags, referring to chunks that would hold the HTML for the header, sidebar, and footer. The Wayfinder tag would produce the site's main menu.

There *are* some templates in the extras repo, though they're interspersed with the template-related utilities so you have page through the results to see them: https://modx.com/extras/browse/?search=template

Most (many?) of us roll our own templates because if we wanted a pre-existing template, we'd use WordPress and pick one of the zillions of WordPress templates out there. In addition, these days, much of what appears to be the template is really the CSS controlling how the page is rendered.

You probably know this, but for other newbies (I prefer to call them "experts in training" wink

) who happen by -- If you see a page on the web that you like, type Ctrl-u, or select "View Source" in your browser's menu. You will be looking at the raw HTML of the page, and with a little practice, you can learn to see how the author gets the page to look like it does. In a good browser, you can also click on the links to CSS and JS files and see their content displayed in your browser too.

If there are things on the screen that don't show up in the source, it usually means that they are placed there with JavaScript.

Welcome to MODX

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

26 Posts

Erica Reply #5, 6 years, 5 months ago

Thank you for the answers.
How do you guys work with templates - do you build and edit them in the manager or elsewhere? I'm used to using VS Code (and then auto-uploading the changed file to the server via ftp), so I'm feeling a little lost. I guess I'm asking how your workflow is?

932 Posts

LK Reply #6, 6 years, 5 months ago

I think it's a personal preference thing on how you want to tackle it but if its a small project then I would edit in the manager if its a larger project with multiple devs then I would consider putting the files as static files and hooking it up with github. I have a coupel of basic modx youtube videos you may want to check out though to get started.

https://www.youtube.com/watch?v=bNjKFs3XoFw

■ email: [email protected] | ■ website: https://alienbuild.uk

The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.

1,154 Posts

nuan88 Reply #7, 6 years, 5 months ago

I think its important to explain that templates in Modx are html, css, and then whatever specific uses of js or php or other technologies you want to deploy. The base is html/css with of course some js support usually, and as I remember we need a bit of ajax for our login/register functionality. That's it

You can make your grid using bootstrap, LK is absolutely an expert in this area. But fundamentally at the end of the day its html and css.

I don't know the specific one but I assume the tool you've used before is basically hiding the code from you, and that means I dunno a lot of js and other technologies, those can work...but they would have to fit into an html framework. Shading and so on, visual effects, are done in css mostly now, but js can be used in certain spots easily.

You can use SASS and other methods for development as well, but the output is basically the same.

We can fit literally anything to our layout, anything at all. Any technology or effect or functionality can be positioned where we want it to be.

One time Susan said "You can't do that", and we still found a solution. I was in on that one! laugh

24,544 Posts

BobRay Reply #8, 6 years, 5 months ago

As LK says, it's a matter of personal preference with a number of different solutions.

I'm in a similar situation, I use PhpStorm for just about everything and tend to lay out local a project with more-or-less the same structure as the site structure in the MODX Manager. Then I actually cut-and-paste from PhpStorm to the Manager.

I could use static files on the live site and PhpStorm's deployment system to push them to the live site, but after losing work several times with that method, I abandoned it for cut-and-paste, and managing the files locally with Git and some file watchers (e.g. for SCSS, and for JS minification).

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

932 Posts

LK Reply #9, 6 years, 5 months ago

Quote from: nuan88 at Jul 06, 2018, 09:48 PM

You can make your grid using bootstrap, LK is absolutely an expert in this area.

I prefer semantic gs less/sass mixin or css grid wink

..but as a white label agency we work with whatever grid system our clients prefer. Most commonly that is bootstrap or foundation though.

■ email: [email protected] | ■ website: https://alienbuild.uk

The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.

Answered Newbie question: where do you find templates???