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

[hippykilla]

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
<http://owncloud.10557.n7.nabble.com/file/n9996/image_core_folder.jpg> 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 <https://creative.adobe.com/>  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:
<http://owncloud.10557.n7.nabble.com/file/n9996/owncloud_edit_view_vector.jpg>
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:
<http://owncloud.10557.n7.nabble.com/file/n9996/owncloud_logo_edit_adobe_AI.jpg>
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. 
<http://owncloud.10557.n7.nabble.com/file/n9996/owncloud_logo_change_example.jpg>
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 to https://myowncloud9.com/owncloud9/to see it live. 



--
View this message in context: http://owncloud.10557.n7.nabble.com/Changing-Logo-s-Rebranding-Helpful-Hints-Step-by-step-tp9996.html
Sent from the ownCloud mailing list archive at Nabble.com.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.kde.org/pipermail/owncloud/attachments/20130704/0d2b704c/attachment.html>