Changing Logo's Rebranding- Helpful Hints Step by step

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

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). Imageimage folder directory within owncloud 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: Vector Logo .svg file editing for owncloud 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: Export owncloud logo.png file 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. MyOwnCloud9 Owncloud Server Logo 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.
Reply | Threaded
Open this post in threaded view
|

Re: Changing Logo's Rebranding- Helpful Hints Step by step

hippykilla

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: [hidden email] [mailto:[hidden email]] On Behalf Of hippykilla
Sent: Thursday, July 4, 2013 7:53 AM
To: [hidden email]
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). Imageimage folder directory within owncloud 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: Vector Logo .svg file editing for owncloudNow 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: Export owncloud logo.png fileNow, 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. MyOwnCloud9 Owncloud Server LogoThe 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
Sent from the ownCloud mailing list archive at Nabble.com.


_______________________________________________
Owncloud mailing list
[hidden email]
https://mail.kde.org/mailman/listinfo/owncloud
Reply | Threaded
Open this post in threaded view
|

Re: Changing Logo's Rebranding- Helpful Hints Step by step

Daniel Molkentin
<base href="x-msg://110/">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
 
From: [hidden email] [mailto:[hidden email]] On Behalf Of hippykilla
Sent: Thursday, July 4, 2013 7:53 AM
To: [hidden email]
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). Imageimage folder directory within owncloud 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: Vector Logo .svg file editing for owncloudNow 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: Export owncloud logo.png fileNow, 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. MyOwnCloud9 Owncloud Server LogoThe 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.

_______________________________________________
Owncloud mailing list
[hidden email]
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)


_______________________________________________
Owncloud mailing list
[hidden email]
https://mail.kde.org/mailman/listinfo/owncloud
Reply | Threaded
Open this post in threaded view
|

Re: Changing Logo's Rebranding- Helpful Hints Step by step

hippykilla
<base href="x-msg://110/">

Happy to contribute where I can.

 

From: [hidden email] [mailto:[hidden email]] On Behalf Of Daniel Molkentin
Sent: Thursday, July 4, 2013 8:36 AM
To: [hidden email]
Subject: Re: [Owncloud] Changing Logo's Rebranding- Helpful Hints Step by step

 

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

 

 

From: [hidden email] [[hidden email]] On Behalf Of hippykilla
Sent: Thursday, July 4, 2013 7:53 AM
To: [hidden email]
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). Imageimage folder directory within owncloud 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: Vector Logo .svg file editing for owncloudNow 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: Export owncloud logo.png fileNow, 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. MyOwnCloud9 Owncloud Server LogoThe 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.


_______________________________________________
Owncloud mailing list
[hidden email]
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)

 


_______________________________________________
Owncloud mailing list
[hidden email]
https://mail.kde.org/mailman/listinfo/owncloud
Reply | Threaded
Open this post in threaded view
|

Re: Changing Logo's Rebranding- Helpful Hints Step by step

hippykilla
In reply to this post by Daniel Molkentin
<base href="x-msg://110/">

Re-wrote this to be documentation material and issued a pull on github here https://github.com/owncloud/documentation/pull/140

Let me know if you would like anything added, corrected or if you just do that yourself. Not sure. Hope this is helpful to someone.

 

Handle on github is ‘hippykilla’    Old MOH gamer handle. J

 

From: [hidden email] [mailto:[hidden email]] On Behalf Of Daniel Molkentin
Sent: Thursday, July 4, 2013 8:36 AM
To: [hidden email]
Subject: Re: [Owncloud] Changing Logo's Rebranding- Helpful Hints Step by step

 

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

 

 

From: [hidden email] [mailto:[hidden email]] On Behalf Of hippykilla
Sent: Thursday, July 4, 2013 7:53 AM
To: [hidden email]
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). ImageImage removed by sender. image folder directory within owncloud 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: Image removed by sender. Vector Logo .svg file editing for owncloudNow 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: Image removed by sender. Export owncloud logo.png fileNow, 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. Image removed by sender. MyOwnCloud9 Owncloud Server LogoThe 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.


