Lovebirds Theme – Images & Instagram

susanstokeschapman · Member · Jan 17, 2014 at 12:27 pm
Copy link

Add topic to favorites
Hello,

I would like to change the vine and heart image to something different – what customization codes do I need to add to the CSS section?

Also, the Instagram widget: On previewing the Lovebirds theme, the Instagram images displayed as six – three small images on two rows. However, when I changed to the Lovebirds theme the Instagram image stays as one large one, no matter what settings I change it to in the Dashboard. Can anyone assist?

Many thanks

The blog I need help with is: (visible only to logged in users)
justpi · Member · Jan 17, 2014 at 1:33 pm
Copy link
This is the vine image:
http://wordpress.com/wp-content/themes/pub/lovebirds/img/vines.png
You copy it to your computer and edit it in an image editing application, or create a new image in the same dimensions, upload it to your blog via Media > Add New, click Edit, copy its URL from the File URL field of the Save module; then you add this and paste the URL where I’m showing:
```
.vines {
background-image: url("IMAGE URL HERE");
}
```
Believe it or not, the heart is pure CSS. To replace it with an image, you select or create a little icon, then as above, using this CSS:
```
.comments-link a {
background: url("IMAGE URL HERE") no-repeat scroll 0 0 transparent;
}
.comments-link:before, .comments-link:after {
display: none;
}
```
I don’t know about the Instagram issue: I don’t have an Instagram account so I can’t test things. But it’s not a CSS issue, so better post this question in the Widgets forum.
susanstokeschapman · Member · Jan 17, 2014 at 2:03 pm
Copy link
justpi,

Thank you, that’s fantastic. If the heart is CSS, is there a way then to change the heart to a circle using the same sort of codes?
susanstokeschapman · Member · Jan 17, 2014 at 2:05 pm
Copy link
Or a diamond, perhaps?
justpi · Member · Jan 18, 2014 at 12:06 am
Copy link
You’re welcome!

a) Circle is easier than diamond (to me at least). You add this, to remove the heart:
```
.comments-link:before, .comments-link:after {
display: none;
}
```
and this, to create the circle:
```
.comments-link {
background-color: #A25833;
border-radius: 18px;
height: 36px;
line-height: 36px;
width: 36px;
}
```
You can change the diameter by increasing or decreasing the three 36s. If you do this, increase or decrease the border-radius value accordingly (that is, make sure it remains half of the other value).

b) When I first replied, I didn’t notice that there’s also a vine image that shows above the footer credits on narrower mobile devices:
http://wordpress.com//wp-content/themes/pub/lovebirds/img/vines-2x.png
So you need to replace this image too with your own alternative image; insert it using this CSS:
```
@media only screen and ( min-width: 320px ) and ( max-width: 1024px ) {
#colophon {
background-image: url("IMAGE URL HERE");
}
}
```
susanstokeschapman · Member · Jan 20, 2014 at 10:01 am
Copy link
Fantastic, this is perfect. Thank you so much for all your help. :)
danamcdowell · Member · Feb 25, 2014 at 9:25 pm
Copy link
I’m not very good when it comes to editing CSS, but I’m trying. Since I had the same question about this, I am following along with your instruction for the vine, but cannot find where to place the url. I’ve tried just pasting .vines url (whatever) wherever but that messes up the alignment of text and the menu bar. Am I missing something?? Thanks. –Dana
thesacredpath · Member · Feb 27, 2014 at 2:58 pm
Copy link
@danamcdowell, you are using the Vigilance theme, and this thread is discussing the Lovebirds theme, and theme CSS is theme-secific for the most part.

Can I ask you to start a new thread in the CSS forum and we will watch for it and help you with your CSS for customizing Vigilance? This will help prevent confusion for those coming to this thread in the future. Many thanks in advance.

No items found.