Demo theme [$15 awarded]

[jancborchardt]

Create a very simple demo theme showing what can be changed. Use just CSS, images and the defaults.php – NO TEMPLATE CHANGES.

Anyone interested, @owncloud/designers?

cc @karlitschek @schiesbn @DeepDiver1975

[karlitschek]

good idea. Should be a junior job for some new.

[DeepDiver1975]

The demo theme should be delivered together with the theming howto - a must have

[karlitschek]

I would put it somewhere on github and link it from the theming how to in the documentation.

[DeepDiver1975]

I would put it somewhere on github and link it from the theming how to in the documentation.

sounds good - but we need both - actually now ;-)

[jancborchardt]

I’ll start with that tomorrow then.

[johnmanko]

You can use my example to start. It customizes the logos and footer text. I'd like to add it to the sample themes you provide.

http://forum.owncloud.org/viewtopic.php?f=23&t=13298&p=34070&hilit=file+version#p34070

[DeepDiver1975]

I’ll start with that tomorrow then.

@jancborchardt tomorrow is long gone 😉

[MorrisJobke]

@12005 Want's to try to prepare a theme demo. She is preparing for OPW program and I suggested this as a starter issue. For some reason I can't assign this issue to her ... maybe because her username is just numbers. (I will contact GitHub support)

[MorrisJobke]

@karlitschek Or is it possible that this is because she isn't in any owncloud team here at github

[karlitschek]

@MorrisJobke I don't think so. We have successfully mentioned other people before. On purpose or by accident. ;-)

[MorrisJobke]

@karlitschek Not mentioning - assigning to this issue. ;)

[jancborchardt]

Yeah, for assingning people, they need to be part of the organization. She needs to fill out the CLA to be added.

[anjanasasindran123]

Hello,I'm currently working on this junior job.Can someone please mention the important stuff should be included in the file.?

[MorrisJobke]

Hello,I'm currently working on this junior job.Can someone please mention the important stuff should be included in the file.?

@jancborchardt What attributes do you want to change? Background, header logo, text-size, icons?

[jancborchardt]

@anjanasasindran123 what should be changed by the example theme is:

• logo: for log in, for when logged in, and the favicons (originals in core/img)
• header color for when logged in (original in core/css/styles.css)
• background color for the log in screen (original in core/css/styles.css)
• color of the primary action button, for example log in (original in core/css/styles.css)
• name and slogan (original in lib/private/defaults.php)

Those are the most common things that probably everyone who wants to customize wants to change. Can you think of anything else?

[anjanasasindran123]

Hello,I'm now working on this,I'm not able to change the logo I replaced the line no 86 in style.css with background-image: url(../img/tulip.jpg); But still not working!Can someone please help me out?

[anjanasasindran123]

Is there any problem with .jpg extension?

[DeepDiver1975]

• Did you enable the demo theme?
• Did you add the svg variant of the logo as wll?
• Push the code to github - we can then easier have a look

[anjanasasindran123]

No,I have not enabled the demo theme.

Did you add the svg variant of the logo as wll?

What is this wll?I have not added the svg variantof logo.What I have ever did was that,I replaced the logo.svg with tulip.png and I deleted the logo.svg from core/img
I tried to push it ,But I'm not able to do it successfully(I'm getting some sort of errors).I will try to do it again.
I'm totally new to all these stuffs,So I'm not familiar with your technical terms and stuffs.Please forgive me

[DeepDiver1975]

@anjanasasindran123 to learn git go here: http://try.github.io/levels/1/challenges/1

[DeepDiver1975]

@anjanasasindran123 I'll post some documentation about 'How to write a theme?' soon

[anjanasasindran123]

@DeepDiver1975 Ok ,Thank you, I hope with that documentation I can do better.
@jancborchardt I had send you a CLA two days ago,I request you to please go through it and assign this junior job to me.

[jancborchardt]

@anjanasasindran123 the CLA needs to be sent to @karlitschek.
Regardless if we assigned the issue to you or not you can already work on it. :)

[anjanasasindran123]

@jancborchardt Yeah! For last few days and still I'm working on this.I'm preparing for OPW and since I have not done my inital contribution ,I need to mention about this junior job.So I guess If I'm assigned to this, it will make more sense that I'm working on this particular one. I send the CLA to karlischek.

[DeepDiver1975]

Theming ownCloud

ownCloud provides the ability to customize its look and feel without the need
to patch the source code. This functionality is known as Theming.

This document will first discuss the “How-to” of basic theming then go into an
example on basic theming an ownCloud instance.

Configuration

The themes directory within ownCloud is the container for all theming files.
A folder with the name of the theme should be placed within the themes
directory and linked to ownCloud via the config.php file.
The folder structure of a theme has to be exactly the same as the main ownCloud
structure (owncloud/core for example).