_______________________________________________
Owncloud mailing list
[hidden email]
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)

 


_______________________________________________
Owncloud mailing list
[hidden email]
https://mail.kde.org/mailman/listinfo/owncloud
Reply | Threaded
Open this post in threaded view
|

RE: Changing Logo's Rebranding- Helpful Hints Step by step

hippykilla
In reply to this post by Daniel Molkentin

Were you able to located my draft of the instructions and pull request in github. Not sure I submitted it correctly. Just making sure. Thank you.

 

HK

 

From: Daniel Molkentin [via ownCloud] [mailto:[hidden email]]
Sent: Thursday, July 4, 2013 8:37 AM
To: hippykilla
Subject: Re: Changing Logo's Rebranding- Helpful Hints Step by step

 

<base href="x-msg://110/">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

 

 

From: [hidden email] [mailto:[hidden email]] On Behalf Of hippykilla
Sent: Thursday, July 4, 2013 7:53 AM
To: [hidden email]
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). ImageImage removed by sender. image folder directory within owncloud 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: Image removed by sender. Vector Logo .svg file editing for owncloudNow 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: Image removed by sender. Export owncloud logo.png fileNow, 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. Image removed by sender. MyOwnCloud9 Owncloud Server LogoThe 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.


_______________________________________________
Owncloud mailing list
[hidden email]
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)

 


_______________________________________________
Owncloud mailing list
[hidden email]
https://mail.kde.org/mailman/listinfo/owncloud


If you reply to this email, your message will be added to the discussion below:

http://owncloud.10557.n7.nabble.com/Changing-Logo-s-Rebranding-Helpful-Hints-Step-by-step-tp9996p9998.html

To unsubscribe from Changing Logo's Rebranding- Helpful Hints Step by step, click here.
NAML

Reply | Threaded
Open this post in threaded view
|

Re: Changing Logo's Rebranding- Helpful Hints Step by step

hippykilla

You can find detailed instructions here:

https://raw.github.com/hippykilla/documentation/5597948454b801121a64c45b06937b367e5dbb6b/admin_manual/Logo/Branding%20procedures

 

From: [hidden email] [mailto:[hidden email]] On Behalf Of hippykilla
Sent: Friday, July 5, 2013 3:20 PM
To: [hidden email]
Subject: Re: [Owncloud] Changing Logo's Rebranding- Helpful Hints Step by step

 

Were you able to located my draft of the instructions and pull request in github. Not sure I submitted it correctly. Just making sure. Thank you.

 

HK

 

From: Daniel Molkentin [via ownCloud] [mailto:[hidden email]]
Sent: Thursday, July 4, 2013 8:37 AM
To: hippykilla
Subject: Re: Changing Logo's Rebranding- Helpful Hints Step by step

 

<base href="x-msg://110/">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

 


View this message in context: RE: Changing Logo's Rebranding- Helpful Hints Step by step
Sent from the ownCloud mailing list archive at Nabble.com.


_______________________________________________
Owncloud mailing list
[hidden email]
https://mail.kde.org/mailman/listinfo/owncloud
Reply | Threaded
Open this post in threaded view
|

Re: Changing Logo's Rebranding- Helpful Hints Step by step

jharvey1029
In reply to this post by hippykilla
Guys,

If like me you have your own logos but they are not .SVG, follow this guide.

The easiest way to change the default logo's at both login page and the one logo inside the cloud (top left) is to make some minor changes to just 2 files.

There are two files that decide what types of images are to be displayed. These files are:
layout.guest.php (login page) & layout.user.php (inside cloud page)

These two files can be found: owncloud/core/templates

When you open these files be very careful. ONLY change the part that contains: "logo.svg" or "logo-wide.svg" and change this to whatever your logo name is.

Note: logo-wide.svg is the logo within the cloud (top left) and logo.svg is the logo at the login page above the user/pass boxes. So make sure your own logos are the same size as those that you are going to replace.

REMEMBER: upload your own logos to the "owncloud/core/img" directory otherwise it will send you in a spin.


And thats how its done... You Are Welcome