Template with TYPO3 v10 - templates

I would like to do a project with TYPO3 v10 I'm new with this CMS and I need to create different templates for different pages but I don't understand which code I need to change.
I already install a sitepackage from this site https://www.sitepackagebuilder.com/
It work well but I need to create my own templates and I want to edit the content of my templates in the back end administration like in the picture.
I hope I'm clear
thanks for help :)

I am not sure if there is a misconception in the question or if I have interpreted incorrectly. In any case, I hope this helps:
It is important to differentiate between content + template in TYPO3:
content
In the screenshot posted in the question, you see the TYPO3 backend, which is a view for editing content, administration etc. There you see the page module is opened in the left column (1), you see the page tree in the middle column (2) and the page layout for editing content on the selected page in the right column (3). Here, you can insert and edit the content, that will be displayed on a page.
Template
In TYPO3, the template is what makes up the automatically generated parts of the page such as header, footer, menu, breadcrumb etc.
It work well but I need to create my own templates and I want to edit the content of my templates in the back end administration like in the picture.
Editing the template in the backend with a Wysiwyg ("what you see is what you get") editor, similarly to editing the content is not really possible in TYPO3 AFAIK - at least not out of the box. For this, you would need a template builder. The only thing I have seen so far that comes close to this is toujou (I am not affiliated with them, just wanted to mention it). They have something which you could call a website builder. But AFAIK, you can't download it, they provide this as a service.
The sitepackage builder - as far as I know - pretty much just creates a sitepackage based on the bootstrap package extension which you would have to further modify by editing the files.
What you can also do is edit the TypoScript in the backend. Just go to the "Template" module in the left column. But, this made more sense in the past, because a lot more was done with TypoScript. Nowadays, you usually use a combination of Fluid and TypoScript and you can't edit the Fluid files in the backend.
While in the past, a lot more was done in the backend or could be done in the backend, everything is moving towards maintaining changes in files and extensions, where the template is maintained in a sitepackage. For some things both is still possible (backend and extension), e.g. backend layouts, TypoScript etc.
Moving the configuration + templates from the backend (and storing them in the database or as files) to a dedicated extension has several advantages:
Every configuration etc. is bundled into one extension, this makes it easier to install in another site, on a testsystem, exchange it etc.
the sitepackage can be put in a version control system (e.g. git) which has a bunch of other advantages such as easy rollback to a previous version, referencing issues etc.
The downside is that you need more technical expertise and there is a learning curve.
see also:
The Anatomy of Sitepackages
Sitepackage Tutorial
I understand that it might be pretty cool to assemble a template in the backend - just like you can do with the content. Maybe someone else knows how to do that with TYPO3.
You can also check out these resources which seem to go in the direction of what you are looking for:
TYPO3 extension mask (documentation)
T3terminal

in the official documentation you can find the structure of folders where the files for your layout are stored.
More details on fluid templating in this document
Now you want a possibility for editors to select between different page layouts. An often used way is to use the possibility to select different backend layouts and select a frontend layout accordingly.
This is shown in the video on this page or in the documents you can find if you uses the searches on that page.

Related

Are you able to get hints from what template a message is coming from with dev tools?

I have this website that I'm editing for a friend and they want to get rid of this message at the checkout screen but their boss doesnt know who implemented it. Its an error message at the top in read that says "If you are having trouble checking out, please contact us at sales#cbobaby.com" and is in the check out page. This is an open cart website and I only work with wordpress sites so I'm having trouble figuring out where the source of the message is coming from. I've dug through some of the template files in the theme and I can't seem to find or delete anything that gets rid of it. My question is if there is anything in Chrome dev tools that would help me identify the source or template it lives in? I only use dev tools for adjusting css but I know there's so much more you can do it with. Thanks.
No, DevTools can't relate your front-end code to what generates it for the DOM. For the exact same reason we are unable to persist edits in the DOM to your source.
You need to use grep, or some code editor with "find all" functionality and look for some part of the string. If that fails, search your database and see if it is coming out of there. You can then either edit the database and hope nothing breaks, or try to back-track through the application logic to find where is calling that part of the DB. It should give you some ground as to where to look.
In the Sources tab, you can see the resources, that are loaded when you are on a particular page. You can also use the Inspect tool in the Elements tab to find the element that hosts that bit of text to narrow things down in your search.
To add to this, if content is generated on the server side, the resources you see will likely be a merge from multiple generated sources, e.g. with templates in your case. You can search your solution for aspects of the DOM elements you see in Chrome Developer Tools, but look for the static parts instead of the dynamic parts. For example, the text itself won't be part of the template file, a placeholder will exist - a CSS class could be useful.

Web Design - Templates vs Include

