Contao 4.x Website Development

Printable View

02/22/2019, 15:51
alahiri

Contao 4.x Website Development

Hello.

I am very new in Contao and starting with Contao 4.7.

Please let me know how the Contao 4.x layout structure works.
How step by step this layout structure design on top of each other?
How to start the development process?

I feel System, Layout, Content are three different sections we need to work with. If I wish to create a simple website with Header, Menu, Body, Sidebar, Footer. How do I start with different sections and layout structures? I mean where do I create the structure, template, page layout, menu, content and other things.

Please guide. Any kind of help and guidelines will be appreciated.

Thanks.
02/22/2019, 17:05
xchs

I would strongly suggest to learn the basic concepts by inspecting the Contao online demo. Everything you need to know, you'll find there.

In the online demo, you can try things out, deactivate things, etc. as you like, without having to worry about breaking something. The demo installation is automatically reset every hour.

https://www.youtube.com/watch?v=csHHpVuqwlo
02/25/2019, 18:54
alahiri

Thanks for sharing the details. I already cover the details and able to create the pages and link them.

Please refer URL https://demo.contao.org and help me to find the below issues.
1. How to achieve the top menu consists with Sitemap, Login, Search and RSS?
2. How to create a Header menu and style it properly?
02/25/2019, 19:26
xchs
Quote:

Originally Posted by alahiri

1. How to achieve the top menu consists with Sitemap, Login, Search and RSS?
- Layout > Themes > Edit the page layouts of theme ID 1 > Edit the page layout "2 columns - [ default ]" > Front end modules / Included modules > "Header - Included Top Bar"
- Layout > Themes > Edit the front end modules of theme ID 1 > Edit the front end module "Header - Included Top Bar"
- You can see there that the article with the ID 30 is included via insert tag
- Content > Articles > Edit the article ID 30 (Misc > "Header Top")
- There you can edit the included content elements.
Quote:

Originally Posted by alahiri

2. How to create a Header menu and style it properly?
- Layout > Themes > Edit the page layouts of theme ID 1 > Edit the page layout "2 columns - [ default ]" > Front end modules / Included modules > "Navigation - Main navigation"
- Layout > Themes > Edit the front end modules of theme ID 1 > Edit the front end module "Navigation - Main navigation"
- Layout > Themes > Edit the page layouts of theme ID 1 > Add an external style sheet
02/26/2019, 20:11
alahiri
After went through the reply and the documents I have an understanding of how the Contao CMS development should work. Still I have the below points to clarify and know. Please red and help me to find the answers.

1. This developer could start in below steps.
- Article
- Modules
- Layout
Any informarion and form and other staffs can be saved in Article first of all.
Then modules can be designed.
Then Page Layouts will be designed.

2. In this demo site why the Artcles of Header Top is called 'Misc'? Could it be called by any other name of developer choice?

3. Layout - Module - Header - Included Top Bar - HTML code
How do you get the HTML code including the CSS classes used in the <div> tags?
Is not it possible to use Article section for this?

4. How page structure find significant in this case? There is an option called 'Top Menu Header' here.

5. How Contao knows which one is the home page? Is this page structure tells this?

6. What are the differences of Articles and News / Events / FAQ / Newsletter / Comments? Can't we use Articles for all these sections?

7. Home - Layout - 1 column
Articles - Slider, Home, Home Right
How is it possible?

8. Theme - No Stylesheet is found. How the styles and images are coming?
02/26/2019, 23:35
xchs

Quote:

Originally Posted by alahiri

Any informarion and form and other staffs can be saved in Article first of all.
Then modules can be designed.
Then Page Layouts will be designed.

Not necessarily in this order, but basically yes.

Quote:

Originally Posted by alahiri

2. In this demo site why the Artcles of Header Top is called 'Misc'? Could it be called by any other name of developer choice?

Yes. This is only a helper page. You can name it like you want (e.g. "Includes"). The page "Misc" is hidden from the menu.

Quote:

