Join This Group

Patterns By Type

Created Jul 1, 2010

Patterns By Type

278

Colors

1,683

Palettes

4,905

Patterns

140

Conversations

579

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

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)
------------------------------------------------------------------------------------------------------------------


RC495

This is part of the Daily Random Colour Challenge

Saturday 3rd of December 2011 , the colour is :

Douglas Fir HEX: #215E24

IF72-MOSAIC

PS: Items using passed IFRC colours can be submitted to the ANYRC page



---------------------------------------------------------------------------------------------------------------

BADGE UPDATE OVERVIEW

by iKazed
See 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>


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:
Monarchy_in_the_RC


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




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:


CLOWN PALETTES [CPD]

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

ONE LOVER PALETTE [1LP]

All the colours of this palette are created by: 1335sj

IF51-FLOWERS

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

Group Members