Topics

Tribe Support

Tribe Support's Topics

Hunter Wilkes

February 07 2017

Customize the GUI

Hey All,

I want to try and customize the GUI for my site, but I honestly have no idea where to start. Any advice or tips would be greatly appreciated.

Thanks,

Hunter

#gui #template #customization

Rastin Mehr
Rastin Mehr
February 07 2017 Permalink
Hi Hunter, what would you like to change?
Hunter Wilkes
February 07 2017 Permalink
I'm working with Sparq on the project, and they have some mockups near the bottom of their page at sparqedu.com that I'd like to try to match.
Rastin Mehr liked this
Rastin Mehr
Rastin Mehr
February 07 2017 Permalink
You need to develop a custom template. Use the Shiraz template as an example.

@scott @nicholasjohn16 would you please be able to help Hunter with his question? You have both built custom templates. You can tell him about overriding less files, adding custom css, and overriding component layouts. Also building custom pages.

@hunterwilkes I suggest you keep the UI customization at minimum. That will make it easier for you to upgrade to 4.5. We are rebuilding Anahita user interfaces to use technologies such as MaterialDesign and ReactJS.
Hunter Wilkes liked this
Scott Crawford
Scott Crawford
February 07 2017 Permalink
@hunterwilkes

To start your custom template make a copy of Shiraz into a /templates folder in the root of your anahita project's /packages folder - including a JSON file - and install as you would any custom app... then activate from the admin template manager selections. Look at the helloworld app I think resides in the /packages folder for an example.

You can see the customizations I've had in place for a long time at BeerLovers.com, a side hobby for me currently running v4.1.8, soon to be v4.2.4 (for now). Although extensive, note that the template is very old (5+ years), not mobile friendly, and well beyond due for a refresh, which I'm presently considering how/when best to implement. But, you'll see how much can be customized. Also note the "News & Reference" section is a separate WordPress implementation (dated as well) residing alongside Anahita and soon to be rolled into the Anahita Articles content app.

As suggested look at Shiraz as a start, but do so while digging into the code structure and comparing to the base template and each of the components' Views HTML. You'll eventually learn the pattern but it can be confusing at first. Views are generally plural or singular, but the plural view is often generated as a collection of singular views. Follow the code and you'll see the references from plural to singular in the HTML files. If there's a particular view you'd like to override, copy the original from the component and place it in a corresponding folder in your template's /html folder. When generating the front-end, Anahita looks first in the active template for over-rides and if none are found it builds from the base.

All my CSS is ground-up custom, including Bootstrap and Anahita customizations, in order to accommodate the legacy design. I did not use LESS but certainly will in the to-be revised template. Instead, I created a separate CSS file corresponding to each component, adjusted styling in a very focused manner, and then once satisfied amended them into one file and compressed. My advice: deviate as little as necessary from the "core" Anahita experience if you want to keep things easy to maintain as the platform matures. My approach has consumed quite a bit of time over the years with each upgrade.

Also, note that email templates can be overridden as well by including your overrides in the custom template's /emails folder.

Hope this helps for a start, hit me up with specific questions if/when they might arise.
2 people liked this
Nick Swinford
Nick Swinford
February 07 2017 Permalink
If you don't want to go the full route of creating a new template, then you can customize the base Anahita style right in the Shiraz template. Change to style2 and set the compiler to recompile when changes are made.

Then in the shariz/style2 folder, you can override as much of the less files as you like and Anahita will recompile the styles with your overrides. Figuring out exactly how to override files can be a bit tricky, but if you get stuck, respond here and we can help you.
2 people liked this
Rastin Mehr
Rastin Mehr
February 07 2017 Permalink
I recommend creating a new template rather than modifying shiraz. This way it can be maintained on a separate repository and it won't get overwritten when you update the default Anahita codebase.
Hunter Wilkes liked this
Hunter Wilkes
February 08 2017 Permalink
Awesome, thanks!
Rastin Mehr liked this
Hunter Wilkes
February 21 2017 Permalink
Hey, so, I've been looking into the files, and I can't seem to find which files I need to change. I found the css file, but I can't figure out what I need to change in order to customize. I'm also not sure which files are actually responsible for making the pages.
Nick Swinford
Nick Swinford
February 21 2017 Permalink
Can you post some examples of what you'd like to change? We can provide some specific instructions on how to get started then.
Hunter Wilkes liked this
Rastin Mehr
Rastin Mehr
February 21 2017 Permalink
The layouts are in the views of the components. If you want to change them, you need to override them in your custom component. For example to override:

components/com_people/views/people/html/default.php

copy that file in

templates/YOUR-TEMPLATE/html/com_people/people/default.php

This way Anahita ignores the file in the com_people component and uses your override instead.

The current Anahita extends the Bootstrap 2.2.4 which is written in LESS format. There is a built-in LESS compiler in Anahita that compiles the LESS files and creates the CSS file that you have found. Hence you shouldn't be editing the css file directly.

To customize the less files, override them in your custom template. For example copy the file:

templates/base/css/core/template.less

into

templates/YOUR-TEMPLATE/css/style1/core/template.less

and add your customizations to it. To activate the built-in compiler, go to the Site Settings and set the "Debug System" to Yes. Then go to a page in your Anahita installation and refresh in the browser. The compiler checks for the modified files and if there are any, it will recompile the entire LESS files and creates a new css file.

Did I answer your question?
Hunter Wilkes liked this
Rastin Mehr
Rastin Mehr
February 21 2017 Permalink
Also like I said, don't plan any heavy customization. In 6 months or so the entire user interfaces are going to be using new technologies. Here is an article talking about the upcoming 4.4 version:

What do we want to see in Anahita 4.4

A summary of what architectural changes we want to see in Anahita 4.4

Hunter Wilkes liked this
Hunter Wilkes
February 22 2017 Permalink
I think your answers are helping, but I'm still a bit lost. If I wanted to customize the home/login page, what would I need to edit?
Nick Swinford
Nick Swinford
February 22 2017 Permalink
The pages component is the default whenever an app isn't specified and when a page isn't specified, the default layout is used. You can find that layout here (https://github.com/anahitasocial/anahita/blob/master/src/templates/shiraz/html/com_pages/page/default.php).

To override and customize the default page, create a default.php file in your own template at /html/com_pages/page.

The login page is part of the people component. You can tell this by looking at the URL (https://www.getanahita.com/people/session). The first parameter, /people/, is the component and the second, /session/, is the view. You can customize this page by creating a new default.php file in yourtemplate/html/com_people/session.

If you look at the default.php file, you'll see that there's not much there. That's cause Anahita uses template helpers to build templates up. In the example, the template helper is loading the form.php file in the same directory. You may need to override this file instead, depending on what changes you want to make.

It should also be noted that different components inherit from parent components. The people and group components are both actors components and inherit their templates from the actor component. You might find some of the templates you're looking for in it. As well, photos, topics, todos are all medium apps and inherit from the medium component. Both actor and medium components inherit from the base component.
2 people liked this
Hunter Wilkes
February 23 2017 Permalink
So, I made a copy of Shiraz to the packages folder, but I can't figure out how to install it as a custom app.
Rastin Mehr
Rastin Mehr
February 24 2017 Permalink
Do you rename it? Pick a different name for it like. For example: Paris

The directory file structure for your new package is:

packages/paris/src/templates/paris

which contains the package file content such as css, html, params.ini, template.json, and thumbnail.png

packages/paris/src/language/en-GB/en-GB.tpl_paris.ini

is the language file

packages/paris/composer.json has the following content:

Loading ...


Then in the command line type:

$ php anahita package:list

and you should see it in the list of other packages. Use the following command to install it:

$ php anahita package:install paris

This will symlink the package. Then go to: Site Settings and select the template Paris. You can edit the template parameters by going to Site Settings > Templates.
Hunter Wilkes liked this
Rastin Mehr
Rastin Mehr
February 24 2017 Permalink
Anahita templates are basically apps that extend the base template.
Hunter Wilkes liked this
Hunter Wilkes
February 28 2017 Permalink
Awesome, that did it. Thanks!
Rastin Mehr liked this
Where can I find the files for the navbar? I can't seem to find them, and the default.php that makes the landing page didn't look like it had a reference to another file.
@hunterwilkes, the navbar is found in the menus folder of the base template (https://github.com/anahitasocial/anahita/tree/master/src/templates/base/html/menus).

Main is the main navbar you see all on the site on desktops or landscape tables. Mobile is what you see on mobile devices. Viewer is the drop down under your avatar in the menu.

You can override these in your own template by creating a matching file in html/menus.
2 people liked this
Okay, so then to change the text on the bar I need to track down the hrefs and change the content of those?

Powered by Anahita