I am currently developing a website. I would like to separate content and presentation. I am currently using a Dreamweaver Template to achieve this. However, I find that Dreamweaver's edit regions are very limiting in the design view. I have found that the same goal can be achieved by including the header and footer of my website.
What are the pros and cons of using includes rather than using templates?
First, if I were to rephrase your question, it's more like asking "Should I by a wire frame of a kite or by the glue to stick together what I'm making?" And then, you ask about the pros and cons of buying the wireframe against buying the glue. There are far too many variables as you can see...
And back on your your question... At some point your template will use include files. And for a start, it's worth knowing what you're thinking... Let's look at some basics.
Web design - usually refers to making websites that aren't really interactive. They don't have server-side elements. So most of the site has 'static' contents. If this were the case, you're better off with DreamWeaver, particularly if you're not into html/css editing.
Web development/programming - starts off with something as elementary as mailing a form, to highly interactive sites like FaceBook. Here you'll need to use some server-side language, usually like PHP, ASP or JSP. The choices are many but you've got to choose your own platform or combination of them.
Now to the second option (above). If for example, you were building a site using PHP, one of the nice things you'll do is to include your header, footer and side panels that need to be repeated across all pages. This way, you'll eliminate the need to re-write those sections. But if you were using a program like DreamWeaver, it does this duplication for you. Yes, it physically copy-pastes those sections into every file that needs it. Of course the end result may not be any different. But as a developer, you will be tied down to the DreamWeaver platform or for that matter, any other specific platform.
On the other hand, if you get used to working with an editor like NotePad++ or GEdit, you may switch between editors at any time. But you have the task of hand-coding everything from scratch. But then again, since you would use include files to bring in your headers and stuff, you save development time as well.
I don't know how much of html/css or php you know, but here's one of my demos to show you how to hand-code a site. This ain't complete but you should get an idea.
Link to the video introduction
Link to the video on youtube

Beginning Joomla Development - Templates and Modules?

I am planning to begin my Joomla development adventures, so I have been digging up some resources on Joomla beginner such as:
Joomla 2.5 Beginner Guide
I think I have grasped the fundamental concept, though I have a doubt that if anyone doesn't mind clearing up for me.
If I have my own template ( I am planning to use my own Twitter Bootstrap template ), and I am planning to convert it to Joomla, and inside that template there are already samples for some modules such as front page slider, testimonials, partner links, etc, from what I understood these have to go as modules, since Joomla allows one component, and many modules in a page (hence a index page might have Welcome message as component, and sliding banner, testimonials as modules).
So my question is do I have to write these testimonials, page slider modules on my own? Since I already have the samples (css and html) and I know how they will be positioned. Wouldn't it be a bit of overkill to write modules for each? What if at later stage I am making another website, and I have another template?
Also, from examples I have seen, Joomla template have only one html template (index.php) which defines all the positions. If I want to define two possible layout for one template, is that possible? Or it has to go in different templates, and I assign them separately in my Template Manager.
Ok firstly, as for the Joomla version, you have 2 choices.
Joomla 2.5 as it's the recommended long term version.
Joomla 3.0, the new short term release which is completely based on Bootstrap, therefore it might be easier to adapt it to make it look like your template.
usually I would recommend Joomla 2.5 but in your case I think Joomla 3.0 might be the best way to go.
As for the modules, you don't necessarily have to write them yourself. You can download all these sort of things from the Joomla Extensions Directory. If you are worried about positioning of modules, then simply ensure that the template has the module positions in the correct place. Using the Joomla 3.0 template and adapting it to look like your template will be much easier when it comes to modules, as it already has a lot or pre-defined positions. If you feel the need to add more, you can do so. See links below:
Adding you own module positions in Joomla 1.5/2.5
Adding you own module positions in Joomla 3.0
I hope this helps you a little bit on your Joomla adventure and good luck.
Almost forgot, please also make sure you keep your Joomla version up to date unlike a lot of the people that post questions on here :) I posted an answer as to why it's important here
You absolutely right about Joomla allowing 1 component and many modules! Your also fine to convert your template into a Joomla template. Although note as Joomla 3.0 uses bootstrap (but is still very new and having many new features added to it - even though its technically stable) and thus it might be easier for you to use that. You can easily include bootstrap etc through that framework as well. Link here for how to do that
See the link here about module and module positions in templates. Whilst the numbers at the top say this is for 1.0,1.5 and 2.5. The bit under the 2.5 header also applies to Joomla 3.0!
In terms of different layouts for the template generally its good practice to have two separate templates if the layout changes are significant. However if the layouts differences are small, there is nothing wrong with adding in a Form Field and creating two template styles in the backend and just choosing the layout with a form field for each style!
If you want to use your customized modules I'm afraid yes you do have to do this. However there are module and component writers out there which can make the basics up for you so you can almost copy and paste your code straight into one file (with a few changes here and there). You can also use the Joomla Extension directory though - you may even find something you like more!
In terms of using the modules/components on another site this is actually much easier. Once created you can just go into the Joomla backend and install your extension again and tweak it how you want after that with either FormFields or in template overrides!
Any more questions feel free to ask!

