Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #1825

    I’m trying to put two small images side by side in a widget, to promote our services throughout the site. I want to place little advertisements in the sidebar via a text widget. Here’s what it looks like now:

    I used a simple code and just duplicated it:

    So, two questions…

    1. How can I put a little space, maybe 5px between them?

    2. What code do I use to make each of these images clickable and send the visitor to the correct page for further information?

    3. Adding a third item, it would be great if these images could be rotated. Is there a plugin that can rotate widgets? Or a good advertising plugin that will do this?

    Thanks for the help!


    1. Target the first image with CSS and applying a margin-right: 5px; I could help you, but I’ll need to have a link to your site.

    2. How are you putting the images in the their? If you using HTML code the just wrap the img tags with anchors.

    3. I’m not to sure on the image rotating, I would maybe try the wordpress plugin repository.


    Hi Noah,

    Here’s the link.

    Code is:




    Add this to the first image:

    <img id="first-image" ...

    Then try adding this to your style.css at the end.

    #first-image { margin-right: 5px; }




    Hi Noah,

    Thanks, but I don’t understand the first item. Here’s the code again…how should it now read?

    And add that exact language of the second item onto the last line of style.css?

    Sorry, but I’m not a coder by any means.

    Much appreciated.


    Just try following code:

    <img style="margin-left:5px;" src="my-image.png" alt="my-image" />

    You can change the value of margin-left as you like – i.e. to 20px

    If you want to use the same margin for many images you can also use classes like:

    <img class="margin_small" src="my-image.png" alt="my-image" />

    and add following code to your style.css:




    Thanks, but I don’t know where to place these codes.

    Please provide the file, line number, something to guide me on where it goes.

    This stuff is easy for you guys, but it is just like stumbling around in the dark for a lot of us.

    Much appreciated.


    I don’t know where you want to place your images – above you mentioned a text widget so I assume you want to place it there. The style code (last code snippet) should go into style.css (it’s a file) located in your themes directory.


    Okay, thanks. Got it to work.

    For now, I’ll just do these individually. There are very few pages involved (maybe 15-20) and I don’t understand classes in CSS. I’m sure it’s easier in the long run but again, I’d need to know exactly what line to place the code, etc. When you say to “add the following code to your style.css, don’t I have to know where to put it? If I just type it in anywhere, won’t that mess things up?

    Sorry, I’m a noob in this stuff.

    Thanks again for the help.


    Just place it .i.e. at the very bottom of style.css


    I’ll give it a try. Thanks.

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Separating images in widget and making each clickable’ is closed to new replies.