Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at contact@userstyles.org.
Changing your Avatar.
The only way to currently change a forum avatar is through Gravatar.com. The email address used for your Userstyles.org account must be one of the email addresses that is registered to your Gravatar account.

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.