As a follow up to
How to Webpage, may I introduce:
What Can Themes and Templates Do For Me?Themes and templates both change the appearance of your webpage and its content. Themes affect things like color and font, while templates have more to do with layout.
Using themes requires knowing how to make a webpage, as well as a basic understanding of how to create a new layout. To use templates you need to know those things and also how to code a layout to insert custom components and widgets.
How to Webpage will walk you through it.
We'll start with themes because if you get as far as making a simple webpage with some content, changing the theme is something you can do to quickly change the look of your page.
THEMESThemes alter the appearance of a webpage by defining colors, font size, roundedness of corners, etc.
To add a theme to your webpage, open its associated layout or create a new one. Themes go right at the top of your layout code--though under your template if you're using one of those--and look a little something like this:
[theme]redbasic[/theme], where "redbasic" is the name of the theme. If all you have in your layout is this line, that's fine. That's all you need to use a theme. Save the layout, and make sure your webpage is associated with it. Hint: you do this where you edit your webpage.
Hubzilla's help file suggests themes and variations we don't have, so it's best to go into the
Display Settings area and steal the names directly from there. For example, you could choose
[theme]porple[/theme] and use imp's porple theme to style your webpage. As for the variations and color schemes, most of our themes don't have any color options. Like "suckerberg" doesn't offer us the option of the "passion" scheme--contrary to what the help file suggests--so don't try that. You can try using redbasic, which has several schemes, which would look like this:
[theme=dark]redbasic[/theme], where "dark" is a version of the redbasic theme.
Note: If you've made changes to your blog theme under Display Settings > Custom Theme Settings, some of these customizations show up on your webpage no matter what theme you choose. Some don't. Hell if I know.
TEMPLATESTemplates change the look of your content as well, but alter layout instead of style. If you want to use a template with your webpage, you indicate this in the layout associated with that webpage. Right at the top of your layout, write:
[template]choklet[/template]. This tells Hubzilla you want the "choklet" template. Choklet comes in several flavors, if you want the "bannertwo" version, you put in:
[template=bannertwo]choklet[/template]If you're using a template, you still have to customize your layout by specifying what blocks, menus, or widgets go in what region. A template won't automatically do anything for you except allow you to display content in certain regions and change the size and placement of those regions. Some templates will be three columns, some will be two, some will only have the central content column. Some templates take up the whole page, and others have a lot of weird blank space that makes me uncomfortable because I don't seem to be able to fill it with things. You can learn about the different templates in the help file, but be aware not all of these work as advertised (or if they do it's outside my grok).
Here's a basic rundown on the available templates:
default: Three column layout. Has a "nav" region across the top, "aside" as a fixed width sidebar on left, "content" for the main content region, "right_aside" for sidebar on right, and "footer" for a page footer. [help file describes this as a two column layout, it's...wrong?] You don't need to request this one in your page layout. It's just what you get by default.
full: Full screen central content, no asides. Nav bar and footer region.
choklet: Two column layout similar to the "default" template, but with wider content region and reduced nav bar. This is the default choklet template. There are also several variations:
[]bannertwo - a two column layout that goes edge to edge, with a "banner" region[]three - three column layout, with weird ass margins[]edgestwo - two column layout with fixed side margins[]edgesthree - three column layout with fixed side margins- full - three column layout with fixed side margins and a "header" region above(?) the navigation bar [help file says "beneath" but that's not my experience]
redable: Three columns. Super narrow content column. Unlike other templates, content in side columns stays in one place so it's not visible once you scroll down. Reduced nav bar.
zen: One column. Central content region full screen. No nav bar. I used this template on my
Lorem Ipsum page. I added a navigation block at the bottom and a flourish at the top, and it looks the most like an old school webpage to me.
But, like I said, not all of these seem to work, like
choklet in full seems broken, and if you add a theme to it (porple in this case), it just breaks even more; note how the block in the right column is at the very bottom of the page. If you remove the theme, it goes back up to where it should be.
Some of these templates have a reduced navigation bar which only has three icons, only one of which ever works for me (my icon). I don't know the code to make it use one nav bar over the other. On most templates, you
can replace the nav bar with a block or menu of your own making, just throw your custom component in between
[region=nav][/region] and then you can see just how badly you've broken the layout. I found it works best like this
[region=nav][block=horizontal]navhorz[/block][/region] where "navhorz" is a block with some very small links in it. You should be able to see what that looks like on
my full template layout. If you want your custom block
and the nav bar on the same line, just slip $nav in between the region tags as well.
If you're wondering: Horizontal what now? Here's a neat trick you can add to menus or blocks:
Just add "=horizontal" in there like so: [menu=horizontal]Bookmarks Galore[/menu] and that component won't have a background behind it or outline around it; it'll just look like free-floating content without any padding. Just a little option to help make your webpage look nice.
The best thing to do is experiment. Make up a practice webpage and associated layout, then just add in a template at the top of your layout, save, and refresh your webpage to see what exciting changes it brings you. If you have an element in your layout that the template doesn't support, it will just ignore it, so you're not going to break anything. Unless you're using choklet in full, which I either broke badly, or it started out broken. I recommend filling your layout to the brim with at least one custom component in every position so you can see which layouts support what.
Some layouts allow
a footer region, but it floats above all content and is always on top of everything down at the bottom left of the page. I'm sure it has some use, but I can't figure out what. Maybe on a very empty page with just a narrow central content region, you could use that as a navigation area as long as it didn't overlap with your content, but on narrower screens it will almost certainly do so, no matter how small it is.
The header region, on the other hand, doesn't float, and mostly hangs out above the nav bar, which isn't how the help file describes it, but I couldn't get it to move. I also want it to be able to be a background image like on our home channel pages, but I can't make that work. I mean, you can put an image there in a block. It just looks awkward.
Choklet in bannertwo allows for a banner region, which is closer to what I want, but if you add an image in there, it's still not a background image, it's just an image that can stretch out over both columns. It's a start though.
If you want to do further research on webpage themes and templates, try the
help file under Guide > Comanche Page Description Language. But, seriously, parts of it are just straight up wrong, so be careful.
!
Themes, Schemes, and Layouts #
punk-pokes-at-stuff
