Custom Admin Theme

Topics: Administration, Customizing Orchard, General, Writing themes
May 24, 2011 at 8:15 PM

I've seen it tossed about that you can customize the admin theme.  How does one go about doing that?  I really don't need a full custom theme, but I'd like to do branding etc in the orchard admin.  A custom css file should be adequate.

Coordinator
May 24, 2011 at 8:18 PM

Your theme will need to have code (and a csproj file) and to implement a theme selector that gives your admin theme a higher priority than the built-in one (100).

May 25, 2011 at 3:36 PM
Edited May 25, 2011 at 3:36 PM

Also, here's some info from the docs on customizing a theme that may help.  The topic discusses the appoach of copying the default theme and then customizing it, which is probably more than you want to do, but it also has some useful info about the CSS, what files to customize, etc.

http://orchardproject.net/docs/Customizing-the-default-theme.ashx

May 25, 2011 at 3:44 PM

@timlt Thanks, but implementing a custom admin theme is a different process.

@bertrandleroy Can you inherit from the base admin theme?

Coordinator
May 25, 2011 at 7:23 PM

You don't need to, they can both be active at the same time and the theme selector in your theme can set the priority only when it wants to take over. Warning: I've actually never overridden the admin theme; you should be able to do it in principle but I've not verified it.

Coordinator
May 26, 2011 at 12:07 AM
codegen theme MyAdmin /CreateProject:true /IncludeInSolution:false /BasedOn:TheAdmin

Add MyAdmin.csproj to your sln and add MyAdmin/OverrideTheAdmin.cs, see below.

Add any overrides like MyAdmin/Views/Header.cshtml, see below.

Now in ~/Admin/Themes when you Enable "MyAdmin" (do not SetCurrent) your overrides will be in effect on admin requests.

 

 

using System.Web.Routing;
using Orchard.Themes;
using Orchard.UI.Admin;

namespace MyAdmin
{
    public class OverrideTheAdmin : IThemeSelector
    {
        public ThemeSelectorResult GetTheme(RequestContext context)
        {
            if (AdminFilter.IsApplied(context))
            {
                return new ThemeSelectorResult { Priority = 110, ThemeName = "MyAdmin" };
            }

            return null;
        }
    }

}

@model dynamic
<div id="branding">
<div id="app">@Html.ActionLink(T("Project Ocean").ToString(), "Index", new { Area = "", Controller = "Home" })</div>
<div id="site">@Html.ActionLink(T("My Site").ToString(), "Index", new { Area = "", Controller = "Home" })</div>
</div>
Aug 6, 2011 at 3:44 AM

Hi there,

I am also in process of creating a custom theme for my Orchard project back-end, everything so far is good but now I want to create menu on the top as well as the side bar menu. I think that I need to create a new zone and also a new custom menu shape to the layout page,however I am not sure how to it yet.

Could you guys please help me on this, much appreciated.

Thanks

Jan 16, 2012 at 5:41 PM

Thanks for the detailed instructions. It works perfect for .cshtml files. Do I need to do anything different to override css file? When I tried to override the css file it doesn't seem to work.

Coordinator
Jan 16, 2012 at 5:43 PM

The file that includes the css must also be overridden by the theme. That's usually layout.cshtml.

May 4, 2012 at 12:20 AM

I also have this working now, thanks for the instructions.

How do I override the dashboard view correctly? The view is not in TheAdmin theme so I looked in the Core and it's in the folder structure - Dashboard/Views/Admin/Index.csthml

I tried just putting index.cshtml in the new admin theme Views directory and it overrode the dashboard correctly, however it also showed up when I clicked on widgets.

Also, is there a document or method that I can use to work this out myself?

May 10, 2012 at 10:07 PM

Anyone? Maybe I can't do this? I might just have to edit the core view

Coordinator
May 12, 2012 at 8:32 PM

Not sure what you mean by "it also showed up when I clicked on widgets".

May 13, 2012 at 9:11 PM

Any root level menu item in admin renders the themed index.cshtml. I'm looking at the Routes.cs file in Orchard.Core\Dashboard now as that probably has something to do with it.

Coordinator
May 14, 2012 at 6:21 PM

I don't know: I have a custom admin theme here that I'm looking at, that has Dashboard/Admin/Index.cshtml, and it works just fine. You must have done something else.

May 14, 2012 at 9:44 PM

Sorted it out. It was just the folder structure.

I had - Dashboard/Views/Admin/Index.csthml

I needed - Views/Dashboard/Admin/Index.csthml

Rookie error.

Thanks,
Greg 

Developer
Aug 24, 2012 at 10:28 AM

I didn't manage to make a Custom Admin Theme with this solution, implementing a IThemeSelector on an Orchard 1.4 or 1.5 site.

I enabled the Theme but it doesn't use my alternates (like the Header.cshtml example) as it should.

I don't know what I'm missing or if something changed.

Aug 25, 2012 at 3:30 AM

Did you set a reference to TheAdmin from your custom admin theme?

Developer
Aug 25, 2012 at 2:06 PM

There is no reference to TheAdmin (which is just a folder in Themes, not a .csproj)

codegen only added 'BaseTheme: TheAdmin' in the Theme.txt but I don't know how it is useful.

Developer
Aug 25, 2012 at 2:07 PM

After many retries (re-creation, ...), it works now but I don't really understand what changed.

Sep 21, 2012 at 9:41 AM

i also in proccess of creating the admin theme,did you finish your problems ?

Could you guys please help me on this, much appreciated.

Thanks

Oct 4, 2012 at 10:18 AM

Are you running into a specific issue?

