making a subtheme of commons_origins?

Thanks for posting your answer!

Hi, I set this to active if thats ok.

I do not see a local.css.sample as stated on: http://fusiondrupalthemes.com/support/documentation/customizing-your-the... within latest Commons 7.dev.
How can I get a local.css to work please?
Greetings,
Martijn

look in the commons_origins folder subdirectory css folder most changes I had to make were to the global css file

Hi, I do not see a local.css also not the code documented how to get a local.css to work. Am I looking in the wrong place?
Greetings, Martijn

Commons Origin 3.x does not currently support this feature.

The 2.x version of Commons used Fusion as the base for its default theme, and local.css was a function of that. The 3.x branch uses Adaptive Theme as a base and it is not a native feature. This is likely where the confusion is as this issue was opened initially for 2.x.

Currently this is not a feature on the roadmap, so I cannot suggest waiting for it. I also cannot recommend editing any of the source CSS files directly. It is best to try making a subtheme of commons_origins in your sites/all/themes directory and adding your css overrides there. This has a very important advantage of being separate from the core code of Commons, but still inherits the function of it. This will allow for easier updates and minimizes the chance your changes will get overridden in an update.

One other thing you can do is add a local.css to the theme directory and then adding a stylesheets entry to the commons_origins.info. It is better than editing one of the other stylesheets directly as it keeps your changes and overrides isolated a bit. I can't say it is fully recommended as you are still editing a file in a contributed theme, but at least it makes the editing of files limited to one line. The above subtheming approach is still going to be the best long term solution.

Marking as fixed per #8.

Hi,

As it is commented in the #7 answer the best way to customize commons_origins css is to create a new subtheme.

I tried to create one subtheme following the link making subtheme but it's not clear for me as commons subtheme is AT.

I did it in that way without result:

1) In /profiles/commons/themes/contrib I create a new folder "subtheme"
2) I copy commons_origins.info to my folder "subtheme"
3) I rename the file to subtheme.info and edit it:
a) I changed theme information in that way:
name = subtheme
description = Subtheme of Commons origins
core = 7.x
base theme = Commons Origins
engine = phptemplate
screenshot = screenshot.png

b) i deleted Stylesheets references of AT and add stylesheets[all][] = css/subtheme.css
Note: If i leave stylesheets[screen][] = css/global.base.css stylesheets[screen][] = css/global.styles.css
c) I deleted Scripts references

d) I leave the rest

I join my info file "subtheme.info" And a screen shot of my folder templates.

4) i go in my commons installation /admin/appearance and enable my new subtheme

5) I click on the settings subtheme and I have this message:

Notice: Undefined property: stdClass::$prefix in system_theme_settings() (line 547 of /var/www/ifr73dev/modules/system/system.admin.inc).
Notice: Undefined index: Commons Origins in system_theme_settings() (line 575 of /var/www/ifr73dev/modules/system/system.admin.inc).
Notice: Trying to get property of non-object in system_theme_settings() (line 575 of /var/www/ifr73dev/modules/system/system.admin.inc).

6) If i set as default my subtheme the result is catastrophic :)

Notice: Undefined index: Commons Origins in drupal_theme_initialize() (line 98 of /var/www/ifr73dev/includes/theme.inc).
Notice: Trying to get property of non-object in phptemplate_init() (line 12 of /var/www/ifr73dev/themes/engines/phptemplate/phptemplate.engine).
....

I know I'm doing a lot of things wrong but i would like to know in which way to go.

Is it really possible to make a subtheme of commons without making a copy of AT folders ? (commons/themes/contrib/adaptivetheme/at_subtheme)

In the info file instead of "base theme = Commons Origins" do we need to put "base theme = adaptivetheme" ?

if there is an a step by step doc i will be happy to follow it.

Thanks,

Antonio

Hello Antonio,
Here is an AT minimal subtheme for commons_origins to get you started - it's been working for me. Place your css overrides in css/custom.css. Use custom.css to provide overrides to the main styles. This file always loads last so you can override anything in the other style-sheets.
More info for AT themes - http://adaptivethemes.com/documentation

--Rose

Hello Rose,

I've just tested you're AT minimal subtheme but I've noticed some css are not loaded.

From /commons/themes/contrib/commons_origins/css this files are not loaded:
responsive.custom.css
responsive.desktop.css
responsive.smartphone.landscape.css
responsive.smartphone.portrait.css
responsive.tablet.landscape.css
responsive.tablet.portrait.css

Could you check if this file are loaded when you configure your sub-theme in your site?

