Skip to content

Commit c7e3ac3

Browse files
DragosTARXDragosTARX
authored
[FEATURE] Adding JS and CSS (#27)
1 parent 92b56e1 commit c7e3ac3

File tree

5 files changed

+259
-0
lines changed

5 files changed

+259
-0
lines changed

‎Documentation/10GettingStarted/20BasicConfiguration/30SetUpASiteConfiguration/SetUpASiteConfiguration.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Set Up a Site Configuration
2+
3+
<!-- #TYPO3v13 #Beginner #Backend #Configuration @dragos_tuluc -->
4+
5+
In TYPO3, a site configuration is essential for defining the domain, root page, and languages for a website.
6+
7+
## Learning objective
8+
9+
This guide explains how to create and configure a new site in a TYPO3 installation.
10+
11+
## Prerequisites
12+
13+
* A running TYPO3 instance.
14+
* A "root page" created in the page tree to serve as the starting point of the new website.
15+
16+
## Navigate to the Sites Module
17+
18+
1. Log in to your TYPO3 backend.
19+
2. In the main menu, go to **SITE MANAGEMENT > Sites**.
20+
21+
## Create a New Site Configuration
22+
23+
1. Click the **"Add new site configuration"** button or the `+` icon if you already have other sites.
24+
2. TYPO3 will often suggest creating a site based on an existing root page that is not yet configured.
25+
3. In the *General* tab, add your information to the following fields:
26+
* **Site Identifier:** A unique, lowercase name for the site (e.g., `my_website`). This is used internally by TYPO3.
27+
* **Root Page ID:** This is the most important setting. Select the page from your page tree that will be the root of your website (e.g., your "Home" page).
28+
* **Base URL:** The primary domain for the site, including the protocol (e.g., `https://www.example.com/`).
29+
4. In the Languages tab, click *Create new Language*. A new language form will appear.
30+
5. Fill in the following fields with your information:
31+
* **Title:** The human-readable name of the language (e.g., "English").
32+
* **Entry Point:** The URL segment for this language. The default language should use `/`. Additional languages might use a prefix (e.g., `/de/`).
33+
* **Locale:** The locale for the language, which is important for date formatting and other localizations (e.g., `en_US.UTF-8`).
34+
6. In the **Error Handling** tab, fill in the following fields with your information:
35+
* Switch to the **Error Handling** tab.
36+
* Define how TYPO3 should handle HTTP error status codes, such as `404 Not Found`.
37+
* You can set a specific page to display, redirect to another URL, or use a custom Fluid template for each error code.
38+
7. Click the **Save** button to store your new site configuration.
39+
40+
## Summary
41+
42+
You have successfully created a site configuration. Your website is now accessible through the configured domain, and TYPO3 knows which page tree belongs to it.
43+
44+
## Next Steps
45+
46+
* **Add More Languages:** If your site is multilingual, you can add more languages in the *Languages* tab by repeating steps 4–5 above.
47+
* **Domain Variants:** Create variants for different domains or subdomains that point to the same site but might have slightly different settings.
48+
* **Static Routes:** For advanced URL routing, you can explore the *Static Routes* tab.

‎Documentation/20BuildingWebsites/40FrontendDevelopment/40AddCustomJavaScriptAndCSSUsingFluid/AddCSSAndJavaScriptToAFluidTemplate.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
# Add CSS and JavaScript to a Fluid Template
2+
<!-- #TYPO3v13 #Beginner #Templating #Frontend -->
3+
4+
Adding assets like CSS and JavaScript directly into your Fluid templates is a straightforward way to style and add interactivity to specific parts of your website. This method is ideal when your styles or scripts are tightly coupled with a particular page layout or template.
5+
6+
This guide will teach you how to link custom CSS and JavaScript files to your site package using Fluid's built-in Asset ViewHelpers.
7+
8+
## Learning objective
9+
10+
In this step-by-step guide, you will learn how to create custom CSS and JavaScript files and include them in your site's Fluid templates using the `f:asset.css` and `f:asset.js` ViewHelpers.
11+
12+
## Prerequisites
13+
14+
### Tools and technology
15+
16+
* A local TYPO3 installation (v11 or newer).
17+
* A site package extension created for your theme.
18+
* Access to the file system of your TYPO3 installation.
19+
* A code editor.
20+
21+
### Knowledge and skills
22+
23+
* Basic understanding of the TYPO3 backend.
24+
* Familiarity with the structure of a site package.
25+
* Basic knowledge of CSS, JavaScript, and HTML.
26+
27+
## Create Your Asset Files
28+
29+
First, you need to create the CSS and JavaScript files within your site package's directory structure.
30+
31+
1. Navigate to your site package's `Resources/Public/` directory.
32+
2. Create two new sub-directories: `Css` and `JavaScript`.
33+
3. Inside the `Css` directory, create a new file named `custom-styles.css`. Add a simple CSS rule for testing:
34+
35+
```css
36+
body {
37+
background-color: #f0f0f0;
38+
border: 5px solid #ff8700;
39+
}
40+
```
41+
4. Inside the `JavaScript` directory, create a new file named `custom-scripts.js`. Add a simple JavaScript alert for testing:
42+
```javascript
43+
alert('Hello from custom-scripts.js!');
44+
```
45+
46+
Your file structure should now look like this:
47+
48+
```text
49+
└── your_sitepackage/
50+
└── Resources/
51+
└── Public/
52+
├── Css/
53+
│ └── custom-styles.css
54+
├── JavaScript/
55+
│ └── custom-scripts.js
56+
└── ...
57+
```
58+
59+
## Include Assets in Your Fluid Template
60+
61+
Now, you will link these new files in the main Fluid layout file of your site package.
62+
63+
1. Open the main HTML template file for your site's layout. This is commonly located at `your_sitepackage/Resources/Private/Layouts/Page/Default.html`.
64+
2. Add the `<f:asset.css>` and `<f:asset.js>` ViewHelpers inside the `<head>` section of the file. These ViewHelpers tell TYPO3 to add the respective files to the page.
65+
66+
Update the code to include the new assets as shown below. The `identifier` is a unique name, and `href` points to the file location using the `EXT:` syntax.
67+
68+
```html
69+
<head>
70+
...
71+
<f:asset.css identifier="my-custom-styles" href="EXT:your_sitepackage/Resources/Public/Css/custom-styles.css" />
72+
<f:asset.js identifier="my-custom-scripts" href="EXT:your_sitepackage/Resources/Public/JavaScript/custom-scripts.js" />
73+
...
74+
</head>
75+
```
76+
Make sure to replace `your_sitepackage` with the actual key of your site package extension.
77+
78+
## Clear the Cache and Verify
79+
80+
Finally, clear the TYPO3 caches to ensure your changes are loaded, and then check the frontend of your website.
81+
82+
1. Log in to the TYPO3 backend.
83+
2. Click the "Clear all caches" lightning bolt icon in the top toolbar.
84+
3. Open your website in a new browser tab.
85+
* You should see the styles from `custom-styles.css` applied to the page (a light gray background and an orange border).
86+
* You should see a JavaScript alert box appear with the message "Hello from custom-scripts.js!".
87+
88+
## Summary
89+
90+
Congratulations! You have successfully added custom CSS and JavaScript files to your TYPO3 site using Fluid Asset ViewHelpers. You can now easily manage assets that are specific to your templates.
91+
92+
## Next steps
93+
94+
Now that you know how to include assets in Fluid, you might like to:
95+
96+
* [Add Global CSS and JavaScript with TypoScript](AddGlobalCssAndJavaScriptWithTypoScript.md)
97+
* Explore using other ViewHelpers in your templates.
98+
99+
## Resources
100+
101+
* [f:asset.css ViewHelper Reference](https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-asset-css)
102+
* [f:asset.js ViewHelper Reference](https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-asset-script)

Documentation/20BuildingWebsites/40FrontendDevelopment/40AddCustomJavaScriptAndCSS/Index.md renamed to Documentation/20BuildingWebsites/40FrontendDevelopment/40AddCustomJavaScriptAndCSSUsingFluid/Index.md

File renamed without changes.

‎Documentation/20BuildingWebsites/40FrontendDevelopment/50AddCustomJavaScriptAndCSSFromPageTemplate/AddGlobalCssAndJavaScriptWithTypoScript.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# Add Global CSS and JavaScript with TypoScript
2+
<!-- #TYPO3v13 #Beginner #Templating #Configuration -->
3+
4+
Managing your website's core CSS and JavaScript files globally is an efficient way to ensure a consistent look and feel across all pages. TYPO3's TypoScript provides a powerful, centralized method for including these assets sitewide.
5+
6+
This guide will teach you how to link custom CSS and JavaScript files to your site package using TypoScript page configuration.
7+
8+
## Learning objective
9+
10+
In this step-by-step guide, you will learn how to create custom CSS and JavaScript files and include them globally on your site using the `page.includeCSS` and `page.includeJS` TypoScript properties.
11+
12+
## Prerequisites
13+
14+
### Tools and technology
15+
16+
* A local TYPO3 installation (v11 or newer).
17+
* A site package extension created for your theme.
18+
* Access to the file system of your TYPO3 installation.
19+
* A code editor.
20+
21+
### Knowledge and skills
22+
23+
* Basic understanding of the TYPO3 backend.
24+
* Familiarity with the structure of a site package.
25+
* Basic knowledge of CSS, JavaScript, and HTML.
26+
* Awareness of what TypoScript is and its role in TYPO3.
27+
28+
## Create Your Asset Files
29+
30+
First, you need to create the CSS and JavaScript files within your site package's directory structure.
31+
32+
1. Navigate to your site package's `Resources/Public/` directory.
33+
2. Create two new sub-directories: `Css` and `JavaScript`.
34+
3. Inside the `Css` directory, create a new file named `custom-styles.css`. Add a simple CSS rule for testing:
35+
36+
```css
37+
body {
38+
background-color: #f0f0f0;
39+
border: 5px solid #20c997;
40+
}
41+
```
42+
4. Inside the `JavaScript` directory, create a new file named `custom-scripts.js`. Add a simple JavaScript alert for testing:
43+
```javascript
44+
alert('Hello from custom-scripts.js!');
45+
```
46+
47+
Your file structure should now look like this:
48+
49+
```text
50+
└── your_sitepackage/
51+
└── Resources/
52+
└── Public/
53+
├── Css/
54+
│ └── custom-styles.css
55+
├── JavaScript/
56+
│ └── custom-scripts.js
57+
└── ...
58+
```
59+
60+
## Include Assets Using TypoScript
61+
62+
This method is best for assets that should be loaded on every page of your site.
63+
64+
1. Open your site package's main TypoScript setup file. This is typically located at `your_sitepackage/Configuration/TypoScript/setup.typoscript`.
65+
2. Add the `page.includeCSS` and `page.includeJS` properties to your page object configuration. You can assign a key (like `style` or `js`) and set the value to the path of your asset file using the `EXT:` syntax.
66+
67+
```typoscript
68+
page {
69+
# ... other page configuration
70+
71+
includeCSS {
72+
style = EXT:your_sitepackage/Resources/Public/Css/custom-styles.css
73+
}
74+
75+
includeJS {
76+
js = EXT:your_sitepackage/Resources/Public/JavaScript/custom-scripts.js
77+
}
78+
}
79+
```
80+
Make sure to replace `your_sitepackage` with the actual key of your site package extension.
81+
82+
## Clear the Cache and Verify
83+
84+
Finally, clear the TYPO3 caches to ensure your changes are loaded, and then check the frontend of your website.
85+
86+
1. Log in to the TYPO3 backend.
87+
2. Click the "Clear all caches" lightning bolt icon in the top toolbar.
88+
3. Open your website in a new browser tab.
89+
* You should see the styles from `custom-styles.css` applied to the page (a light gray background and a green border).
90+
* You should see a JavaScript alert box appear with the message "Hello from custom-scripts.js!".
91+
92+
## Summary
93+
94+
Congratulations! You have successfully added global CSS and JavaScript files to your TYPO3 site using TypoScript. This centralized approach is excellent for managing your site's core assets.
95+
96+
## Next steps
97+
98+
Now that you have experience with including assets globally, you might like to:
99+
100+
* Learn how to conditionally load assets on specific pages using TypoScript conditions.
101+
* Explore how to configure and bundle assets for better performance.
102+
103+
## Resources
104+
105+
* [TypoScript Reference: includeCSS](https://docs.typo3.org/permalink/t3tsref:confval-page-includecss)
106+
* [TypoScript Reference: includeJS](https://docs.typo3.org/permalink/t3tsref:confval-page-includejs)

‎Documentation/20BuildingWebsites/40FrontendDevelopment/50AddCustomJavaScriptAndCSSFromPageTemplate/Index.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Add Custom JavaScript and CSS
2+
3+
*No content yet.*

0 commit comments

Comments
 (0)