Separating images in widget and making each clickable « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Avisio

not a support question

Separating images in widget and making each clickable

11 posts from 3 voices

Started 2 years ago by dmag
Latest reply from dmag
This topic is not a support question

Tags:

No tags yet.

dmag
Member

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:

http://postimage.org/image/361kr53dw/

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!

Posted 2 years ago #
Noah Hendrix
Support Team

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.

http://wordpress.org/extend/plugins/

Posted 2 years ago #
dmag
Member

Hi Noah,

Here's the link.

http://bit.ly/cg1aiL

Code is:

http://postimage.org/image/59u7w2bo/

Thanks.

Posted 2 years ago #
Noah Hendrix
Support Team

Hi!

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; }

Regards,
Noah

Posted 2 years ago #
dmag
Member

Hi Noah,

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

http://postimage.org/image/59u7w2bo/

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.

Posted 2 years ago #
Dude
Dude
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:
```
.margin_small
{
margin-left:5px;
}
```
Posted 2 years ago #
dmag
Member

Dude,

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.

Posted 2 years ago #
Dude
Dude

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.

Posted 2 years ago #
dmag
Member

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.

Posted 2 years ago #
Dude
Dude

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

Posted 2 years ago #
dmag
Member

I'll give it a try. Thanks.

Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top