0
Add to favorites

Avatar neilblake asked

To Top Scroller in Article

Hi. Thanks for your instructions re placing the to-top scroller inside an article. They work great part from 1 thing.

I added the hoover code to the scoller2 in custom.css as suggested so i end up with

totop-scroller2 {

background: url("../images/totop_scroller.png") no-repeat scroll 0 0 transparent;    
display: block;    
height: 28px;    
text-decoration: none;    
width: 26px;

}

totop-scroller2:hover {

color: #676767;

}

when i then place <p style="float: right;"><a id="totop-scroller2" href="#page"></a></p> into an article
it all works fine but when i save the article the code automatically saves as <p style="float: right;"></p> even though the scroller still appears and works fine?

The other problem is I want the scroller to appear on the left-hand-side of the article so i use this code instead
<p style="float: left;"><a id="totop-scroller2" href="#page"></a></p>

However when using this not only does the code still not save correctly as above but the button displays and doesn't work at all and the hoover over colour of #676767 doesn't work either.

Any ideas please?

Thanks.

  • Joomla
  • Quantum
  • General Question
Order by Votes Newest Active

3 Answers

0

Avatar bob Support answered

The custom.css should contain:

#totop-scroller2 {  
    background: url("../images/totop_scroller.png") no-repeat scroll 0 0 transparent;  
    display: block;  
    height: 28px;  
    text-decoration: none;  
    width: 26px;  
}  

#totop-scroller2:hover { background-position: 0 -70px; }

Remove the color statement for the hover, this will not work.
The code for the article is fine.
Greetings,
Bob

0

Avatar neilblake answered

Hi. Thanks for the quick reply. Unfortunately it still doesn't work :(

Please can you confirm my code in the custom.css file should be

totop-scroller2 {

background: url("../images/totop_scroller.png") no-repeat scroll 0 0 transparent;    
display: block;    
height: 28px;    
text-decoration: none;    
width: 26px;

}

totop-scroller2:hover {

color: #676767;

}

totop-scroller2:hover { background-position: 0 -70px; }

and then the code in my article should be

<p style="float: left;"><a id="totop-scroller2" href="#page"></a></p>

the button appears as before but doesn't work and the hoover over doesn't change color.

thanks.

0

Avatar bob Support answered

As it is an image your code will not work, add this and it should:

#totop-scroller2:hover { background-position: 0 -70px; }

The code gets modified by the editor, this is a known quirk of TinyMCE, disable it completely when editing HTML (Global configuration > no editor) and it should work fine.
Greetings,
Bob

Know someone who can answer? Share a link to this question via email or twitter.

Latest News

Products

Company

Support