Originally Posted by alahiri

3. Layout - Module - Header - Included Top Bar - HTML code
How do you get the HTML code including the CSS classes used in the <div> tags?
Is not it possible to use Article section for this?

You mean this code?

HTML Code:

<div class="header-top-bar"><div class="inner">{{insert_article::30}}</div></div>

It's up to you to write the HTML markup and the CSS classes that you need to style it properly.

You don't have to do it that way either. For example, you could also change the page template and insert your preferred layout section there.

Quote:

Originally Posted by alahiri

4. How page structure find significant in this case? There is an option called 'Top Menu Header' here.

I did not get what you mean. Where is the option 'Top Menu Header'?

Quote:

Originally Posted by alahiri

5. How Contao knows which one is the home page? Is this page structure tells this?

Yes, exactly. The "home page" is the first "regular page" in your site structure and it preferably has the page alias "index" (that's why it is also called the index page).

Quote:

Originally Posted by alahiri

6. What are the differences of Articles and News / Events / FAQ / Newsletter / Comments? Can't we use Articles for all these sections?

Yes, in principle you can of course do everything with articles. But what's the point? That would be extremely awkward. If you want to publish news, why not use the back end module provided for this purpose. Same for events etc.

https://docs.contao.org/books/manual...aging-content/

Quote:

Originally Posted by alahiri

7. Home - Layout - 1 column
Articles - Slider, Home, Home Right
How is it possible?

Use the browser's dev tools to inspect the code. There you'll see that it was done with a 12-column CSS grid layout. The article "Home" in the left column has the CSS class "grid6" (check the article settings), the article "Home Right" also has the CSS class "grid6". So both columns have the same width.

Quote:

Originally Posted by alahiri

8. Theme - No Stylesheet is found. How the styles and images are coming?

I would suggest not to use the internal style sheets module, but to integrate external style sheets via the page layout. As you can see in the page layouts the style sheets are added from the file system (e.g. files/contaodemo/theme/scss/theme-styles.min.scss). So just check "System" > "File manager" and you'll find the style sheets in the folder "contaodemo/theme/scss".

The images are also managed in the file manager. Just check "System" > "File manager" and open the folder "contaodemo/media/content-images" and you'll find all the content images used in the demo.
02/27/2019, 14:31
alahiri
Thank you for reply. After reviewing the same I have the below concerns

1. Repeat point - 4. How page structure find significant in this case? There is an option called 'Top Menu Header' here.
Sorry it is 'Top Menu Folder' and its available in Page structure. My question is, how this option can relate to the theme layout.

How Contao knows this is the top menu of the theme?
Is it possible to divide all the options under Top Menu Folder into different modules and clubbed these somehow and use it as

single item, then place it at the very top of the header?

2. Layout - 1 column - 12 grid system.
This is the grid system of Bootstrap.
I select this option from Theme Layout configuration.
If I deselect the option then all the items of homepage will come into 1 column.
Does it mean that I need to create a CSS file with 12 grid system and need to use the same?
Currently I am not using any CSS and images, hence I am getting all in 1 column. If I use the Bootstrap CSS and JS files then I will get the option (do not tried yet). Is this right? How Contao read the system from CSS and implement itself?

****************
- I wish to add a Logo in the left side and wish to move the menu to the right side.
- Here in Themes > Modules I find the option Header - Logo section.
- Where is the Menu (Home, Content Elements, Modules, About Contao)?
- How do I create exactly the same using Modules / Page structure / Articles?
****************

3. When I am going to develop my website in Contao 4, can I follow the below mindset?
- Themes - prepare the website layouts, on the basis of first look and requirements and create 1/2 layouts as needed.
- Modules - find the available modules that fulfill the ready-made requirements.
- Page structure - follow the Navigation and create pages.
- Articles - add content using content items.
02/27/2019, 17:16
xchs
Quote:

Originally Posted by alahiri

1. Repeat point - 4. How page structure find significant in this case? There is an option called 'Top Menu Header' here.
Sorry it is 'Top Menu Folder' and its available in Page structure. My question is, how this option can relate to the theme layout.

This is the top menu that is shown to logged-in members. Log-in (e.g. with the credentials of John Smith) in the front end and you will see these new menu items in the top header bar.

Quote:

Originally Posted by alahiri

How Contao knows this is the top menu of the theme?

I have already answered that (see above post #4).

The article with the ID 30 includes the top menu bar elements and among those also the navigation front end module "Navigation - Top Menu". So just check Layout > Themes > Edit the front end modules of theme ID 1 > Edit the front end module "Navigation - Top Menu" and you'll see that this navigation module has enabled a reference page which is set to the "Top menu folder" page. Therefore, all the subpages are shown by this navigation module when a front end user has logged in.

Quote:

Originally Posted by alahiri

Is it possible to divide all the options under Top Menu Folder into different modules and clubbed these somehow and use it as single item, then place it at the very top of the header?

Sure, almost anything is possible. But what's the point?

Quote:

Originally Posted by alahiri

2. Layout - 1 column - 12 grid system.
Does it mean that I need to create a CSS file with 12 grid system and need to use the same?

This is the Contao 12-column grid system. You don't have to create the CSS file yourself since it is already available (see assets/contao/css/grid.css). Just enable the option in your page layout and you're done. Furthermore, you only have to assign the gridxx classes to the corresponding elements.

Quote:

Originally Posted by alahiri

Currently I am not using any CSS and images, hence I am getting all in 1 column. If I use the Bootstrap CSS and JS files then I will get the option (do not tried yet). Is this right? How Contao read the system from CSS and implement itself?

If you want to use the Bootstrap framework (or any other CSS framework) you'd have to include the necessary resources yourself in the page layout.

Quote:

Originally Posted by alahiri

I wish to add a Logo in the left side and wish to move the menu to the right side.

So just like in the demo.

Quote:

Originally Posted by alahiri

Where is the Menu (Home, Content Elements, Modules, About Contao)?

I have already answered that (see above post #4). The main navigation is generated by the "Navigation - Main navigation" front end module.
Quote:
Originally Posted by alahiri

3. When I am going to develop my website in Contao 4, can I follow the below mindset?

Themes - prepare the website layouts, on the basis of first look and requirements and create 1/2 layouts as needed.
Modules - find the available modules that fulfill the ready-made requirements.
Page structure - follow the Navigation and create pages.
Articles - add content using content items.
Basically, yes.
02/28/2019, 11:11
alahiri

I am facing problem in styling the website.

1. CSS and image files.
I have create the below structure and upload files using File Management.
assets\css\style.css
assets\image\logo.png
assets\js\

I cannot get my css file in HTML source.
I cannot get website background color mentioned in style.css file.
Even I cannot edit my css file from Contao Admin panel.
How do I make Stylesheets work?
How do I get this Contao 4 demo theme and how can I install the same in local server?

2. Footer (Module ID 38), HTML code is written as,
<div id="footer-adress-block" class="grid4">{{insert_article::50}}</div>
Where is div id 'footer-adress-block' declared?

3. Repeat
I wrote - Is it possible to divide all the options under Top Menu Folder into different modules and clubbed these somehow and use

it as single item, then place it at the very top of the header?
You replied - Sure, almost anything is possible. But what's the point?
My point - I wish to see all my items under either Articles / Modules.

4. Theme > Layout > 1 column layout etc.
If I found 12 column grid system in 1 column layout, then what is the significance of 2 column layout?
02/28/2019, 12:33
Spooky

Quote:

Originally Posted by alahiri

I am facing problem in styling the website.

1. CSS and image files.
I have create the below structure and upload files using File Management.
assets\css\style.css
assets\image\logo.png
assets\js\

You must not put anything in the /assets folder. This is a system folder, containing automatically generated or installed assets.

Your own CSS, image and JavaScript files need to be put somewhere within the /files folder.
03/01/2019, 11:29
alahiri

1. Please let me know how to arrange the folders of css, js,, images and others. Can I put all these into any folder created by me?
2. How Contao 4 knows about it and implement it into the website?
3. Is there any feedback on other queries of myself?
03/05/2019, 10:36
alahiri

Content display if Admin logged in

Contao Version used 3.5.35

I am using both German and English version of pages.
I have created the Page structure and Articles and Event Teaser in both language versions.
When I logged in as Admin then only the Teaser and Content is showing perfectly. Once I logged out the Content is not showing perfectly and / or not at all showing.
Please help to find the solution.
03/06/2019, 10:51
xchs

Quote:

Originally Posted by alahiri

Please let me know how to arrange the folders of css, js,, images and others. Can I put all these into any folder created by me?

Yes, of course. Best somewhere inside the files directory.

Quote:

Originally Posted by alahiri

How Contao 4 knows about it and implement it into the website?

For example, by including them as external stylesheets in the page layout.
03/06/2019, 10:53
xchs

Quote:

Originally Posted by alahiri

When I logged in as Admin then only the Teaser and Content is showing perfectly. Once I logged out the Content is not showing perfectly and / or not at all showing.

Show some screenshots of your site structure and a link to the respective website.
03/06/2019, 12:34
alahiri

That problem is resolved.
Each moment when I have done some changes, I need to update System > System Maintenance.
Why I need to do this? Is there any idea how to make the updates reflected on browser immediately? Is there anything wrong in the setup?
Looking for suggestions and helps.
03/06/2019, 12:53
alahiri

Style the site

Let me know where do I need to put my images, css, js and other public files and how Contao 4 knows their existence.
Could you please refer a good book of Contao 4 in Englih?
03/06/2019, 16:13
xchs

Quote:

Originally Posted by alahiri

Let me know where do I need to put my images, css, js and other public files and how Contao 4 knows their existence.

As I said before, put these resources somewhere in your files directory, e.g.

Code:

files | layout | css js img

Quote:

Originally Posted by alahiri

Could you please refer a good book of Contao 4 in Englih?

There is none. At least I am not aware of any.
03/07/2019, 15:57
alahiri

Quote:

Originally Posted by xchs

As I said before, put these resources somewhere in your files directory, e.g.

Code:

files | layout | css js img

There is none. At least I am not aware of any.

Sorry. I was not known that style need to be added in the layout. Now its working. Thanks.
03/07/2019, 15:58
alahiri

demo.contao.org

How can I get this theme into my local installation?
03/07/2019, 17:44
xchs

Which Contao version do you use locally?
03/08/2019, 09:43
alahiri

Quote:

Originally Posted by xchs

Which Contao version do you use locally?

Contao 4.4.
03/08/2019, 10:45
xchs
You can install the Contao Official Demo (COD) either through
- the Contao Manager (search for "official-demo") or via
- command line interface (execute the command composer require contao/official-demo) or
- download the ZIP file form the repository and install it manually
03/10/2019, 02:06
alahiri
Quote:
Originally Posted by xchs

You can install the Contao Official Demo (COD) either through

the Contao Manager (search for "official-demo") or via
command line interface (execute the command composer require contao/official-demo) or
download the ZIP file form the repository and install it manually
HTML Code:

Trying to install using composer and receives the below error. composer require contao/official-demo Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to allocate 4096 bytes) in phar://C:/ProgramData/ComposerSetup/bin/composer.phar/src/Composer/DependencyResolver/Solver.php on line 220 Check https://getcomposer.org/doc/articles/troubleshooting.md#memory-limit-errors for more info on how to handle out of memory errors.

Code:

What is the importancy of SVG file in Contao4?
03/10/2019, 14:59
xchs

Did you try to increase the memory limit in your php.ini?

Code:

memory_limit=4G
03/10/2019, 15:35
xchs

Try this command:

Code:

composer require contao/official-demo:4.0.0
03/10/2019, 15:43
xchs

Please delete the folder contaodemo/ within your files/ directory and try again.
03/10/2019, 15:50
xchs

How did you install Contao 4.4? Via command line (composer create-project contao/managed-edition <target> '4.4.*') or via Contao Manager? Show me a screenshot of your web/ directory, i.e. E:/wamp64/www/tests/cms/contao4/web/
03/10/2019, 16:17
xchs
Sorry, I cannot see your screenshot. Can you upload it to e.g. http://www.directupload.net/ ?

I suspect that your installation also did not work correctly and that no symlinks were created. Do you have any symlinks within your web/ directory?

You may need to give your current Windows user the right to create symlinks.

I have written a tutorial on the German forum (in German of course, but you can translate it with an Online translation service). Please follow the steps below:

^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Das Sicherheitskonzept aktueller Contao-Versionen (konkret ab Contao 4.x) sieht vor, dass für den ordnungsgemäßen Betrieb der Webapplikation u. a. auch symbolische Links (sog. Symlinks) erstellt werden müssen. Allerdings sind für das Erstellen von Symlinks unter Windows normalerweise Administratorberechtigungen erforderlich. Es ist daher zweckmäßig, dem gewöhnlichen Windows-Benutzer ebenfalls das entsprechende Recht zum Erstellen von Symlinks zu erteilen. Am einfachsten geht das über das kostenlose Tool Polsedit. Das ZIP-Archiv enthält sowohl eine 32 Bit als auch eine 64 Bit Version von Polsedit und kann ohne Installation direkt ausgeführt werden.

ToDo: Berechtigung zum Erstellen symbolischer Links in den Gruppenrichtlinien konfigurieren
- Polsedit herunterladen: http://www.southsoftware.com/polsedit.zip
- ZIP-Archiv entpacken
- Für Windows 10 64 Bit: polseditx64.exe (64 Bit Version) ausführen
- Im rechten Fensterbereich nach der Richtlinie "Create symbolic links" (SE_CREATE_SYMBOLIC_LINK_NAME) suchen:
  
  https://s16.directupload.net/images/...p/amr9ocqc.png
- Per Doppelklick auf den entsprechenden Eintrag das Eigenschaftsfenster der Richtlinie öffnen:
  
  https://s15.directupload.net/images/...p/evpwt8br.png
- Über den Button "Add User or Group..." den eigenen (aktuellen) Windows-Benutzer in der Liste der Benutzerkonten auswählen und mittels "OK" die Auswahl bestätigen. Der Windows-Benutzer sollte nun in den Richtlinieneigenschaften ebenfalls gelistet sein (zusätzlich zu den bereits vorhandenen Benutzerkonten).
- Das Eigenschaftsfenster schließen und Polsedit beenden.
- Benutzer ab/-anmelden (bzw. das System neu starten), damit die Änderungen der Richtlinie wirksam werden.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
03/10/2019, 16:32
alahiri

Please find the screenshot here https://www.directupload.net/file/d/...mrxu5e_png.htm
03/10/2019, 16:42
xchs

Are you sure you have Contao 4.4 installed and not Contao 4.7? On your screenshot I see a robots.txt, which is not available in Contao 4.4 yet.
03/10/2019, 16:49
alahiri

Quote:

Originally Posted by xchs

Are you sure you have Contao 4.4 installed and not Contao 4.7? On your screenshot I see a robots.txt, which is not available in Contao 4.4 yet.

Yes. It is Contao 4.7.1.
I cannot install official demo.
03/10/2019, 16:50
xchs

Yeah, I thought so. :)

Sorry, but the Contao Official Demo is not yet available for Contao 4.7. You would have to install the demo manually.
03/10/2019, 16:53
alahiri

Quote:

Originally Posted by xchs

Yeah, I thought so. :)

