Difference between revisions of "Hubzilla:Extending a Theme"
(→Setting up your theme: removed bracket version of code for clarity) |
(added link to derived theme setup doc at DeadSuperHero, plus a little troubleshooting) |
||
| Line 4: | Line 4: | ||
* You will need to be a little bit familiar with git. See the [[Git Primer]] for more details. | * You will need to be a little bit familiar with git. See the [[Git Primer]] for more details. | ||
* You should also be a little familiar with php. You do not need to be a programmer, but just be able to avoid running screaming into the night at the sight of a few lines of code. | * You should also be a little familiar with php. You do not need to be a programmer, but just be able to avoid running screaming into the night at the sight of a few lines of code. | ||
| − | * You | + | * You will need an installed copy of Hubzilla to test your theme on, and shell access. |
== Setting up your theme == | == Setting up your theme == | ||
| − | + | There is a [https://deadsuperhero.com/help/en/DerivedTheme1 great tutorial] up on DeadSuperHero's site that will help you get your theme started. | |
| − | <syntaxhighlight lang=" | + | One thing that is not clear from the instructions: generally, you can find the themes you've installed in extend/themes. That is the actual location that the data gets copied to when you initially add the theme repo. However, it also creates a symbolic link inside view/themes that points to extend/themes! So if you have created your new theme and aren't seeing it in the admin panel even though you have the three main files (php/theme.php, php/style.php, and css/styles.css), use the shell to go to the view/themes folder. If you type <code>ls -l</code> you will probably see something that looks like this: |
| − | + | <syntaxhighlight lang="bash"> | |
| − | + | total 12 | |
| − | / | + | drwxr-xr-x 3 username username 4096 Jan 4 20:48 ./ |
| − | + | drwxr-xr-x 23 username username 4096 Dec 9 12:41 ../ | |
| − | + | lrwxrwxrwx 1 username username 40 Dec 9 15:19 bookish -> ../../extend/theme/DeadSuperHero/bookish/ | |
| − | + | lrwxrwxrwx 1 username username 40 Dec 9 15:19 clarity -> ../../extend/theme/DeadSuperHero/clarity/ | |
| − | + | lrwxrwxrwx 1 username username 41 Dec 9 15:19 frontier -> ../../extend/theme/DeadSuperHero/frontier/ | |
| − | + | drwxr-xr-x 8 username username 4096 Dec 9 12:41 redbasic/ | |
| − | + | ... | |
| − | + | lrwxrwxrwx 1 username username 41 Dec 9 15:19 sporadic -> ../../extend/theme/DeadSuperHero/sporadic/ | |
| − | + | </syntaxhighlight> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | </ | + | The arrow means that it is a link to another folder. You can create one of these by entering <code>ln -s ../../path/to/your/theme yourthemename</code>. (The destination is first, and the link name is second.) |
| + | Now if you refresh the admin panel, you should see your theme in the list. If you check the checkbox, you can then go to your channel settings and choose your new theme to activate it. | ||
| − | + | == Making Changes == | |
| − | + | When you go to activate your theme, the first thing you might notice is that it has no preview image. If you create an img/screenshot.jpg file, it will use that as the preview of your theme. | |
| − | |||
| − | |||
| − | |||
| − | + | I ran into an issue after activating the new theme where it did not seem to be inheriting any of the layout items from redbasic at all, and I had lots of overlapping text and divs going on. I was able to make a change, re-upload, then change it back, upload again, and the problem was fixed. I'm not sure if this is a code bug we need to track down or something else going on. Let us know on the talk page if you have this issue and can't fix it! | |
Revision as of 06:04, 5 January 2019
Most themes so far are derived from the 'redbasic' theme - they take its basic properties and skin it, basically. The redbasic theme is defined in the core repository, under view/theme/redbasic, so you can get a feel for what it contains there.
Getting Started
- You will need to be a little bit familiar with git. See the Git Primer for more details.
- You should also be a little familiar with php. You do not need to be a programmer, but just be able to avoid running screaming into the night at the sight of a few lines of code.
- You will need an installed copy of Hubzilla to test your theme on, and shell access.
Setting up your theme
There is a great tutorial up on DeadSuperHero's site that will help you get your theme started.
One thing that is not clear from the instructions: generally, you can find the themes you've installed in extend/themes. That is the actual location that the data gets copied to when you initially add the theme repo. However, it also creates a symbolic link inside view/themes that points to extend/themes! So if you have created your new theme and aren't seeing it in the admin panel even though you have the three main files (php/theme.php, php/style.php, and css/styles.css), use the shell to go to the view/themes folder. If you type ls -l you will probably see something that looks like this:
total 12
drwxr-xr-x 3 username username 4096 Jan 4 20:48 ./
drwxr-xr-x 23 username username 4096 Dec 9 12:41 ../
lrwxrwxrwx 1 username username 40 Dec 9 15:19 bookish -> ../../extend/theme/DeadSuperHero/bookish/
lrwxrwxrwx 1 username username 40 Dec 9 15:19 clarity -> ../../extend/theme/DeadSuperHero/clarity/
lrwxrwxrwx 1 username username 41 Dec 9 15:19 frontier -> ../../extend/theme/DeadSuperHero/frontier/
drwxr-xr-x 8 username username 4096 Dec 9 12:41 redbasic/
...
lrwxrwxrwx 1 username username 41 Dec 9 15:19 sporadic -> ../../extend/theme/DeadSuperHero/sporadic/The arrow means that it is a link to another folder. You can create one of these by entering ln -s ../../path/to/your/theme yourthemename. (The destination is first, and the link name is second.)
Now if you refresh the admin panel, you should see your theme in the list. If you check the checkbox, you can then go to your channel settings and choose your new theme to activate it.
Making Changes
When you go to activate your theme, the first thing you might notice is that it has no preview image. If you create an img/screenshot.jpg file, it will use that as the preview of your theme.
I ran into an issue after activating the new theme where it did not seem to be inheriting any of the layout items from redbasic at all, and I had lots of overlapping text and divs going on. I was able to make a change, re-upload, then change it back, upload again, and the problem was fixed. I'm not sure if this is a code bug we need to track down or something else going on. Let us know on the talk page if you have this issue and can't fix it!