Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2013
    Posts
    30
    Thanks
    8
    Thanked 0 Times in 0 Posts

    replace css button with picture

    Hello,

    I have a wordpress theme that I am trying to slightly modify. It has a phone number on the top right of the page.

    This is the relevant code for it:

    Code:
    .call-phone p{
    
        background:#d64026 url(images/phonenumber.png) top repeat-x;
    
        display:inline-block;
    
        color:#fff;
    
        padding: 5px 20px;
    
        font-size: 12pt;
    
        border-radius:5px;
    
        margin-bottom: 0;
    
        margin-top: 3px;
    
        cursor:default;
    
        -webkit-box-shadow: 0 8px 6px -6px black;
    
        -moz-box-shadow: 0 8px 6px -6px black;
    
        box-shadow: 0 8px 6px -6px black;
    
        float:right;
    
    }
    Code:
    <div class="call-phone">
    <p>(800) 757-6622</p>
    </div>
    I want to remove all this and have an actual image for the phone number. by design, the image already has the phone number on it. So I just need to remove this button and replace it with that picture (same location, top right). Let's say the image is located in images/new_phone.png

    How should the modified code look?
    Last edited by joejohn; 07-18-2014 at 09:24 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    Why not simply do
    Code:
    <div class="call-phone">
    <img src="images/new_phone.png" title="800-555-1212"/>
    </div>
    And then change
    Code:
    .call-phone p{
    to
    Code:
    .call-phone img{
    You may want to also remove the "phonenumber.png" from the background.
    Presumably it will be entirely covered by the <img>, though, so may not matter.

    But in any case, why not simply *EXPERIMENT* instead of making us test it out for you,
    which we really can't do completely without your ".png" file.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    joejohn (07-19-2014)

  • #3
    New Coder
    Join Date
    Apr 2013
    Posts
    30
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Why not simply do
    Code:
    <div class="call-phone">
    <img src="http://www.codingforums.com/images/new_phone.png" title="800-555-1212"/>
    </div>
    And then change
    Code:
    .call-phone p{
    to
    Code:
    .call-phone img{
    You may want to also remove the "phonenumber.png" from the background.
    Presumably it will be entirely covered by the <img>, though, so may not matter.
    sorry I dont know css. I dont want to experiment because I am afraid I will mess something up. I would rather have the "right" answer.

    If I am replacing p with img, wouldn't some of the lines in the css become irrelevant? for example, the font color fff is no longer needed because there is no text. And I think box shadow is no longer needed? and border radius also has to go?

    which lines do I delete? Thanks so much.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    Any irrelevant CSS styles will simply be ignored. Is that the best coding style? No. Does it work? Yes. TRY IT!

    If you keep a copy of the code from before you make changes, then at worst you have to restore the copies to the live site.

    But even better is to create a test page (e.g., "zz_test_zz.html") that you then muck with.
    Nobody is ever going to stumble onto that page if you name it obscurely enough.
    So you are the only one who will see it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    What I think is funny is that you don't want to try it, even though you have the page you want to change and test.
    Yet you want someone here to recreate a page for you (and how do we know what WordPress theme or version
    you are using?). In other words, do twice to ten times the work because you don't want to do it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •