Join This Group
Patterns By Type
Created Jul 1, 2010
78
Colors
2,443
Palettes
3,275
Patterns
139
Conversations
459
Lovers
CL tutorials & Patterns templates by type
Keywords (for group search): tutorial, how to, how can, seamless, image, video, embed, pattern search, tip, trick, HTML, help, badge, where is, find, Tutorials, Beginner's guide
NB: Please do not submit stuff not related to this place - Your pattern templates - those you designed - are welcome - using the group checkbox (1 example is better for me!)
ycc2106
How to update the IFRC Badge code
This how to is for the IF group members who wish to update the IFRC badge (Daily Random Colour Challenge)If you don't know HTML, please check out MUST KNOW HTML BASICS - it's short & can avoid you a lot of hassle later
On this page
> Updating the code
> making the badge width adjustable-stretchable (optional)
> uploading the image
> How to get the link to a comment(like this link)
> Sharing the code
>> BACK TO INDEX of TUTORIALS
Please get a recent badge code (where the image leads to the actual IF-word)
ycc2106
RC495
This is part of the Daily Random Colour Challenge
Saturday 3rd of December 2011 , the colour is :
Douglas Fir HEX: #215E24
PS: Items using passed IFRC colours can be submitted to the ANYRC page---------------------------------------------------------------------------------------------------------------
ycc2106
BADGE UPDATE OVERVIEW
by iKazedSee below more more details
Things that need to be modified are show in bold:
<a style="border-bottom: 1px dotted grey;" href="/group/Interpretation_Fun/conversations/10714/RC_challenge_2011?page=438#comment-116951" target="_blank">Sunday 2nd of January 2011</a>, the colour is : </p><p><b style="font-size: 120%;"> Don't Touch HEX: #0CC19A </b></p><p><a href="/color/0CC19A/Preciously" target="_blank"><img src="http://www.colourlovers.com/images/badges/c/3317/3317216_Preciously.png" style="width: 240px; max-width:50%" ></a><a href="/group/Interpretation_Fun/conversations/10710/IF33_-_TRIANGLES"><img style="border:5px solid #ddd;margin-top:5px; width:140px; max-width:40%; " src="http://static.colourlovers.com/images/colors/3126/3126901i.jpg"></a></p></div>
What should I change it to?
1. The number of the RC# title. (eg. RC375)
2. The HEX code color of the RC# title.
3. Link to the comment in the IFRC thread (how to get it)
4. The current date.
5. The RC color’s name
6. The RC color's hex code
7. The link to the RC color. (in color badge)
8. The link to badge image of the RC color. (in color badge)
9. The link to the image.
ycc2106
UPDATING THE BADGE CODE
To start off, please get a recent badge to tweak (from one of the latest color pages), this so the image leads to the actual IF-word
Paste it somewhere you can work - like an empty comment below
Now for easier understanding, let's spread the code for better visibility (this is optional, if you think you can manage without, fine!)
Add line breaks in front of every opening HTML block tag <p > or <p ... (we'll remove the line breaks at the end)
Block tags are tags to display text as blocks such as paragraphs (p) and divs (div)
...until you get something like the screenshot below
>>click here to see screenshot in big:
What you need to change:
>>click here to see screenshot in big:
At the end remove all the line breaks you added - there should be none at all
For invisible text 2 and 4 see :
2) How to get the link to a comment(like this link)
4) About uploading the image
ycc2106
When you post a CL badge on an other site than COLOURlovers.com, the badges are a little different:
Screenshot:
when you post here, you don't have the bottom line : Color by COLOURlovers
Real badge:
when posted here, at COLOURlover.com, the last line gets automatically removed.
In the above IF badge code, the badge code is show without that line.
If you post the color badge (say here below in a comment) and click edit, you'll then get the badge code without that part
ycc2106
Uploading the image
Once you found an image that goes with the colour
A) Download the image to your desktop
Right click ON the image and choose save image (or something similar depending the browser)
B) Upload the image to CL
It's always better to host the image of the right size - avoid displaying big images in small. Like this, there's no waste of bandwidth and processing.
Go to one of your colour pages - any colour page. If the new RC colour is yours, I advise using that one so you can easily find it if you want to change...
Click 'EDIT'
Enter the required fields:
Example: this image was uploaded here for RC295
1) Link to where the image was found (optional but it's nice to attribute - it's like a thank you to the person that hosted the image in the first place)
2) image file you downloaded
3) Tags - if it's the actual RC colour page, add the IFRC tag
C) Get the link to the uploaded image
Right click ON the image and choose something like "copy image link" or "open image in new window"
If the image is linked careful not to mistake with "Copy Link Address" which is the link to a page and not an image
D) Replace the image link in the badge code.
It's the very last URL of the badge code (see screenshot of code)
ycc2106
HOW TO GET THE LINK TO A COMMENT
The date link on the badge leads to the comment where the colour is 1st submitted
Links to comments end with the comment ID number, something like
#comment-86016
TO GET THE LINK
Simply edit your comment (click edit and submit) , then copy the URL in the addresse bar
ANATOMY OF A COMMENT LINK
This is a link to a comment
www.colourlovers.com/group/Interpretation_Fun/conversations/10714/RC_challenge_2011?page=229#comment-89026
Broken up:
www.colourlovers.com
Section of the website(group+group name):
/group/Interpretation_Fun
Group thread, thread ID number & thread title :
/conversations/10714/RC_challenge_2011
Thread page number:
?page=229
Comment of that page
#comment-89026
ycc2106
SHARING THE CODE
It seems that the "reply" doesn't work the same way for everybody - each CL server seems to be slightly different
There are several services that allows to share plain text (and not render it to HTML)
notepad.cc is I think the simplest.
1) Go to http://notepad.cc/
It will automatically generate a private page
2) click on 'change URL' to change the name to something easy to remember
Here I added 'IFRC' : http://notepad.cc/IFRC - Add the RCnumber at the end (eg: http://notepad.cc/IFRC102)
3) Get the non editable version to share <-THIS IS IMPORTANT!! :
At the bottom of the page there's a "share this" button - this is the link to the non editable version
Before we used the same notepad pages - now I advise to make a new page using the RCnumber
eg: http://notepad.cc/IFRC374
IMPORTANT: AGAIN: DO NOT GIVE THE EDITABLE LINK - or the code will disappear or get changed...
At the bottom of the page there's a 'Share' button that will give you the non editable version of the same page : http://notepad.cc/share/z0q9pH481w
Other services ( In case notepad is offline)
in the options choose 'plain text'
wrttn.me
Tinypaste (option: Code? yes)
Pastie
Gisthub
ycc2106
Making badges stretchable
Optional but if you want the badge to always fit the width, change the colour badge code's with to use percentages
Instead of the usual
style="width: 240px; height: 120px; border: 0 none;"
replace with:
style="width: 240px; max-width:55%"
This means, display the badge 240px (width: 240px;)
...but make it smaller if it's bigger than 55% of the available width (max-width:55%)
This for all images on the badge. I just approximatively calculate so the total % is ~ 95% (5% for paddings and margins)
Below are examples using this trick on other badges:
ycc2106
THE BEST GROUP IN THE HOLE WHORLED!!
RC297
This is part of the
Daily Random Colour Challenge
Friday 20th May 2011, the colour is :
Grand Ink HEX: #170535 RGB: 23/5/53
Take Two [T2]
All the colours of this palette are created by: 1335sj
ycc2106
RC307
Mon 30 May 2011HEX:#14F3AF
RC304
This is part of the
Daily Random Colour Challenge
Friday 27 May 2011, the colour is :
Soul Stray HEX: #8D90BC
RC305
This is part of the
Daily Random Colour Challenge
Saturday 28 May 2011, the colour is :
Like Wildflowers HEX: #F6EBBB
ycc2106
RC377
Daily Random Colour Challenge
Sunday August 7 2011
olive (RC) HEX: #928C2A
ycc2106