Profiles & Cover Pages: The Older HTML Codes Are Baaack!

Thank you for all the tips, I used a link from what majority of folks use on viki but back then the flag counter code didn’t work… The background color is like a highlight color on writen text, I was looking for the entire page like wallpaer in color so it’s background page color not text only. I don’t see the feature.

You have a cool profile! :slight_smile::+1:

1 Like

Thank you for all the tips, I used a link from what majority of folks use on viki but back then the flag counter code didn’t work.
You are welcome! Glad I could be of some help.

The background color is like a highlight color on writen text, I was looking for the entire page like wallpaer
Yes I just checked that, and you were perfectly correct; there is apparently no button for the page background colouring. I cannot recall whether there used to be one, because it is a feature which I have never used before. So your only alternative at this point is an HTML code. You can do a google search for samples of HTML codes on setting the colour of a page’s background.

Thanks for your kind words re: my profile; it is much appreciated. :slight_smile:

1 Like

Can anybody tell/write me the coding for the cover page background color, Im not talking about the “color code” but that language that the viki will understand in the < source > page, I tried all forms I found on internet and it’s pretty confusing where to start since some are mixed with css codes, for example:

< html >
< head >
< body bgcolor=“cc99ff” >
< head >
I added space before and after < > so it would show in this text!

nothing or no color will show when I type this in after clicking < source > and then click back on < source >.
I tried with the header codes < h1 >…< h1 > and that works just no background color…
this is sooo depressing…
All I need is to add background color… I looked up another cv in < source > and see < div >…
Thanks for your help! :tulip:

Hello, @simi11 I do not know if I understood your problem, but if I put : < div style=“border:4px solid#ff0000; border-radius: 15px; background-color:#ffa07a” > in source, I obtain a orange background
(I added space before and after < > )

1 Like

Hi kobolt, it works only for a border container, I need the background color for entire page instead of white another color…

I come back, I have to leave now, desolee :rose:

1 Like

I never remember codes, but you can make the box taller by tapping “Enter” at will inside the orange/red box?

Details (if might help):
We want to put a text inside a box for example “Lalala”:
1.Select what you want to put in a box = in a DIV