Sorry, but the Contao Official Demo is not yet available for Contao 4.7. You would have to install the demo manually.

I cannot install manually too. What would be the procedure to install it manually?
03/10/2019, 17:08
xchs
Quote:

Originally Posted by alahiri

What would be the procedure to install it manually?
1. Download https://github.com/contao/official-d...hive/4.2.2.zip
2. Extract the ZIP file
3. Open the directory official-demo-4.2.2/src/files/
4. Move or copy the complete folder contaodemo into your files directory, i.e. E:/wamp64/www/tests/cms/contao4/files/
5. Open the directory official-demo-4.2.2/src/templates/
6. Move or copy the complete folder contaodemo into your templates directory, i.e. E:/wamp64/www/tests/cms/contao4/templates/
7. Download https://github.com/contao/official-d...v4.7.0.sql.zip
8. Extract the ZIP file
9. Move or copy the codv4.7.0.sql database dump into your templates directory, i.e. E:/wamp64/www/tests/cms/contao4/templates/
10. Open the Contao Installtool
11. Open the "Import a template" section
12. Select from the templates select field the database dump codv4.7.0.sql and import the dump into your database (Caution: all data will be deleted!)
13. Log into the Contao back end with the credentials of the COD (username: k.jones, password: kevinjones)
03/11/2019, 01:51
alahiri
Quote:
Originally Posted by xchs