Oct 4, 2012 at 11:53 AM
Edited Oct 4, 2012 at 12:10 PM

People, is this a good idea: http://medialoot.com/item/html5-admin-template/

see also: http://code.msdn.microsoft.com/Advanced-ASPNET-Administrat-f980b166

It's a Free HTML5 Admin Template (actually Bernard has to talk to the guys behind the medialoot project, but I think it won't be a problem).

Oct 6, 2012 at 4:17 AM

It sure looks interesting. It would be great if we could choose from multiple admin themes at some point.

Bernard, please implement? :)

Oct 6, 2012 at 9:47 PM
Edited Oct 6, 2012 at 9:55 PM

So are you guys starting to build a custom admin theme?

Oct 6, 2012 at 10:03 PM

No, there are no concrete plans yet as far as I know.

Oct 8, 2012 at 12:35 PM

Hi everyone

I'm currently working on adapting TheAdmin theme for RTL cultures. It should be ready in a week or so, and I'll open up the BitBucket repo right away then.

In the meantime, I was thinking about perhaps implementing alternative Admin themes for different user roles... Like having a complete TheAdmin for superusers, and doing something friendlier and nicer for the regular folks (if you make Orchard sites for handover to clients, you'll know what I mean :))

Actually I'm very impressed and inspired by what SquareSpace did with their admin interface. Would be extremely cool to bring similar features to Orchard.

Coordinator
Oct 10, 2012 at 12:34 AM

Who is this Bernard I hear so much about?

Oct 18, 2012 at 8:32 AM

is there have any concrete solution ?

Coordinator
Oct 18, 2012 at 4:57 PM

Concrete solution to what? To the enigma that Bernard is?

Oct 19, 2012 at 2:11 AM
Edited Oct 19, 2012 at 2:12 AM

 

customize the admin theme

just like :Locate in Themes/TheAdmin/Views/Menu.cshtml  ,how it forms.

 i know the view from the controller is admin,action is index,locate in Orchard.Core/Dashboard/Controllers/AdminController.cs.

but the action is no logic code. 

Coordinator
Oct 19, 2012 at 6:09 AM

I'm sorry, I still can't discern a question in there.

Oct 19, 2012 at 7:25 AM

ok, one simple question..how can i remove the items what i want in  admin menu.

Coordinator
Oct 19, 2012 at 4:38 PM

How do you remove admin menu items? By disabling the features that add them.

Oct 22, 2012 at 1:30 AM

your answer is just first way,

do you have some method to disappear some items.

just like display different menu items  for different roles.

Coordinator
Oct 22, 2012 at 3:44 AM

I think that's the only way. As far as I know, we have the API to add menu items, but not to remove, so you'd have to prevent it from being added, either by disabling the feature, or by making sure the user is in a role that doesn't have permissions to access that menu item..

May 14, 2013 at 8:44 PM
Edited May 14, 2013 at 9:22 PM
@loudej: Thanks for your post of the overriding necessary for the cs class. May I ask you to expound on "Now in ~/Admin/Themes when you Enable "MyAdmin" (do not SetCurrent) your overrides will be in effect on admin requests." I just keep the theme enabled but not set to current?

I built my Theme based on TheAdmin. I added a placement.info file to my new Admin file as follows, which removes the save button if I am creating a particular content type:

<Placement>
<Match ContentType="myContentType">
    <Place Content_SaveButton="-"/>    
 </Match>
</Placement>

When I had this in a placement.info for TheAdmin, it worked, but when cut and pasted into my own theme, it did not. It appears it isn't overriding. Any ideas?
May 22, 2013 at 12:02 PM
Is there a way to use something like <Match ContentPart=""/> in Placement.Info?
May 22, 2013 at 2:27 PM
I don't think so. Why do you need it?
May 22, 2013 at 2:31 PM
I'm having content part that defines specific behavior for types that use it, so I wanted on one place to define display options in placement.info, as when showing content list types that use this part should not have view and unpublish actions.
May 27, 2013 at 1:34 PM
So can't you do something like this in Placement.info?
<Place Content_SaveButton="Content:after"/> <!-- Default placement for this shape -->
<Match DisplayType="SummaryAdmin">
    <Place Content_SaveButton="-"/> <!-- Don't render in lists in admin -->
 </Match>
May 27, 2013 at 1:36 PM
Not really, as for some items I need those actions. I've solved this problem with ContentType for now...
Jan 8 at 9:07 PM
I followed these directions, but I'm having some issues with my overrides of Views\Media-Image.Thumbnail.cshtml. If I "Set Current" I see my overrides, but not when I just enable the theme. Was hoping to override the media-Image.Thumbnail view only for the admin menu.

Do I need to use a different path for admin vs all? I tried moving that code to Admin\Views... to no avail. Fiddler isn't showing anything useful unfortunately. I assume it's a path error.

Thanks!
Jan 18 at 12:31 AM
Problem was a path issue. Solved.
Jan 20 at 9:55 PM
Trying to apply alternates for the admin menu. Works great on the local dev machines but fails when uploaded to Azure cloud service. Installed procmon on the VM, not even seeing my theme folder's alternates hit. See the folder being touched though. :s Is there some special step required for an Azure cloud service?
Jan 29 at 11:04 AM
I created a new Admin theme based on TheAdmin in a separate csproj. I've implemented the IThemeSelector to override the default admin theme. Unfortunately, no styles are loaded from the theme are loaded, as if not theme was selected.
When I move the styles, scripts and view back into the Themes module/project, all works well.
Any thoughts?
Jan 31 at 1:22 PM
Sooo I made it work by enabling the theme from commandline.