2.Click on the button DIV (inside red circle)
3.Go on Advanced, Style > Copy paste your code: border:4px solid#ff0000; border-radius: 15px; background-color:#ffa07a;
Don’t forget ; between each properties values and at the end of the code (border:value; border-radius:value; etc… :wink:

4.To make the box taller:
-Tap Enter as many times as you want
-Or Right click in the box you just created > Edit DIV > Style > Add height: 10000px;
-You can add more height to your box by choosing 100px or 1000px, etc.

5.If you want just a simple background without border:
Right click in the box you just created > Edit DIV > Style > Write only this: background-color:#ffa07a; height:10000px;

6.Possible to adapt to the cover size, instead of putting a number as value, put auto in Style: height: auto;







5 Likes

Ok Piranna, this I have to study and experiment, thank you so much for all the info, merci beaucoup !! :bouquet:

I tried to reproduce what you posted, the issue I have is with the DIV Container, every time I click on OK the green button nothing happens just on the left on bottom of my pc it says javascript: void (0) so I can’t fill any info in the DIV Advanced container.
I tried in < source > to add the background size and that worked but when I wanted type text it kept on jumping like 3 lines down and creating new DIV orange boxes. Also right click in the orange box produced only “Paste” box. not enlarging.
I’m on Opera browser, perhaps that’s the issue?

UPDATES:
I just changed in the < source > just the background color coding leaving the border coding completely out and it worked!!
After that the right click worked, Im puzzled perhaps a viki bug anyway, I don’t know I just played around and
made a page, just too bad it doesn’t have more Font choices.
I will copy/paste the coding I have now for later and will need to find more colors.

Merci beaucoup, vraiment!! Ca m’a aide beaucoup!! The coding here to start with is nothing like on the internet… that’s why I had a problem, but how others know all this, is it through error and trial?

  • here is the coding for the background page, the height is just 1600 one can always make it bigger or smaller with just changing the number, I add space after and before < > so it can be read:

< div style=“background-color:#ffa07a; height:1600px;” >

  • here is the link to the cover page I made, it’s in German, to view just change on Viki page in the gray bottom zone to “Content: Deutsch” and go to the link…

https://www.viki.com/tv/35627c-lulus-diary?preview=true

I hope others can profit from this information, I wished there would be just a video “How to start a CP in the Viki Editor”, something that we do not have yet like the “Subbing Introduction Tutorial”.

2 Likes

A simple bg color code using the html color code of the color of your choice (for entire page or as defined):
< div style=“background-color: #000000; width: 700px; height: 800px;”>

To change the color, just change the color code which must always be #123456 (hex six digits, for html color code)

You can also use a color image as a background color. The color example here is black.

A simple bg color code using the url of a bg color image:
< div style=“background-image: url(https://i.imgur.com/9uoUjjl.png); width: 700px; height: 800px;”>

To adjust the size of the ‘bg color or image’, change the value for the width or the height. Or both, depending on what you need. Hope it helps. :slight_smile:

PS: I added a space after < and before div style.

2 Likes

oh, while I was crafting the page you left a memo, lol, I know with the picture sizing, and I have used only height I guess as the page is already set to a width it doesn’t matter… Now that’s pretty much what I needed… but you’ve added the version with an image, that I will try next time!!
Thank you!! :rose:

1 Like

And this is a page where you can pick colours.
http://htmlcolorcodes.com/

1 Like

Weird, it works for me. I redid it to be sure. I don’t know if it’s because of Opera, I think using DIV button should work on any browser XD
Did you enter the “Source” thingie while trying to do it? Coz advantages of the “DIV” button on the cover page interface are not to pass through “Source” typing.

To make a cover page, you have 2 or 3 methods, combining them or not: the “DIV” button, “Source” typing, pic hosting.
Which method to pick? As you want :relaxed:

Honestly, I don’t know how to read coding lines, so I don’t use “Source” typing (and some coverists don’t use it neither) otherwise I should learn (and remember!) when and how to use code lines, <><p>``<div etc. For that reason, I prefer going through “DIV” button.
So, only a matter of preference, but it’s not impossible for anyone to use one or another method. :slight_smile:

Good luck with your cover!

1 Like

You can also write:

< div style=“background-color:#964c4c;height:100%;width:100%;”>

< /div>

1 Like

Simi,

I tried to make something to help you understand a little bit better how to code a cover page in Viki tool but I prefer to warn you, I’m not well-versed in this domain :slight_smile:
A big thank you to Justine_desmoulins for her cover that is used as an example in videos and Anna79_9 for her help in “Source” coding. :persevere:

Also, this website with codes is really good to test and learn codes you might want to use, or codes that you will see in videos are well explained on this website too:
https://www.w3schools.com/cssref/css3_pr_background.asp

(Quality is not really good, full screen is better to watch them)
https://www.youtube.com/watch?v=rtcL_H3CID8
The google doc with the Source code if you want to test it or even modify to your liking: https://docs.google.com/document/d/1fiXAXen6f_UkI7JHJN-bfR1SCwkgyJ5juwVkERhIIfg/edit

https://www.youtube.com/watch?v=FI1hheIMQqA
Google doc: https://docs.google.com/document/d/1ZlzD_D4UCHicDikxE0Q_esPMNLuUljE-_3OpjbD1EjQ/edit

4 Likes

Wow, thank you very much! :heartbeat: @piranna
I always tried to use codes and all this stuff on viki, but it never really worked how I wanted it.

Do you know how I can let pictures run in loop like in the english coverpage from this drama?
https://www.viki.com/tv/29908c-fifteen-years-of-waiting-for-migratory-birds?q=fift

1 Like

Nope, hope it will make it easier for people to understand a little better this makeup cover tool :slight_smile:

When you right click on the pic and open it in a new tab, you can see “gif” at the end of the address, meaning it’s an animated image = it’s like how they make a Disney cartoon, you draw many pics and at the end when you pass through them, you have the impression of a “moving” effect.
https://gifbook.io/assets/video.gif

You can make animated image in softwares like Photoshop, Gimp, etc and on the internet too.
You just take the pics you want and make them appear one after one.
When you type Free gif maker on google:
you have this website: http://gifmaker.me/
It seems to work when I tried it :slight_smile:

Have fun making animated images!

2 Likes

Oh, so it is just a gif. :smile:
I thought there is some kind of confusing code behind it. Thanks!

2 Likes

merci beacoup pour ton travail Piranna, je vais le regarder quand je me sent miex… en lit avec fievre and ma tete pense a rien :frowning:

1 Like

Don’t worry! Get well soon and have a good rest! :sleepy: :sunny: :tulip:
(ce n’était pas du travail mais un plaisir ! :slight_smile:)

1 Like

Other things to check when doing a cover page:

[Recruiting]

Cover pages designers, don’t forget to update the link of [Recruiting] in the Moderators recruiting section when you take a cover page template from another drama, because volunteers who want to be moderators can’t contact the correct person.

Hence if for instance, the [Recruiting] shows the link of my Viki mailbox for a drama I don’t participate on and I don’t answer, some volunteers might never be able to apply as moderators to the correct person or apply late and the drama might never have a moderator in a particular language or they’d never be able to moderate this drama.
And secondly, it’s distracting to have to redirect people because we don’t know the drama they’re talking about, we have to ask the link, show them the correct link, etc. It’s a waste of time for the applicant, for the channel (could have begun mods work already or subbing), and for me.


Channel managers and cover page designers, check that the correct [Recruiting] links are put on your cover page.

2 channels I have to redirect volunteers, I already spend less time on Viki, so I’m not sure I’ll be able to redirect people at a timely manner or want to continue doing it… (please, spare my little free time to do something productive):
https://www.viki.com/tv/36477c-i-hate-you-juliet
https://www.viki.com/movies/36542c-rosebud

2 Likes

A post was merged into an existing topic: Changing Avatar