Hi!!!
So recently, I’ve been getting a lot of emails about help with a certain thing on HTML and because I still struggle with HTML even through my four years of being on Viki, I thought that this would be the perfect chance to help my fellow Vikians with HTML’s!
Also, I noticed that the number of page designers have decreased. Many of my Vikian friends who were also designers are not active anymore, sadly. Currently, we only have around 4-6 page designers on Viki, which isn’t too bad, but when we’re all busy with our personal lives and page designs already on Viki, we kind of… struggle.
Please note that I am not a HTML wizard or anything… I am still struggling myself. Haha
On my profile page (https://www.viki.com/users/babyinspiritestar1/about), if you scroll all the way down, I have made a little corner about page design help. Currently, I only have one video—how to make tables. I tried my best to make it as simple as possible, but if you’d like a more in dept explanation, feel free to PM me. Also feel free to PM me with any questions or any other videos you’d like to see.
Also, feel free to comment any other HTML tricks here to help the fellow Vikians or any questions you may have.
I’m writing here rather than in a p.m. because maybe others have the same problem.
First of all thank you for your useful guide! It’s so nice of you to share your experience.
The problem I’m having.
I made a picture for a cover page with the usual dimensions: 800 width and about 6000 length, with 95dpi, and I saved it as medium quality so as not to ecceed 600 MB (whereas I’ve seen others of 2 MB and larger). I saved it as .jpg (but later on I tried with .png, the results were exactly the same)
I prefer uploading to viki rather than to a 3rd party website which may close or become paying and delete my pictures etc.
However, when I tried to upload it and save it to the viki server, it refused to do so.
When I clicked “Send to the server”, it loaded for a bit and then the address where it showed the filename became gray. And then a message saying that there is no source address. This again and again. I tried closing the page and starting all over again, it didn’t help.
What may be the matter? It’s a pity, I worked for hours to make this!
I think it’s a matter of size, because I tried uploading a small one of 200kb and it immediately inserted it.
But again, I’ve seen other coverpages of more than 1-2 MB. The truth is they are not as pictures but as div. If you want you can download them as pictures, but if you view them in the editor they are divs.
I thought I should split the picture in three-four pieces. For now I did this and it worked. Then if you reply to me, I will know for next time.
Hi there!
That will happen with large photos. Even with five years of designing, it still has not been solved.
However, the way of solving it isn’t a huge issue, so that’s why I don’t contact the help center (plus they take forever to respond).
What I usually do is on big photos (such as the one you have), I upload the photo onto imageshack and then I use the “URL” button instead. It saves your file. However, the thing with imageshack is that they offer you a free trial for 30 days only.
I wouldn’t recommend using Imgur because they don’t allow people in Europe to see. Tinypic is good but these days, they don’t let me upload large photos. So I just stick with imageshack
Exactly. Those sites might become paying after a while, or they might close down.
But my picture was about 500KB while the original English picture tompark made for Tomorrow With You was over 2291KB
I was wondering if it has to do with him putting it into a div?
On the other hand, if splitting as I did works, then why not? After all it will load more easily for people with mobile devices or low bandwidth etc.
I am not too sure…
tompark may have used a different method. This is the one I usually do. I never touched the div except once, so I’m not sure how to use it.
I think it would be great to have also a “How to do Cover Page” somewhere an instruction page on Viki, just like we have a the Subtitling Community, perhaps within the NSSA, would there be some folks to work together something, I too am limited to error and trial just within the cover page editor… everything like page design with some sort of photoshop is not known to me, or at least how do you upload that page from a photoshop or similar feature?
What I learnt is transferring pictures or picture address still keep mixing up which works between in using on disqus and the cover page editor… I learned to downsize a photo but making nice blocks it’s still a mystery since it works once and next time it wont.
Worst, how to make that page in color…?? I understand color codes and I tried copy paste the code but nada, do I have to click first “Div”…
Or perhaps at least a forum page for “Cover page design and questions”
I agree, it would be nice. Although it would mean a full html course.
There are many online, and very many completely free, including a 30 minute one on youtube which is excellent. https://www.youtube.com/watch?v=hrZqiCUx6kg https://www.youtube.com/watch?v=6_Sstbd6Rnw (made in 2013, so it doesn’t include the latest)
This one is online and free: https://www.udacity.com/course/intro-to-html-and-css--ud304
To make a better color use www.colorpicker.com and select the color copy the code (the one that looks like #FF8937) and write that instead of the color name.
If you don’t know html, Photoshop is your best bet. (or any other image editing software).
And be sure to make the width 800 px. I found this works the best to exactly fill the space. (I downloaded and studied good cover pages to find out this)
Instead of making a looooooong vertical strip of stuff, just make a series of pictures which you will insert one after the other. This way you will avoid having to find another host. As long as it is lower than 400KB you can upload it on viki. Don’t forget to choose “Save for web” so that they are not very heavy.
Put all text on your picture but leave out things that are going to change, such as how many episodes are released, the names of team members (some may be added). These can be written over the picture. How? You put a blank picture with just a nice colour (and maybe also a nice frame around it), you assign it as a background and then you can write stuff on it from the viki editor, updating it whenever you need.
I didn’t know there was the YT video for html nor did I think to search and I have various links to color codes just applying them into the editor didn’t work, surely I did something wrong because the gif html links like <ref… work just not for colors, I’m at loss
I think that’ll be a great idea! There aren’t much page designers these days, which is quite saddening Maybe I can make a video to help with basic HTML or just page designing, in general? The videos are pretty helpful too, but I always find myself fighting with Viki’s HTML.
You could have a look at the source for other people’s cover pages (in the dramas where you are moderator, so that you can access the Manage page) and find out the place where the color is mentioned. You can do it with Find (CTRL+F). You can copy paste the whole thing into Notepad and study it at leisure.
(I learned a lot about sewing by having to repair clothes, taking them apart helps see how they were made.)
Ummm…
I am making a cover page and the design is ready with me. But I am having some problem, actually a lot!
I don’t know how to upload the photo to the cover page, and I need a link to do so, what sort of link? And I don’t want to upload my work on any third party site too.
Can I get some help?
You can upload it directly from your PC on the Viki server provided it is no more than 400 KB. To do that, I usually cut up those looong cover pages into three or more pieces and optimize them for the web so the files become smaller. You can do that in Photoshop (through export - legacy - save for web where it lets you choose the quality, and usually 50% is okay). But there are many programs that can do that, even Microsoft Office Picture Manager! Or online tools such as Tiny jpg, compressjpeg or Optimizilla. But Photoshop, if you have it, is the best, because it tells you the size beforehand, so if it’s not right, you can cancel, go back to editing the image, go back in history before the cut and cut it up into more pieces.
Then upload them and put them on the cover page one right after the other - the cut doesn’t show.
Maybe I can make a video to help with basic HTML or just page designing, in general? The videos are pretty helpful too, but I always find myself fighting with Viki’s HTML.