Title above or on top of picture - Support | Kriesi.at

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

Author

Posts
January 20, 2017 at 5:06 pm #736585

sjtchiang
Participant

Hi,

1. With the magazine-option i’m trying to put the title above of the picture, but can’t find the option to do that.

2. Is it also possible to put the title on top of (inside) the picture?
Like so: http://www.binnenvaartkrant.nl/nieuws/nieuwsitem/a2b-online-blijft-groeien/

Regards,
Steven.

January 25, 2017 at 1:35 am #738051

Nikko
Inactive Moderator

Hey sjtchiang,

1. There’s no option to do that since the magazine’s layout is fixed. We can probably do something on this with some css.
2. Try using masonry, it’s possible using it.

Best regards,
Nikko

January 26, 2017 at 1:22 pm #738886

sjtchiang
Participant

Thnx Nikko,

1. Can you give me some tips on how I can change it with css.
2. Masonry works pretty good, but is there way too place a 1-column masonry article. I only get the minimal option of 2-columns.

Regards,
Steven.

January 30, 2017 at 5:22 pm #740303

Andy
Inactive Moderator

Hi,

Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

Best regards,
Andy

January 30, 2017 at 5:25 pm #740308
sjtchiang
Participant
Hi Andy,

here

Regards,
Steven.
- This reply was modified 7 years, 10 months ago by sjtchiang.
February 2, 2017 at 2:22 pm #741785
Andy
Inactive Moderator
Hi,

so try something like this inside Quick CSS field:
```
figcaption.av-inner-masonry-content.site-background {
top: -22px;
height: 94px;
}
```
and adjust as needed.

Best regards,
Andy
February 2, 2017 at 3:46 pm #741853

sjtchiang
Participant

Hi Andy,

-Works, but is there a way to get the height to adjust automaically, because if the header is 3 rows long, it pushes the date behind the picture.

-Is there also a way to get the header on top of the picture?

Also…
-how can I change the font-size of the header
-don’t show the date
Regards,
Steven.

February 6, 2017 at 2:34 pm #743374
Andy
Inactive Moderator
Hi,

as far as I can see it the header is already on top of the picture: http://i.imgur.com/LSwX9bF.png

There is no way to set is automatically, but you could set it for every single item, for example with this code:
```
#av-masonry-2-item-23062 .av-masonry-entry-title.entry-title {
margin-top: -10px;
}
```
To remove date:
```
span.av-masonry-date.meta-color.updated {
display: none;
}
```
Best regards,
Andy
February 6, 2017 at 3:08 pm #743401

sjtchiang
Participant

Hi Andy,

Sorry for the misunderstanding.
I want the header to be on top of (inside) the picture, not above the picture.
Just like: http://www.binnenvaartkrant.nl/nieuws/nieuwsitem/a2b-online-blijft-groeien/

Regards,
Steven.

February 6, 2017 at 6:14 pm #743509

Andy
Inactive Moderator

Hi,

not sure what you mean. Can you provide screenshots to clarify things for us please?

Best regards,
Andy

February 7, 2017 at 1:51 pm #743906

sjtchiang
Participant

This is what I like to accomplish:

http://www.binnenvaartkrant.nl/wp-content/uploads/2017/02/header_in_pic.png

Regards,
Steven.

February 8, 2017 at 10:03 pm #744526

Andy
Inactive Moderator

Hi,

this is already what I see on your website: http://i.imgur.com/5cYtdfs.png
So it seems you could fix it?

Best regards,
Andy

February 9, 2017 at 9:56 am #744705
sjtchiang
Participant
Sorry see below.
- This reply was modified 7 years, 9 months ago by sjtchiang.
February 9, 2017 at 9:56 am #744706
sjtchiang
Participant
Hi Andy,

This is what I got:
http://zendesign.nl/websites/bvk/

This is an example of what I want:
http://www.binnenvaartkrant.nl/wp-content/uploads/2017/02/header_in_pic.png

Hope you understand what I mean.

Regards,
Steven.
- This reply was modified 7 years, 9 months ago by sjtchiang.
February 10, 2017 at 5:04 pm #745497
Andy
Inactive Moderator
Hi,

I don’t see the image you’re showing on your screenshot anywhere on the link you’ve provided, but maybe you want this:
```
.av-masonry-entry .av-masonry-entry-title {
color: white;
top: 181px;
position: relative;
}
```
Best regards,
Andy
February 16, 2017 at 2:27 pm #747958

sjtchiang
Participant

Hi,

Your last suggestion gives this: (title disappears, probably behind the picture!?)
http://www.binnenvaartkrant.nl/wp-content/uploads/2017/02/111.png

This what I have/want:
http://www.binnenvaartkrant.nl/wp-content/uploads/2017/02/000.jpg

Hope this clears it up for you.

Regards,
Steven.

February 17, 2017 at 5:56 pm #748562
Andy
Inactive Moderator
Hi,

use this code:
```
figcaption.av-inner-masonry-content.site-background {
background-color: transparent !important;
}
h3.av-masonry-entry-title.entry-title {
color: white;
}
```
Best regards,
Andy
Author

Posts

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

You must be logged in to reply to this topic.