Creating a Custom Theme in Active Social
28 Jan 2010 01:11 PM

    Creating a Theme

    The steps here are for reference purposes only. Template changes are made using the interface on the Design page in the Control Panel. Creating a theme does not have to be a difficult process. It can be used to fix small issues in layout. As always, please try to accomplish all modifications using css before editing a template.

    1. Navigate to the DesktopModules/ActiveSocial directory. Locate the themes directory. This is the folder that contains all the themes for Active Social.
    2. Inside this directory you should only see two folders. _activesocial and empty-theme. If you still have the active and _default themes from Active Social version 1.2.7, you can delete these as they are no longer compatible.
    3. Right click on the _activesocial folder and select "Copy". Right click in the blank space and select "Paste". Rename the new folder. You have just created a new theme. It will look exactly like the _activesocial theme if you were to apply it, but we will add to it.
    4. Double click on the new-theme directory, right click and create a new folder.
    5. Name the new folder templates. This folder is empty for now.
    6. Open the folder and create another new folder. You do not need to rename this one at this point. You may need to repeat this step if you are modifying multiple different types of template files. This guide is only going to show editing a single template, but the process will be the same later.
    7. Navigate back to the DesktopModules/ActiveSocial directory. Locate the config directory and open it.
    8. Locate the templates directory and open it.
    9. Here you will see a list of the different types of template groups. If you did any custom theme work in Active Social 1.2.7, this will look familiar. The biggest difference however, is that we only need the templates we plan on editing. If a particualar template does not need editing, DO NOT touch it. Active Social will use these default templates if it can not find a customized one in the templates directory.
    10. The example I am going to use is for a site where they have changed the word username to "Email Address", and it has made the Login view break into two lines of text. We are going to need to make the container a little wider and give the text some room to fit on one line.
    11. Looking this template up in the Templates and Tokens guide, I know that it resides in the folder "Other" and is called "Login.ascx". Open the "Other" directory and find the file. Right click on the file and select "Copy".
    12. Navigate back to this directory: DesktopModules/ActiveSocial/themes/new-theme/templates. You will see the folder that we created earlier. Now that we know the name of the folder that our template belongs in, we can rename this. Right click on the folder and rename it "Other".
    13. Open the "Other" folder, right click and select "Paste". This will place the Login.ascx file in the directory. Notice that we only copied one file, not all the files in the default "Other" directory.
    14. Open the "Login.ascx" file in your favorite html editor. I am using Visual Studio 2008 in this example.
    15. In this example I made a few changes.
      1. I increased the width in the first line to 260px.
      2. I added an inline width to the first td element. This is what contains the "Email Address:" text.
      3. I removed the style="width:100%" from the other td element.
    16. Save your changes and close the file. At this point the custom theme is complete and we need to apply it to the module. Navigate to a page that contains an Active Social module; while logged in as an administrator. In this example I will go to the Login page, so I can view my changes. Click on the "Control Panel" link.
    17. On the Settings page of the Control Panel you will see a section labeled "Default Theme". This is where you can select your new theme. Expand the drop down list and click on new-theme.
    18. You will now see the new-theme listed in the box.
    19. Scroll down and click the Save button, then exit the control panel.
    20. Navigate to the Login page and view the changes. In this example the container is a bit wider and the text appears on a single line.
    21. We have now successfully created and applied a custom theme for Active Social! If you need to perform further modifications, repeat the steps again. It is important that you do not simply copy all the templates in the config directory. Also note that you can not make changes to the _activesocial theme as they will be reset every time you access the Control Panel. If you have any questions please ask in the Active Social customizations forum.
    You are not authorized to post a reply.
    Copyright 2012 by DotNetNuke Corporation / Terms of Use / Privacy