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

[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
<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.jp
g> 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: Changing Logo's Rebranding- Helpful Hints Step
by step
<http://owncloud.10557.n7.nabble.com/Changing-Logo-s-Rebranding-Helpful-Hint
s-Step-by-step-tp9996.html> 
Sent from the ownCloud mailing list archive
<http://owncloud.10557.n7.nabble.com/>  at Nabble.com.

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