From /sites/default/files/adaptivetheme/commons_origins_files this file is not loaded:
commons_origins.responsive.layout.css.

I think because this file is missing all the original design break.

do you have any idea of the problem?

note: I have copied your subtheme in /profiles/commons/themes/contrib/

Thank you very much for your help

Antonio

Antonio,
Missing a file - oops! Copy this file from Commons Origins theme to your sub-subtheme.
css/responsive.custom.css

From AT readme file..
Overlapping/Custom Media queries:
By default the media queries in Adaptivetheme are "stacked", meaning they do not overlap. This makes it very easy to target one set of device width and not have those styles "leak" over into others. However it can also mean you may need to duplicate CSS that you would rather have cascade.

To use custom media queries the sub-theme includes a special file called:
responsive.custom.css

To enable the use of this file in your theme see your theme settings:
Layout & General Settings > CSS > Custom Media Queries
This file has embedded media queries which means you MUST set them yourself. Defaults are provided.

Hi!

I think I'm near of the solution but there's something wrong as you can see in the attached file. The menu don't get the right css, some textbox are larger ...

Others css need to be copied in the css subtheme directory?

I have read this section of the readme file but it's not clear how to set the files as in Layout & General Settings > CSS > Custom Media Queries i can't select any files because the textbox is read only. i attached the second screenshot.

Do you think i need to add the Saas directory too?

Thank you for your help i'm not very far to start with my own subtheme !!

Antonio

Hi,
I find the problem but i don't have any idea how to resolve it.

Templates pages in //profiles/commons/themes/contrib/commons_origins/templates are not applied to the page when the new sub-theme of commons is on.

As an example with my the new subtheme the main menu of commons have this code:

<div class="block-content content">
<ul class="menu clearfix">
<li class="first leaf active-trail main-menu-home menu-depth-1 menu-item-202">
<a class="active-trail active" href="/ifr73dev/home">
</li>
<li class="leaf main-menu-groups menu-depth-1 menu-item-203">
<li class="leaf main-menu-events menu-depth-1 menu-item-810">
<li class="last leaf main-menu-search menu-depth-1 menu-item-809">
</ul>
</div>

With Original Commons theme

<div id="menu-bar" class="nav clearfix">
<nav id="block-system-main-menu" class="block block-system block-menu no-title menu-wrapper menu-bar-wrapper clearfix" role="navigation">
<ul class="menu clearfix">
<li class="first leaf active-trail main-menu-home menu-depth-1 menu-item-202">
<a class="active-trail active" href="/ifr73dev/home">
</li>
<li class="leaf main-menu-groups menu-depth-1 menu-item-203">
<li class="leaf main-menu-events menu-depth-1 menu-item-810">
<li class="last leaf main-menu-search menu-depth-1 menu-item-809">
</ul>
</nav>
</div>

All the tags with ID are not applied : id="menu-bar", id="block-system-main-menu"

I try to copy the templates folder in the sub theme but without result. If anybody know how to configure properly sub theme and templates i will be happy to hear some response of this headache puzzle :)

Thank you!

Antonio

Can someone maybe post the commons_origins theme including a subtheme in a zip file?
We can work from there then?

greetings, Martijn

It will likely be better not to use the entirety of an Adaptive subtheme. It will be too heavy for simple css changes. You will end up with a very large chunk of css and php overrides that you will not want or need.

To make things simpler, create a directory for your theme, and in the .info for it, add a line of base theme = commons_origins. From there, use the standard stylesheet[all][] entries for your overrides. Your theme will inherit all of the styles of Commons Origins without a lot of extra weight. I have not tried this personally, but it should work as it is just using standard Drupal functionality.

If you want more information, the Drupal 7 theming documentation should be more than enough to get you up and running. The at_subtheme is really only intended for a singular instance and not to be stacked one after another. After the first one, it is best to use the lighter core approach.

A quick freehand theme.info for you to start with:

name = Theme name
description = A short summary
base theme = commons_origins
stylesheets[all][] = styles.css

Hi @gr8britton, Are you willing to winzip your theme including subtheme so that others can move from there?

Hello,

The #8 is not the solution as you don't create a new subtheme. This solution only add a reference in the .info file with a custom css.

What i was trying to do is a subtheme of commons_origins and i didn't find how to solve the #15. I think i'm close but only if an expert try to do it we will have a response :=P.

thank you to reactivate this post :=) i m still waiting how to solve this!

Antonio

Hi,
Please someone post his/her subtheme as winzip and maybe also the changes in commons_origins.
greetings, Martijn