Open the Contao Installtool
Open the "Import a template" section
Select from the templates select field the database dump codv4.7.0.sql and import the dump into your database (Caution: all data will be deleted!)
Log into the Contao back end with the credentials of the COD (username: k.jones, password: kevinjones)
I enter my Install tool Comtao Manager.
I find the below message.

This package will be installed with constraint 4.0.0 when you apply the changes.
contao/official-demo <manually added>
Remove button in red color adjacent to it.
No 'Import a template' option.
How do I import?
03/11/2019, 02:07
alahiri

Contao 4 demo Footer

1. How footer can take 3 columns? Where this structure is created?
2. How the footer get the black background?
3. If I hide a column then the 3rd section remain empty? How to make it auto filled by 2 columns only?
03/11/2019, 02:11
alahiri

Contao 4 User Registration and Login

How to proceed with the below requirements?
1. User Registration with custom form? Data must be stred in a table.
2. Double opt-in registration confirmation.
3. Login.
4. Upload images, files etc in his profile unlimited number of times. These all resources will be stored in database and files are saved in server physically. User can edit and delete these existing resources.
03/11/2019, 09:08
xchs

Quote:

Originally Posted by alahiri

Remove button in red color adjacent to it.

Press this button and remove the package.

Quote:

Originally Posted by alahiri

