[Owncloud] Changing Logo's Rebranding- Helpful Hints Step by step

Thu Jul 4 15:35:49 UTC 2013

It would be nice if those kind of things would end up in the official documentation. Would you mind contributing, see https://github.com/owncloud/documentation/blob/stable5/CONTRIBUTING.rst.

Cheers,
  Daniel

Am 04.07.2013 um 17:30 schrieb Derek Broes:

> I have also added these instruction for changing the owncloud logo to this forum site of mine I put up quickly
> http://owncloudconfig.com/index.php?topic=3.msg4#new
>  
>  
> From: owncloud-bounces at kde.org [mailto:owncloud-bounces at kde.org] On Behalf Of hippykilla
> Sent: Thursday, July 4, 2013 7:53 AM
> To: owncloud at kde.org
> Subject: [Owncloud] Changing Logo's Rebranding- Helpful Hints Step by step
>  
> I wanted to change the logo in my Owncloud install so I went to the theming section. Although the instructions for editing and overwriting the JS and CSS is fairly clear I was surprised that so little work has been done on themes considering the amount of people involved within this community. In my experience with other platforms such Joomla and wordpress, the Themes really helped drive the advancement of features as someone with a artistic mind could always create a would be feature that was simply a graphic alteration that then lead to development to make the product better. In the platforms mentioned above, the themes give the platform a better experience. If you examine wordpres, just imagine what it would be without themes. They give it a new life daily and not just when a new version is released. I really think we need to focus on this area and to recruit more people for that purpose alone. The fact that I cannot find 1 single custom theme to download and try out is shocking considering just how useful Owncloud is. So, with that, I started with the logo's because I found many people having issues with these changes. The challenge is the fact that Owncloud uses a combination of files to generate a single image. So, here is some guidance for editing logos and if you follow this you will save yourself the many hours I spent figuring out these simple steps to editing Ownclouds logos. First, you need to make a copy of the image folder from the owncloud folder. The specific folder. You can find it in /owncloud/core/img/. Copy the entire /img/ folder to your desktop. Make a 2nd copy of that folder and name it edited files. The reason for the copy is, you want to maintain a clean unedited copy of all of the files because you will be overwriting the files in one folder on your desktop and the files within the /img/ folder on the server. Always good to have a clean version to just drop back into the server. You will most likely make a few mistakes and this folder copy will save you some hair loss. I use filezolla to locate this folder and drag and drop copies onto my desktop. (see image of directory location). Image Once you have done this you can begin editing the files. Now you don't have to be a graphic artist to do this. After all, I am newbie dev guy and far from a graphic artist but I was able to do this. I suggest getting a free trial of Adobe Illustrator. Their new creative cloud is lean and fast and the free trial is fully featured. Go here to sign up for the free trial. Adobe Creative cloud First edit the larger logo. This is the one that you see first when you open the login page. The name of that file is simply 'Logo". You will NOT be editing the .PNG version of this logo individually so don't even open it. In the IMG folder you will see two files with the name "logo" among other duplicate named files. You only want to open and edit the .SVG versions. These versions might look like an HTML page icon and that's because they are. These are not really a graphics file per say. The graphics in these files is based on actual code underneath however Adobe AI handles the code and you just edit the pretty pictures. (This is the biggest confusion I have read with regards to people editing the logos in owncloud). Open the file logo.svg from within adobe. Do not change the size of the graphic unless you know what you are doing. Just click the +plus (enlarge) option to zoom in for a large view to edit. Now this is where many get confused. When you open this file it will appear to be a blank logo. It is not blank but appears that way because the logo is white and against a transparent background and it is shown as a vector format so you have to click the logo to see where it is. If you add anything with color it will appear. See image: Now this is fast an easy so pay attention. :-) You can edit the logo as you please including colors, logo images etc. Just stay within the margins of the file template and all will be fine. Stay clear of the edges by a few pixles. Now, when you are ready to save you logo, do just that. Click save. Do not 'save as' or anything else just save. Now, the easy, tricky and elusive part that get's so many people lost. Remember I said you will not edit the .PNG file? Correct. You do not edit it but you will overwrite that file now. After you click save now go to the file menu in Adobe AI and scroll down to "export'. Click 'export' and a window will open. Change the file setting to .png but do not change the name of the file. Once you change to .png you will see all of the files in the window appear that are .png. Just locate the logo.png file and double click it. It will ask you if you want to overwrite the file (click yes). An additional window may or may not come up depending on what graphics you added or fonts. If you used google fonts or typical internet fonts this won't be an issue. If you chose some fancy obscure font, people that do not have that font installed on their machine will not see the font in the logos when they open owncloud. They will simply see whatever font is the easiest font for their browser to use. You see, this isn't just a graphics file. See image of export option: Now, do the same thing for the logo-wide.svg file and whatever other graphics you intend on changing. I suggest sticking to the logo for now. Once you have edited all of these files to your liking. Now it's time to put them on the server. Just grab the files and drag and drop into your FTP program into the /owncloud/core/img/ folder. Click 'overwrite file' when the program asks you. Viola, you have new logos for owncloud. Navigate to your owncloud server in your browser and open your site. You may need to empty your browser cache and maybe do a few browser screen refreshes but the new logo's will appear. Here is a shot of my example on my server installed on Godaddy shared hosting (within unlimited storage and unlimited bandwidth). :-) I like that part. The logo (albeit smaller) also appears when you login and I have changed some of the favicon. This particular server is attached to a wordpress site of the same name (although incomplete as of writing this). Credential for users on my wordpress site are linked to owncloud for default users. If anyone needs any help or has issues during this process, feel free to write me and I will try to get to any questions. I am not a full time developer or graphics person to say the least and I think you can see that by the quality of my logo. JUst a curious corporate executive with some creative juices and a PC as well as a few powerful servers I get to play with aside from the cheap godaddy hosting servers. Hope this helps someone and if I should be posting this elsewhere, please direwct me and I will happily add on a site with the screen shots included. If you want to visit this owncloud site you can navigate tohttps://myowncloud9.com/owncloud9/ to see it live.
> View this message in context: Changing Logo's Rebranding- Helpful Hints Step by step
> Sent from the ownCloud mailing list archive at Nabble.com.
> _______________________________________________
> Owncloud mailing list
> Owncloud at kde.org
> https://mail.kde.org/mailman/listinfo/owncloud

--
www.owncloud.com - Your Data, Your Cloud, Your Way!

ownCloud GmbH, GF: Markus Rex, Holger Dyroff
Schloßäckerstrasse 26a, 90443 Nürnberg, HRB 28050 (AG Nürnberg)

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.kde.org/pipermail/owncloud/attachments/20130704/489f0861/attachment.html>