I hve taken some time to dig into this thing a bit more, and I personally want people to be able to subtheme this system. The .info solution works to some extent, but it is not optimal. It will require placement of the main menu in the menu_bar region. This will get all the blocks that are using the core blocks configuration in place. Since everything else in the distribution is using Panels, they are already in the appropriate region.

The layout css is where things start falling apart. Part of the Adaptive core functionality is configuration of Panel layouts from the admin. To do this, it takes all of the theme's settings and generates a css file and loads it from the site's files directory. I am seeing if there is something I can do to make this work. This is important, personally, as it is best to not touch files in the contributed theme or add files to it.

So to summarize, a subtheme works, it is just missing styles for panel layouts.

After some more experimentation, a subtheme of Commons Origins is possible. The basic structure for the .info file is as follows:

name = Test theme
description = A test theme of commons origins.
base theme = commons_origins
core = 7.x

regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second
regions[content] = Main Content
regions[highlighted] = Highlighted
regions[content_aside] = Aside
regions[secondary_content] = Secondary
regions[tertiary_content] = Tertiary
regions[footer] = Footer
regions[leaderboard] = Leaderboard
regions[header] = Header
regions[menu_bar] = Menu Bar
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom

This will allow Drupal to validate the theme and have all the regions defined. If this is how your .info is structured before activation, all of your blocks will fall into place. If you previously did not have the regions defined before activating, you will need to jump into the blocks admin and shuffle some things around. The biggest seems to be that main menu will need placed in the menu_bar region.

When you look at the theme, the content will be in a single column. This is because at_core has not generated the css based on the configuration. To do that, visit your theme's settings page (in my case, admin/appearance/settings/test_theme) and simply save it. This will kickstart Adaptive Theme's css generation functionality build the appropriate files.

I have tested this on a fresh install, and it worked fine. The further along your individual projects are, the less I am going to be able to predict your success. I can't see there being many issues unless you have altered the Commons Origins code.

Worked for me too. My problem was main menu was not placed in the menu_bar region!
Thank you Zarabadoo!

Hi, anyone can post his subtheme please? Or is making this info file enough?
greetings, Martijn

@Summit Making an empty theme directory with this info is enough.

Just a summary to start doing basic CSS customization using this thread:

Create Folders

Location

From http://drupal.org/node/225125">sub-theming
create folder in: sites/example.com/themes/ ("example.com" stands for your site name)
or,
if you want to use your sub-theme for several sites, inside: sites/all/themes/

Folder Name

Name your theme and create a folder with that name: myNewSubThemeName
create sub folder of myNewSubThemeName, named "css"

Create files

create myNewThemeName.info file in your myNewSubThemeName folder
Basic info for this file:

name = Commons Origins Subtheme
description = A test theme of commons origins.
base theme = commons_origins
core = 7.x
;----------// Stylesheets
 stylesheets[screen][] = css/custom.css

regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second
regions[content] = Main Content
regions[highlighted] = Highlighted
regions[content_aside] = Aside
regions[secondary_content] = Secondary
regions[tertiary_content] = Tertiary
regions[footer] = Footer
regions[leaderboard] = Leaderboard
regions[header] = Header
regions[menu_bar] = Menu Bar
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom

create "custom.css" in the sub folder myNewSubThemeName/css
basic information

/*
 * @file
 * custom.css
 *
 *Drupal Commons Origins theme overrides
 */

Ownership and Permissions

change owner, group and permissions of folder and file you created
chown to appropriate owner and group (look at other themes and use that)
chomd 775 (or like other theme files and directories)

Enable Theme

Navigate to mysiteurl/admin/appearance
Scroll to your new theme.
Enable your theme (You may have to refresh the page for you new theme to show up.).
Wait for page refresh and then click settings for you new theme.
If you want to make changes do so. Even if you don't make changes, click Save for your default theme settings to take effect.

Customize CSS

Modify your custom.css file to add your fancy new css which will override the theme's.
To test, add something like p { color: red; } into the file and see if it turns paragraphs red. You may need to clear Drupal Cache and your browser's cache.
If you look at the page source of your webpage you should find your sub-theme path in the style settings of the page.

Edit:
Hints if you have issues:
Make sure to turn off caching admin/config/development/performance

Thanks all!

@markbannister the consolidated instructions in #35 are fantastic.

I had to add one small step for my sub-theme to work: copy logo.png from profiles/commons/themes/contrib/commons_origins into the folder that contains the subtheme

You'll also have to upload your new logo as well if you're not using the stock one.