No 'Import a template' option.
How do I import?

Run the Contao install tool from the menu in the upper right.
03/11/2019, 16:21
xchs

Quote:

Originally Posted by alahiri

1. How footer can take 3 columns? Where this structure is created?

In the footer, three sections of equal size are created using the 12-column grid layout (3 x 4 columns).

Quote:

Originally Posted by alahiri

2. How the footer get the black background?

Become familiar with the browser's DevTools!

Code:

#footer .inside { ... background-color: #473f3a; ... }

Quote:

Originally Posted by alahiri

3. If I hide a column then the 3rd section remain empty? How to make it auto filled by 2 columns only?

Get familiar with the concept of grid layouts. The demo uses Contao's 12-column grid layout. Each section is 4 columns wide. If you deactivate one section, the other two will still remain with a total of 8 columns wide (2 x 4 columns).
03/12/2019, 01:24
alahiri

Quote:

Originally Posted by xchs

Press this button and remove the package.
Run the Contao install tool from the menu in the upper right.

I have followed the instructions. After submitting the new sql file, its find an error - make sure that template files are updated.
03/13/2019, 01:21
xchs

That may be. I didn't check it myself. The database dump was posted here: https://github.com/contao/official-demo/issues/91
03/13/2019, 18:56
alahiri

Please refer thread

Code:

Contao 4.x Website Development - Login form
03/13/2019, 19:33
xchs

Please stop creating the same thread over and over again in the wrong subforum. All of your threads are in this subforum: https://community.contao.org/en/foru...rotected-areas