Editing pages between the head and /head tags

Ok, parts of a webpage that goes between the head and /head tags is css styling (style type) and scripting (script type), css and script calls, metadata and keywords. Since this is per page different I can't put them on the page template. TinyMCE only lets me edit content that is outside the head and /head tags. So, how do I edit a page in modx between the head and /head tags ?
Greetings Brian. [ed. note: sitecms last edited this post 14 years, 2 months ago.]

Hi
Try to create a Template Variable (Input Type: Text) and assign it your template.
example.

You can make this a TextArea type TV, and use CodeMirror to improve the editing field.

If there are just a few that can be selected from, make it a select drop-down or a set of radio buttons or check boxes.

You could even use MIGx to make a multi-input TV for each page to cover all the directives in one TV.

You can also make a chunk or snippet and include your TVs in there. Then have the template call the chunk or snippet.

Hi,
Thanks for all your replies putting me in the right direction. Fuzzical Logic, if it's not too much asked could you show me a simple example of that ? Would TV's also work for a site with hundred pages ?
Greetings Brian.

As far as the number of pages, it will work. How easily it will be to use depends on how you are using your TVs.

For example, if you have sections to your site, and each section has its own header image, you can use an image type TV with the default value of @INHERIT, and no output formatting so it just outputs the raw image filename. Then edit the TV for each top-level parent resource to have the link to the image you want. Now all of the resources in that folder (under that branch of the tree) will inherit their parent's image.

In your template it would look like this:



Or, it might be easier to have separate .css files for each section, and use the TV to indicate which .css file to use:



In this case, I would be inclined to make it a radio button TV with a button for each .css file, that way the editor only has to click the one he wants. No need to remember what they're all called and type them in!

Ok, thanks everybody for your replies. And a special thanks to Susan Sottwell for posting this priceless article http://sottwell.com/how-template-variables-work.html that I found after digging the web. It explains exactly the case of what I needed to know for a newbie. Coming from a drag and drop wysiwyg scene I almost started to give up on modx. Now I start to understand that with modx you don't design a website but you actually program a website. Powerfull indeed. Thanks again everybody.

I'm glad everyone was able to help you! As a newbie to ModX, it might be helpful to know a few quick things. With ModX (and several CMSes), you can absolutely program a website. But ModX is particularly useful when you understand that you really only need to program parts of the website. ModX will fill in the blanks.

Let me give you an example:

A resource is a bit of web content. Sometimes a page, sometimes just some data accessed by a URL, sometimes even a link to another site.

Every resource has a template that you choose. Templates are used so that you can group similar resources and share code between them.

Resources or Templates can use Chunks or Snippets. A Chunk is just HTML that can be used by anything else in ModX (including another Chunk). A sample chunk would be the Footer of every page on your website. A Snippet is ultimately dynamic content that may be called by anything (including another Snippet). Snippets are written in PHP rather than HTML.

Templates are largely static by nature unless they use Snippets. To make them more dynamic or personal to the page, we use Template Variables. When you make a Template Variable, every Resource of that Template automatically gets a copy of that Variable so it can set its own personal value. That variable is then registered as a field, so that it may be placed in any Resource, Template, Chunk or Snippet that wants to use it.

Hope this outlines it for you!

Usually I start out with a full HTML page that I like (there are tons of free HTML template sites; I'm no designer), pasting it directly into my template. These days I'm investigating various free templates and grid frameworks for responsive design to deal with pads and phones in a simple, clean manner.

Once I make sure all the paths and URLs for stylesheets, images, etc have been edited so that the page preview looks exactly like the page I downloaded, I start replacing stuff with MODx tags, checking as I go to make sure nothing breaks. I do a lot of checking in the browser source view, and running it through the W3C validator.

Then I get fancy with complicated TVs and snippets to automate and simplify the site maintenance, and add JQuery effects and all the rest.

In contrast, I build all of my parts individually and check them all individually. I keep another browser open with the part viewing, so I can refresh to get it right. If the part renders correctly or validates by itself, I have a CSS framework that makes sure that it validates and renders correctly with other parts.

Susan's approach is called a top-down approach (big to small). And mine is a bottom-up (small to big). Both are equally valid, but cater to different goals.