Bookmark / Share
RSS Posts
View my profile
Photos
LIVE-DEMO (Mine), and live-demo HERE ON MY FRIEND'S BLOG .
If you do not use Internet Explorer as a web browser you may not know that these general marquee codes <marquee>TEXT GOES HERE</marquee> have the habit of cutting off the content of marquees once the width of the marquee has been exceeded. So, visitors who use Internet Explorer only see some of your scrolling text NOT ALL OF IT, if you have a lot of text and links added to a marquee.
In trying to solve the problem of marquee content being cut off in Internet Explorer but not in other browsers for my friend Taylor, I stumbled across THIS WEBSITE. I added the marquee code but found I couldn't customise the link colours. I seriously needed to customise the link colours!!! In the end I had to create my own css code for the marquee. It was complicated but this tutorial is the final result of all my hard work. NOW NO MORE TEXT BEING CUT OFF IN MARQUEES NO MATTER HOW LONG THE CONTENT IS!
Okay, if you want to add this marquee to your blog, then you need to follow my instructions below. The instructions is for creating a div area for the marquee and adding css code so you can customise the text and link colours within the marquee itself, and then adding the marquee code to a HTML / Javascript widget.
INSTRUCTIONS:
Copy and paste the code below this text directly above ]]></b:skin>
Then, wherever you want the scrolling text to display on your blog, after the <body> tag and before the </body> tag paste in the following code:
Then click on "Save Template". Now go to your "Design" tab and you will see an "Add a Gadget" widget where you want the marquee to be displayed. Click on the "Add a Gadget" link and select a "HTML/Javascript" widget to put there.
Now, I've had some problems with the next lot of code being added to this post, so I will have to give you the link for the original place where I found this cross-browser marquee code that goes into a widget. Click on the link HERE and copy THE CODE THAT IS IN THE SCROLLING TEXT BOX FROM THAT SITE.
Then paste that code into the HTML/Javascript widget and then click on "Save" to save the widget.
Click on the "Save" button on your "Design" page. You're almost done!
HOW TO EDIT THE LOOK OF THE MARQUEE AND SCROLLING LINKS/TEXT:
STEP 1: Firstly, go to your "Edit Template" page and then you will need to find the width of the area where you placed the marquee widget. For example, if you placed the marquee widget directly below your header, then find the width of the #header-wrapper (or header-outer) or if you don't have a width for that widget then the #content width will suffice. If you placed the marquee widget directly above your blog posts within the main-wrapper (or main) area then find the width of the #main or your #post width, if there is one. Once you find the corresponding width highlight and copy it.
STEP 2: Scroll up and locate the css code for the #scroller-wrapper (See first lot of code I added to this tutorial), delete 1100px and paste in the new width.
STEP 3: Change the #scroller colour from #fff (white) to the colour of your choice. Note that this is just for text only that will be added to your marquee and not any link colours.
STEP 4: Change the #scroller a colour from #fff (white) to the colour of your choice. This is for what colour you want your links to be displayed as.
STEP 5: Change the #scroller a:hover colour from #66cd00 (green) to a colour of your choice. This is only for the link hover colour.
STEP 6: If you want to add a visited colour as well, then add this code to the css code as well:
#scroller a:visited {
color: #66cd00;
}
and change the #66cd00 (green) to the colour of your choice.
Once you've made these changes click on "Save Template.
EDITING THE URLS IN THE MARQUEE WIDGET:
Simply replace the existing urls with your own urls, and replace the existing text with your own text that is between the <font face="Arial"></font> tags. BE CAREFUL OF WHAT YOU ARE DOING!!!
IMPORTANT AND REMEMBER THIS: When adding a link url to your scrolling text - which is now a widget - you must add the double " either side of the url. The code won't accept a single ' surrounding urls. If you make just one mistake with the urls the whole thing will not display the scrolling text. It is a very delicate, and tempermental, code.
Every bit of text you add to the marquee must be added within the <font face="Arial"></font> tags. If you alter the font code by adding more code to it, it will most likely not display your scrolling text.
Also: The scrolling text will not display anything if you add <span></span> code to it when adding links or text.
The scrolling text also will not display the content if you add hex codes for spaces between each link.
The scrolling text does not display anything if you separate links and text with line break codes <br /> nor if you add each link on a new line. However, it does not mind it if you press the space bar once or twice between each link code.
After all the changes are made to your scrolling text/marquee, you will now have scrolling text that will now be visible in many web browsers. It displays ALL THE CONTENT in Internet Explorer 7, Firefox, and Google Chrome. If you use another web browser and this works in that web browser please leave a comment below.
If you do not use Internet Explorer as a web browser you may not know that these general marquee codes <marquee>TEXT GOES HERE</marquee> have the habit of cutting off the content of marquees once the width of the marquee has been exceeded. So, visitors who use Internet Explorer only see some of your scrolling text NOT ALL OF IT, if you have a lot of text and links added to a marquee.
In trying to solve the problem of marquee content being cut off in Internet Explorer but not in other browsers for my friend Taylor, I stumbled across THIS WEBSITE. I added the marquee code but found I couldn't customise the link colours. I seriously needed to customise the link colours!!! In the end I had to create my own css code for the marquee. It was complicated but this tutorial is the final result of all my hard work. NOW NO MORE TEXT BEING CUT OFF IN MARQUEES NO MATTER HOW LONG THE CONTENT IS!
Okay, if you want to add this marquee to your blog, then you need to follow my instructions below. The instructions is for creating a div area for the marquee and adding css code so you can customise the text and link colours within the marquee itself, and then adding the marquee code to a HTML / Javascript widget.
INSTRUCTIONS:
Copy and paste the code below this text directly above ]]></b:skin>
/* Scrolling Text
----------------------------------------------- */
#scroller-wrapper {
width: 1100px;
height: 20px;
background:#000 url(https://lh5.googleusercontent.com/-KsndJxKQ7fo/T9mfI9eQZ2I/AAAAAAAAHjw/LTODCYBsMio/s136/youarehere.png);
background-position:left;
background-repeat:no-repeat;
margin:-10px 0 0px 0;
padding:0 0 3px 0;
}
#scroller {
float:right;
width:993px;
color:#fff;
}
#scroller a {
color:#fff;
margin-left:0;
margin-right:10px;
}
#scroller a:hover {
color: #66cd00;
}
Then, wherever you want the scrolling text to display on your blog, after the <body> tag and before the </body> tag paste in the following code:
<div id='scroller-wrapper'>
<b:section class='scroller' id='scroller' maxwidgets='1' showaddelement='yes'/>
</div>
Then click on "Save Template". Now go to your "Design" tab and you will see an "Add a Gadget" widget where you want the marquee to be displayed. Click on the "Add a Gadget" link and select a "HTML/Javascript" widget to put there.
Now, I've had some problems with the next lot of code being added to this post, so I will have to give you the link for the original place where I found this cross-browser marquee code that goes into a widget. Click on the link HERE and copy THE CODE THAT IS IN THE SCROLLING TEXT BOX FROM THAT SITE.
Then paste that code into the HTML/Javascript widget and then click on "Save" to save the widget.
Click on the "Save" button on your "Design" page. You're almost done!
HOW TO EDIT THE LOOK OF THE MARQUEE AND SCROLLING LINKS/TEXT:
STEP 1: Firstly, go to your "Edit Template" page and then you will need to find the width of the area where you placed the marquee widget. For example, if you placed the marquee widget directly below your header, then find the width of the #header-wrapper (or header-outer) or if you don't have a width for that widget then the #content width will suffice. If you placed the marquee widget directly above your blog posts within the main-wrapper (or main) area then find the width of the #main or your #post width, if there is one. Once you find the corresponding width highlight and copy it.
STEP 2: Scroll up and locate the css code for the #scroller-wrapper (See first lot of code I added to this tutorial), delete 1100px and paste in the new width.
STEP 3: Change the #scroller colour from #fff (white) to the colour of your choice. Note that this is just for text only that will be added to your marquee and not any link colours.
STEP 4: Change the #scroller a colour from #fff (white) to the colour of your choice. This is for what colour you want your links to be displayed as.
STEP 5: Change the #scroller a:hover colour from #66cd00 (green) to a colour of your choice. This is only for the link hover colour.
STEP 6: If you want to add a visited colour as well, then add this code to the css code as well:
#scroller a:visited {
color: #66cd00;
}
and change the #66cd00 (green) to the colour of your choice.
Once you've made these changes click on "Save Template.
EDITING THE URLS IN THE MARQUEE WIDGET:
Simply replace the existing urls with your own urls, and replace the existing text with your own text that is between the <font face="Arial"></font> tags. BE CAREFUL OF WHAT YOU ARE DOING!!!
IMPORTANT AND REMEMBER THIS: When adding a link url to your scrolling text - which is now a widget - you must add the double " either side of the url. The code won't accept a single ' surrounding urls. If you make just one mistake with the urls the whole thing will not display the scrolling text. It is a very delicate, and tempermental, code.
Every bit of text you add to the marquee must be added within the <font face="Arial"></font> tags. If you alter the font code by adding more code to it, it will most likely not display your scrolling text.
Also: The scrolling text will not display anything if you add <span></span> code to it when adding links or text.
The scrolling text also will not display the content if you add hex codes for spaces between each link.
The scrolling text does not display anything if you separate links and text with line break codes <br /> nor if you add each link on a new line. However, it does not mind it if you press the space bar once or twice between each link code.
After all the changes are made to your scrolling text/marquee, you will now have scrolling text that will now be visible in many web browsers. It displays ALL THE CONTENT in Internet Explorer 7, Firefox, and Google Chrome. If you use another web browser and this works in that web browser please leave a comment below.
twitter
facebook
