Change An Old Image For a New Image

edited April 2008 in userstyles.org
I was wondering if there were any tut's based around swapping an image on an existing page for a new image.
I am in the process of styling php.net [http://php.net/] and wanted to removed there image located at: http://static.php.net/www.php.net/images/php.gif,
with something more to my liking - but i am abit confused as to how to achieve this using as the image is not in a div, class or id???

I had a look at some other users examples but this one chages the google image to a new image - still not sure how they are achieving this [http://www.valacar.com/userstyles/google-gray-logo-replacement.css]

thanks

Comments

  • Check painted black - php.net, where I did it like this:

    img[src="/gifs/logo-bug.gif"], #headnav > a:first-child > img, .vc_navheader td > a > img { height: 0 !important; width: 0 !important; padding-left: 125px !important; padding-top: 25px !important; background: url(data:image/png;base64,iVBORw0KGgoAAAA.....image...data........) no-repeat !important; }
  • Thanks for that comment of how to perform the image swap, that is very clear now..
    It was interesting to see in your example that you used a base 64 data url, which i hadnt
    really seen the scheme used much on the web..

    data:[][;base64],

    If you wanted to reproduce the base 64 for the php.net logo i.e. http://static.php.net/www.php.net/images/php.gif or my own would this be a viable method?

    background: url(data:image/gif;base64,<?php echo base64_encode(file_get_contents("my image url ")) ?>) no-repeat;

    I was just wondering if php could be used within the usertyles editor? if not how did gather your base 64 data - did you upload an image to your server and then perform the base64_encode() and then file_get_contents() ?? please anyinfo would be great.

    thks
  • edited April 2008
    <?php
    //debug("data URL scheme::");
    //converts image url into base 64 bytes for data url scheme
    //background: url(data:image/gif;base64,php echo base64_encode(file_get_contents("my image url ")) ) no-repeat;
    $image = "http://www.websiteoptimization.com/l.gif";
    $base64 = base64_encode($image);
    $getContents = file_get_contents($image);
    $total = base64_encode(file_get_contents($image));

    echo "data URL scheme";
    echo $image." - [default image]
    ";
    echo $base64." - [base64 applied]
    ";
    echo $getContents." - [file_get_contents applied]
    ";
    echo $total;
    echo "";
    ?>

    is there any online method of gathering the base 64 info??
  • found it http://www.opinionatedgeek.com/dotnet/tools/Base64Encode/Default.aspx
  • Stylish editor has a Data URI encoder, under the "Insert" button menu.

    No, you definately can not use PHP code in userstyles. There are various Base 64 encoders available, as you discovered.
  • wow - omg hahaha i didnt even see the insert button - well that sure does make it alot easier..
    HOW TO INSERT A URI VIDEO ::::::::::::::::::::::::::::::: http://screencast.com/t/CbbBgrpGku
  • *chuckles* Quite easy when it's presented that way.
Sign In or Register to comment.