TYPO3 template library

I'm looking for TYPO3 template libraries. They don't need to be free. I'm looking for real Typo3 templates, ready to import into a vanilla Typo3 installation, not just HTML or even PSD templates.
The reason I'm asking is that we have a number of customers with very tight budget. We'd like to give them a number of templates to choose from.
There were such projects, but I assume that most of them are just finished now. TYPO3 has no default data/content structure and therefore it's hard to build useful sets as every implementation can be very individual.
For your own low-budget production I'd suggest to create some very typical raw implementations with sample data and some kind of preconfigured extensions ie.
CMS+ News + contact form + gallery,
CMS + News + FAQ...
etc...
Then you can also prepare common TypoScript element for each scenario and finally just use any HTML template and map your prepared TS with minimal modifications.
Using TemplaVoila you don't need to change any single char in the HTML templates and it takes no more than 2 morning coffees (when mapping a simple template).
A simple Typo3 template isn't really difficult to make but I think you mean a better browser compatibility support. Personally I've good experience with YAML.
I'm not aware of anything like that out there, but is it just for content sites, or are you looking for sites with more functionality?
Any template can be adapted to TYPO3, you can see here http://webdevelopers.thedemo.ca/ where in the space of about an hour we grabbed a template from http://www.oswd.org/ and turned it into a TYPO3 site. It's rough and messy, but shows the idea.

Beginner: Do I have to use templates when implementing my own designs using CMS such as Joomla?

Brand new to CMS:
With Joomla or other CMS, If I want to use my own design, do I have to make it a template first using proprietary code of some sort = ie using some Joomla templating language - or is using my own design with Joomla simple and independent?
I am not sure the role "templates" play with Joomla and other CMS. I gather they can be used as a complete "pre-made" design where you just tweak it, but are they necessary as a base of some sort to using my own designs? I am proficient with HTML and CSS. I also have been playing around with various Jquery Plugin's for my UI.
Ideally I would like to create any design I can think of with any layout I create and use CMS simply for its database and plugins etc such as a blog or calender back end. I might use it for more features as I learn about them. Do I need to use a "template" or create a "template" to do this?
Thanks!
{edit}
You have to create a template (or change an existing one), how else will the CMS know where to add the information into as the template is a HTML, CSS and Javascript Page group devoid of information and some HTML Tags replaced with CMS Specific tags, which tells the CMS where to add the information. It also include certain files telling the CMS the Name, and othe information of the template.
The First step in creating a template is to have a design.
Do your design in HTML and CSS. (Preferably using the CMS Template folder/directory structure.)
For Joomla use the information in this post: How should I go about writing a Joomla! template?
In Joomla jQuery have to be used in compatibility mode.
The CMS will supply the information, you supply the design and tell the CMS
{/edit}
The Template is the design container, whether you create one from scratch or reuse a current template. I initially used one of the pre-installed templates (together with the documentation) to learn some of the complexities of designing the template. (ex. structure, and what is possible.)
Please also look at my answer to this question How should I go about writing a Joomla! template? as it is a pretty good beginners guideline for template designers in Joomla (Even if I have to say it myself) with a couple of other resources linked in as well.
A Joomla template is nothing but HTML layout stylised using CSS. So to create your own templates you need a good grasp on HTML and CSS.
Joomla, by default provides a couple of templates to start with.
If you are just beginning, creating your own template is not where you want to start...learn more about setting up Joomla. You have enough problems there :)
Joomla! 1.5: A User's Guide is a great beginner book. It takes you through learning Joomla, what templates are, how to make them, and even walks you through setting up WAMP so you can experiment on your local machine.
The templates only affect the styling of your site. If you are starting out, I would work on getting your content in place first and wait on templates until later on.
My experience has been revamping my two websites to use WordPress, then moving to ModX, then moving back to HTML. I believe that you don't need a template but it will make some things easier as it bundles a lot of stuff you'd otherwise have to do manually. --At least for WordPress. I'm not even sure we found a good ModX template but adapted [poorly] a WordPress one. ModX is a good but little known CMS.
With one of my sites I found that it was impossible for WordPress to handle the images, thus I began working with a plug-in developer to create a custom plug-in. He took about a year and it still wasn't useable. Also I hired some consultants along the way. Their biggest contribution was "to complexify things" so I couldn't make any changes myself without going back to them & paying hundreds of $ to change a phone # for example.
I chucked all that and redid everything in HTML5 with Javascript, css and a little php. People here on S.Overflow actually helped me with the coding. I have a 3rd simple site that I may go back to WordPress for but only to use some particular functions which might be a pain to program otherwise.
Here is one of my 2 HTML sites:
coinsandhistory.com