Polaroid Template
Permalink Browser Info Environment
Hi,
One of the main reasons I liked this theme was the polaroid pictures. If I'm not making a portfolio/gallery but just want to have some pictures (without any link) that looks like polaroids with a text, how would I do that?
One of the main reasons I liked this theme was the polaroid pictures. If I'm not making a portfolio/gallery but just want to have some pictures (without any link) that looks like polaroids with a text, how would I do that?
| Type: | Discussion |
|---|---|
| Status: | In Progress |
Hi!
This is what you'd need to do:
1. click on the Gear Icon in the toolbar, select Design -> Theme -> Customize, and paste the following code into the Custom CSS area:
This will add 4 new classes (polaroid1, polaroid2, polaroid3 and polaroid4). Each class is slightly different (the rotation of the polaroid is different).
2. Add a content block. Insert an image and add the caption below the image (I'd recommend choosing the "Heading 3" style from the Formatting dropdown).
3. Click on the block, choose Design & Custom Template, click on the Gear icon and enter one of the following classes into the "Custom Class" area: polaroid1, polaroid2, polaroid3 or polaroid4. If you want to add several images, use a different class for each image.
Hope this helps!
Jordi
This is what you'd need to do:
1. click on the Gear Icon in the toolbar, select Design -> Theme -> Customize, and paste the following code into the Custom CSS area:
.polaroid1 { color: #000; background: #fcfcfc; padding: 10px; margin: 0 0 20px 0; box-shadow: 0 1px 4px rgba(0,0,0,.2); transform: rotate(-1deg); } .polaroid2 { color: #000; background: #fcfcfc; padding: 10px; margin: 0 0 20px 0; box-shadow: 0 1px 4px rgba(0,0,0,.2); transform: rotate(1deg);
Viewing 15 lines of 32 lines. View entire code block.
This will add 4 new classes (polaroid1, polaroid2, polaroid3 and polaroid4). Each class is slightly different (the rotation of the polaroid is different).
2. Add a content block. Insert an image and add the caption below the image (I'd recommend choosing the "Heading 3" style from the Formatting dropdown).
3. Click on the block, choose Design & Custom Template, click on the Gear icon and enter one of the following classes into the "Custom Class" area: polaroid1, polaroid2, polaroid3 or polaroid4. If you want to add several images, use a different class for each image.
Hope this helps!
Jordi
Perfect!
This is just what I was looking for. I think I will make some custom Image-templates with these!
This is just what I was looking for. I think I will make some custom Image-templates with these!
yes, that's possible, but you'll need to add some custom CSS. This week i'm away from the office, but during the weekend I will send you the code with some instructions.
Jordi