New theme

This question is answered

Posted by kestutis

on Tue, Jul 10 2012 8:37 AM

hello, guys,

I'm trying to create new theme for telligent 6.0. I'm doing steps as they written here: http://telligent.com/support/telligent_evolution_platform/w/documentation/3833.3-create-and-customize-a-new-theme.aspx

First problem is that I can not find Fiji theme at all. In /Themes/ dir only generic theme exists. Somehow in Dashboard » Administration » Site Administration » Site Theme I can choose Fiji theme.

Well, so I continued on these steps with generic theme. After all steps I got this error:

Server Error in '/' Application.

Unhandled Execution Error

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: Telligent.Evolution.Components.CSException:

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[CSException]
   Telligent.Evolution.Controls.ContentFragmentPageBase.OnInit(EventArgs e) +948
   System.Web.UI.Control.InitRecursive(Control namingContainer) +133
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1970

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.272

When I choose Fiji theme on Site administration, it works again, but I can not locate actually Fiji theme files at all.

So can I download standalone Fiji theme? Or can you tell me where to find it in Telligent system? Any other ideas?

Verified Answer

Posted by Adam Seabridge

on Tue, Jul 10 2012 2:12 PM

Verified Answer

Verified by kestutis

Hi Kestutis,

You can not really edit t he html/markup in Telligent Community 6.x (other than the wrapper classes for widgets headers/footers etc).

Themes in 6.x are xml based and stored in the database and therefore there are no physical pages or page layouts to edit.

You need to implement the design working with the markup you have and apply css to it to achieve the layout/design you want. You can select around 18 different page layouts OOTB to use as a basis for each page and can configure the widget borders/headers etc to achieve different layouts.

Essentially to create a new theme you need to:

- Go in the control panel and copy either the fiji or enterprise theme and save it as your new theme name

- Open up screen.css and make changes here for your theme

- Create and upload any images you wish to use into the supplementary files section in the control panel under the theme management area

- Create and upload any custom Javascript you need in the same way

- Create custom widgets or modify OOTB widgets for your needs

- Export your theme and import it into different environments (Test / Staging etc)

Thanks

Adam

Posted by Ben Tiedt

on Tue, Jul 10 2012 3:51 PM

Verified Answer

Verified by kestutis

If you want more rapid development, I'd recommend adding a direct reference to a file hosted outside of Evolution (even in the root of the web/ folder) to the Raw HTML Header (Bottom) HTML in the site theme's configuration. This will render on every page and can reference a static file (suitable for regular ctrl-f5 refreshing).

All Replies

Posted by Bruno Lopes

on Tue, Jul 10 2012 10:49 AM

I think those are the docs for 5.*, and the themes handled in a different way on 6.0 . Try this link here: telligent.com/.../13614.aspx . Although those instructions are for customizing a theme, and now building a new one, you might be able to move forward .

Posted by Bruno Lopes

on Tue, Jul 10 2012 11:11 AM

Actually I was just looking into this and found where the "create a new theme" instructions are: telligent.com/.../theme-version-control.aspx . Scroll to the "Creating a new theme and adding it to source control" part, and I think that's what you'll want.

Posted by kestutis

on Tue, Jul 10 2012 1:58 PM

Thanks, Bruno. So I was doing it wrong. So I created new theme as you told me in last post, but it doesn't look like what I need. I have really custom design to setup on telligent and I need to edit not only few things, but most of the layout(html) and style(css). Can you suggest best practices to do this?

Posted by Adam Seabridge

on Tue, Jul 10 2012 2:12 PM

Verified Answer

Verified by kestutis

Hi Kestutis,

You can not really edit t he html/markup in Telligent Community 6.x (other than the wrapper classes for widgets headers/footers etc).

Themes in 6.x are xml based and stored in the database and therefore there are no physical pages or page layouts to edit.

Essentially to create a new theme you need to:

- Go in the control panel and copy either the fiji or enterprise theme and save it as your new theme name

- Open up screen.css and make changes here for your theme

- Create and upload any images you wish to use into the supplementary files section in the control panel under the theme management area

- Create and upload any custom Javascript you need in the same way

- Create custom widgets or modify OOTB widgets for your needs

- Export your theme and import it into different environments (Test / Staging etc)

Thanks

Adam

Posted by Bruno Lopes

on Tue, Jul 10 2012 2:16 PM

Honestly, I'd love to hear what Telligent recommends here, as I don't want to push you towards a wrong approach on how to create a new theme from scratch.

You should be able to edit the .css file on your theme, and perhaps customize some widgets to get the layouts you'd want.

Posted by Ben Tiedt

on Tue, Jul 10 2012 2:33 PM

A Theme is a set of pages, a header, and a footer. Each page/header/footer uses a layout (of 18 options) to organize a set of widgets.

The bulk of the HTML is rendered by the widgets, not the page/header/footer. The suggestions on this thread are good:

1. Create a new theme in the Manage Themes area of the Control Panel

2. Add/modify CSS defined on the site theme to apply site-wide.

3. Use the page editor ("Edit Page" link when viewing the page) to modify the content and layout of individual pages, headers, and footers.

4. Create or modify widgets as necessary to adjust HTML and implement new functionality.

Posted by kestutis

on Tue, Jul 10 2012 3:31 PM

Thank you all for answers, it's really helpful.

the only thing left to ask is about screen.css file. It's located in two places:

\filestorage\themefiles\s\fd\5a594e82a1ed42bdaa45625f354f9db7\cssfiles\screen.css

and

\filestorage\themefiles\h\s\5a594e82a1ed42bdaa45625f354f9db7\cssfiles\http\domaincom\80\screen.css

which i have to edit? I think the first one, but then the site doesn't take any effect. Second one looks like some cached file for me. Am I right? If so, how can I disable cache(or anything) on my machine to make it work?

Posted by Ben Tiedt

on Tue, Jul 10 2012 3:38 PM

Ideally, you would download the file through the site theme configuration, edit it, and upload it back through the site theme configuration page.

If you want to work on the file directly, the first file is the one you want to edit. Once you're done editing, you'll need to expire the UI rendering cache by going to Control Panel > Administration > Site Administration > Widget Studio >Manage Widgets > Developer Tools and click "Clear Cache" (or restart the site).

Posted by kestutis

on Tue, Jul 10 2012 3:47 PM

Can I disable cache at all? It takes time to clear cache after each change. And I can not even think about download/change/upload through the configuration page in this development stage.

Posted by Ben Tiedt

on Tue, Jul 10 2012 3:51 PM

Verified Answer

Verified by kestutis

Posted by Bruno Lopes

on Tue, Jul 10 2012 4:18 PM

For widget development, on my machine I've been using the following code as a plugin to detect changes and empty the cache: gist.github.com/1510830 .

I hope it helps, but it comes just with "works-on-my-machine" warranty, and should never be used on a production (or even testing) environment.

Posted by Bruno Lopes

on Wed, Jul 11 2012 4:21 PM

Adam, Ben,

I was looking at the issue of creating and managing a new theme, and I'd like to ask you how do you handle versioning and source control for themes?

Putting the exported theme in source controle is straightforward, but the changes are hidden in the base-64 encoded files (like the .css files) and it seems like the export is not always ordered the same way, making it really hard to check what was changed between versions.

Putting the filesystem data in source control would seem like the best option, but then I think the site doesn't load the customized versions of widgets for a given theme, even after adding the theme to the database.

Is there anything I may be missing?

Posted by Ben Tiedt

on Fri, Aug 3 2012 2:48 PM

We put the portions of the CFS that represent the theme in source control. We directly edit these files (the raw XML) to apply changes. Note that the CFS presentation of the files does not base64-encode any components (files are stored as complete files in a separate file store)