It is possible to override js files, images, and templates and css files with
customized versions.

Configuration file

The ownCloud config.php file contains the link to the theme.
When developing a theme, enter the following line into config.php:

  "theme" => 'themename';

Here, themename is the folder in the themes directory.

Customize the logo

In order to customize the logos, create images which meet the specs below and
place them in the themes/core/img directory within the ownCloud instance.

Logo.svg

This is the splash screen logo appearing above the login page of the ownCloud
instance (SVGs can be created with Adobe Illustrator or Inkscape).  The size of
this image is approximately 252x122 pixels.  Any larger and the logo will
not fit properly on the page.

Logo-wide.svg

This is the little logo that appears in the top left of the ownCloud navigate
frame. The size of this image is 140x32 pixels. Though the width may be
larger to meet your needs, the height is fixed.

Changing Colors

The color scheme is stored in the style.css file within the
owncloud/core/css folder.

To change the color of the header bars, copy the core/css/style.css
to themes/<themename>/core/css/style.css and edit.

Below is shows part of the style.css file which contains the colors.
There are several locations within this file that assign colors.
Scroll through the file to find the desired location and modify as required.

  #body-login {
          text-align: center;
          background: #1d2d44; /* Old browsers */
          background: url('../img/noise.png'), -moz-linear-gradient(top, #35537a 0%, #1d2d44 100%); /* FF3.6+ */
          background: url('../img/noise.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#35537a), color-stop(100%,#1d2d44)); /* Chrome,Safari4+ */
          background: url('../img/noise.png'), -webkit-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* Chrome10+,Safari5.1+ */
          background: url('../img/noise.png'), -o-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* Opera11.10+ */
          background: url('../img/noise.png'), -ms-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* IE10+ */
          background: url('../img/noise.png'), linear-gradient(top, #35537a 0%,#1d2d44 100%); /* W3C */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35537a', endColorstr='#1d2d44',GradientType=0 ); /* IE6-9 */
  }

  #owncloud { float: left; }

This section of code handles the headers for many different browser types.
The default colors in the above example are #33537a (light blue) and
#1d2d42 (dark blue). Some older browsers have only one color, however,
most have gradients.

The login page background is a horizontal gradient. The hex #33537a
is the top color of the gradient at the login screen. The #1d2d42
is the bottom color of the gradient at the login screen.

To change the colors, modify these entries with the desired hex color code_.

.. _hex color code: http://cloford.com/resources/colours/500col.htm

[DeepDiver1975]

@anjanasasindran123 have a look at the excerpt from the docus about theming owncloud

[rakekniven]

Created a bounty for it: https://www.bountysource.com/badge/issue?issue_id=906230

[MorrisJobke]

cc @gig13 @cdamken asked about proper theme documentation so this would be a good way to show the possibilities of themes.

[jon-tlmi]

I have a question about this. I'm currently creating a theme, I'd be happy to contribute an example once I'm done getting my head around it.
Currently, once a theme is created, it then completely replaces all of the core files with those from the themes directory. This means that unless you copy across all the css and img from core, your ownCloud loses all icons, overlays because [theme name]/img/file is not found. The default behaviour with some of the other platforms I've worked with has been to replace core/img/[some file] with themes/[theme name]/img/[somefile] if it exists BUT if it doesn't exist in [theme dir], then it should use the file from core.
My question is: is this the expected behaviour for ownCloud?

[MorrisJobke]

@jon-tlmi THis sounds like a bug. Your described behaviour with just overwriting stuff with the exisiting files in themes and fallback to the shipped templates/icons/css sounds reasonable

[jon-tlmi]

ack. Sleep deprivation. I'd copied over the css file from /core and not deleted the relevant parts. This works fine..
What's the markdown for a facepalm?

[MorrisJobke]

😵 🌴 ? 😃

[jon-tlmi]

OK, there's a super simple theme here:
https://github.com/jon-tlmi/themes
Changes the logo, a gradient value and generally shows how a whiteboxing ownCloud should work by replaces things like defaultEntity, defaultTitle and all that stuff.
As requested higher up, there are NO templates changed. Comments are not overly detailed, but I feel if you're digging this deep, you should be a decent enough web dev/designer to understand what you're doing, you just need an example to start you off...
I'm not very experienced with github so I didn't want to kick off any pull requests without someone else casting an eye over it. Code is provided free of copyright and free of support as my job is taking me away from this ;-) It works on my ownCloud install

[jon-tlmi]

OK, the theme I posted earlier has been worked on a bit more - I'm prepared to support it with some more work if someone wants to look it over. Should I create a pull request to replace the current (and very limited) demo theme in owncloud / themes ?

[jancborchardt]

Pull request at #16519

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.