Join This Group
Patterns By Type
Created Jul 1, 2010
238
Colors
1,578
Palettes
4,636
Patterns
141
Conversations
583
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!)
HOW TO UPDATE THE IF BADGE CODE
Showing 1 - 13 of 13 Comments
------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
RC495
This is part of the Daily Random Colour Challenge
Saturday 3rd of December 2011 , the colour is :
Douglas Fir HEX: #215E24
---------------------------------------------------------------------------------------------------------------
BADGE UPDATE OVERVIEW
by iKazedSee below more more details
Things that need to be modified are show in bold:
<div style="margin: 20px auto 0; padding: 0 10px 10px; text-align: center; border: 5px double #E0D9C1; background-color: white; color: black;"> <p style="margin: 0 -10px 15px; font-weight: normal; letter-spacing: -3pt; word-spacing: 2pt; font-size: 40px; text-align: left; font-family: arial black,sans-serif; line-height: 0;background-color: #E0D9C1; color: #0CC19A; ">RC159</p> <p>This is part of the <b><a style="border-bottom: 1px dotted grey;" href="/group/Interpretation_Fun/conversations/9771/Challenges" target="_blank">Daily Random Colour Challenge</a></b>.
<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>
<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.
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
Notice about the color badge code in the above screenshot:
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
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
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)
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:
Website (base URL):
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
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
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:
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
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
.png)
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)