Branding ownCloud versions 7 and 8

If this Article helps you in ANY way, please Mark as Helpful :)

A new surge in IT data security has prompted many people to explore self-hosted, secure file-sharing systems. One of the more popular choices is ownCloud (http://www.ownCloud.org) - an Open Source project free for anyone to use. Working with ownCloud does require a minimum level of computer and coding knowledge, but is definitely not something that the average ambitious computing nerd should shy from. One of the first things some people do after getting ownCloud up and running is Branding the installation. ownCloud does have documentation to assist but many, including myself, have found the provided docs to be lacking in clarity.

To assist with this, I have created a base document to be used by those of you who are struggling with the basic initial branding of ownCloud versions 7 and 8. This Article is less of a standard document and more of a list of paths, locations, and description of the items in which to modify for Branding purposes. It specifically focuses on Branding the Web portal by modifying the original code on the Web Server and does not address the desktop clients or mobile device Apps.

*NOTE* Before changing these files and images, make sure to take a full backup of your ownCLoud directory. Copy the folder somewhere to a separate drive. I highly recommend you also create a folder called ‘Original’ in every directory you edit any files in, and place the original file into that folder before writing over or editing the files.
*NOTE* Be sure to download the program Notepad++ to easily view and edit the various .PHP and .CSS files with the comments visible. Using another file editor may not provide you an easy-to-view layout of the coding lines and will most likely remove any ‘coder comments’ from view. Notepad++ also allows editing of pretty much all  non-MS coding file types – java, C++, php, txt, css etc.  I live in Notepad++ while working with websites. You can optionally use a Web Development program such as Dreamweaver, but those programs can be cost prohibitive.
*NOTE* You need to understand that most paths for image files in ownCloud coding point to ‘.SVG’ files but the actual pictures are ‘.PNG’. This can be confusing because the .SVG is actually a web file that points to the ‘.PNG’. When you replace the ‘.PNG’ file ownCloud should use the new image – if not, you may need to use a .png to .svg conversion utility or recreate the .svg.
 

• Logos:
• \(OWNCLOUD ROOT FOLDER)\core\img
  
  • logo.png  | 252x122 pixels max -> Main Logo
  • favicon.png | 14x14 or 16x16 or 32x32 pixels |This is the icon that appears on the web browser to the left of the Web Site name
  • favicon-touch.png | 128x128 pixels | Not sure where this displays
  • loading.png | 32x32 | When something is lading, this displays
  • logo-icon.png | 62x34 pixels | Displays at the top-left of the main screens next to the drop-down arrow for the App Navigation Menu
  • logo-mail.gif | 252x122 pixels | Displays in the Header bar of notification emails
  • logo-wide.png | 150x36 pixels | Displays in some notifications and some emails, depending on the device used.

I suggest you use the same image for logo.png, logo-mail.gif, and logo-wide.png but size them accordingly.   
 

• Links and Slogans:
•   \(OWNCLOUD ROOT FOLDER)\lib\private\defaults.php
• 'XXXXXXXXXX' = variables you change to match your installation.
  
  • LINE 33: defaultEntity = 'XXXXXXXXXXXX';
    - company name, used for footers and copyright notices
  • LINE 34: defaultName = 'XXXXXXXXXX';
    - short name, used when referring to the software
  • LINE 35: defaultTitle = 'XXXXXXXXXX';
    - can be a longer name, for titles
  • LINE 36: defaultBaseUrl = 'http://XXXXXXXXXX’;
    - replaces the default links leading to ownCloud.org with your web site
  • LINE 37: defaultSyncClientUrl = 'https://owncloud.org/sync-clients/';
    - where to download the ownCloud Client Sync Software (PC desktop) - You may also mofidy it to point to your own repository
  • LINE 38: defaultiOSClientUrl = 'https://itunes.apple.com/us/app/owncloud/id543672169?mt=8';
    - web site to download the IOS App - You may also mofidy it to point to your own repository
  • LINE 39: defaultAndroidClientUrl = 'https://play.google.com/store/apps/details?id=com.owncloud.android';
    - web site to download the Android App - You may also mofidy it to point to your own repository
  • LINE 40: defaultDocBaseUrl = 'http://XXXXXXXXXX’;
    - web site link to the ownCloud documentation
  • LINE 41: defaultDocVersion = $version[]0] . '.0';
    - used to generate doc links
  • LINE 42: defaultSlogan = $this->l->t('> XXXXXXXXXX’);
    - default slogan anywhere displayed - Eg/ At bottom of login page
  • LINE 43: defaultLogoClaim = ' ';
    - I do not know what this is
  • LINE 44: defaultMailHeaderColor = '#XXXXXX';
    - header color of mail notifications

A couple of page refreshes, perhaps close and re-open the browser, and voila! You now see your personally Branded ownCloud :)

Don't Forget To Mark as Helpful!

Join my Group about ownCloud to share what you have done to make ownCloud more usable for everyone!
http://www.experts-exchange.com/groups/ownCloud.html

Look for my Article on customizing the App icons!