malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add snippet to increase the width of selected pages

Browse Source
This commit is contained in:
Tetrakern 2024-04-12 23:01:02 +02:00
parent 8caa13fef3
commit 6fc23d7bfc
1 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
INSTALLATION.md
View File

@ -1079,6 +1079,20 @@ body {
} }
``` ```
#### Make Single Pages Wider
Perhaps you want to make your landing page wider, to show off more or larger cards? But without changing the global site width, because that would look silly for chapters? All you need for that is the ID of your page, which you can find in the address bar of your browser on the edit screen, and the `--site-width` custom property. We will scope the changes to that ID and that ID only; you can repeat the process for other IDs, of course.
WordPress automatically adds a class with the ID to the body, like `.page-id-334`. Using that as scope, you can affect the whole site only for this one instance. However, you may want to limit it to the `.main` container class. Otherwise, you site might display extreme layout flickers when the user visits another page. Obviously, you can do more than just increase the width.
```css
/* Example: Increase the width of the main container on the page with ID 334. */
.page-id-334 .main {
--site-width: 1300px;
}
```
#### Move the Title/Logo #### Move the Title/Logo
![Customizer HSL Sliders](repo/assets/customizer_move_title_logo.jpg?raw=true) ![Customizer HSL Sliders](repo/assets/customizer_move_title_logo.jpg?raw=true)