Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
Embedding Galleries in Posts & Pages
Using the stack gallery type: Is it possible to give some room between the stacked images (like a html break tag would do in other circumstances)?
Last edited by dvdfan001 (2016-01-17 04:23:59)
Offline
Using the stack gallery type: Is it possible to give some room between the stacked images
Probably with custom css. Try adding top and bottom margin to the gallery images.
Use your browser's inspector to identify the needed selector. There will likely be a div containing the gallery. It probably has an ID (or perhaps a class) that identifies it as a stacked gallery. Use that to make the selector specific to images inside a stacked gallery.
#stacked-galllery-ID img {
margin-top: 20px;
margin-bottom: 20px;
I don't have a stacked gallery to look at, otherwise I could probably tell you what the selector needs to be.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
For example I found this in the code inspector:
<div class="entry-content">
<div id='ttg-stack-1' class='ttg-post-gallery ttg-stack ttg-stackid-248 ttg-stack-columns-1 ttg-stack-size-large'>
<div class='ttg-stack-item grid_6 gutter_1px clearfix'>
<div class='ttg-stack-icon'>
<a id='image-245' href='http://localhost/wp-content/uploads/2016/01/IMG_0030-855x1140.jpg' onclick='return hs.expand(this,{ slideshowGroup: "ss-1", maxWidth: 855 })'>
<img class='size-large border shadow' src='http://localhost/wp-content/uploads/2016/01/IMG_0030-855x1140.jpg' width='855' height='1140' alt='' title='IMG_0030' data-large-rendition='http://localhost/wp-content/uploads/2016/01/IMG_0030-855x1140.jpg' data-full-rendition='http://localhost/wp-content/uploads/2016/01/IMG_0030.jpg' data-width='855' data-height='1140' data-permalink='http://localhost/img_0030/' />
</a>
</div>
</div>
<div class='ttg-stack-item grid_12 gutter_1px clearfix'>
<div class='ttg-stack-icon'>
<a id='image-36' href='http://localhost/wp-content/uploads/2016/01/TR-20140329-Hochfuegen-008-2-1140x760.jpg' onclick='return hs.expand(this,{ slideshowGroup: "ss-1", maxWidth: 1140 })'>
<img class='size-large border shadow' src='http://localhost/wp-content/uploads/2016/01/TR-20140329-Hochfuegen-008-2-1140x760.jpg' width='1140' height='760' alt='Hochfügen - Winter 2013' title='Snowscape Impressions' data-large-rendition='http://localhost/wp-content/uploads/2016/01/TR-20140329-Hochfuegen-008-2-1140x760.jpg' data-full-rendition='http://localhost/wp-content/uploads/2016/01/TR-20140329-Hochfuegen-008-2.jpg' data-width='1140' data-height='760' data-permalink='http://localhost/post-1/snowscape-impressions/' />
</a>
</div>
</div>
<div class='ttg-stack-item grid_12 gutter_1px clearfix'>
<div class='ttg-stack-icon'>
<a id='image-11' href='http://localhost/wp-content/uploads/2016/01/paypal-Bild-privat.jpg' onclick='return hs.expand(this,{ slideshowGroup: "ss-1", maxWidth: 517 })'>
<img class='size-large border shadow' src='http://localhost/wp-content/uploads/2016/01/paypal-Bild-privat.jpg' width='517' height='517' alt='' title='paypal Bild privat' data-large-rendition='http://localhost/wp-content/uploads/2016/01/paypal-Bild-privat.jpg' data-full-rendition='http://localhost/wp-content/uploads/2016/01/paypal-Bild-privat.jpg' data-width='517' data-height='517' data-permalink='http://localhost/paypal-bild-privat/' />
</a>
</div>
</div>
<hr class='stealth' />
</div><!-- .ttg-stack -->
How do I have to modify your term:
#stacked-galllery-ID img {
margin-top: 20px;
margin-bottom: 20px;
and where do I have to insert it in the style.css file?
Many thanks in advance
Offline
try:
#ttg-stack-1 img {
margin-top: 20px;
margin-bottom: 20px;
}Or it may need to be
.ttg-stack img {
margin-top: 20px;
margin-bottom: 20px;
}In the inspector there should be a tab named "style editor" or some such. If you click on that you should see a list of css files, including your custom.css file. (I believe you're already set up with custom css via phplugins?)
Click on your custom.css file and add the new code to the end of it. This way you can test new css without the need of updating and uploading your custom.css file. If it works, then update and upload the file.
Or you could just update and upload and see what happens.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Great, works pretty fine, thx.
Only one last think I want to adjust.
Under Theme options, Supplemental Image Classes I can enter "border shadow".
Where do I have to make further adjustment as far as e.g color, px value for borders and shadow and so on is concerned?
Only for my interest: Moreover for a single image I can make adjustments under image details, advanced option, image css class.
Which css file will get these updates?
In case of editing a gallery (relevant for the above mentioned stacked images) I cannot adjust these css details. Probably again in the style.css file? What are the necessary terms to add there? Do you also have an idea for this concern?
Offline
Where do I have to make further adjustment as far as e.g color, px value for borders and shadow and so on is concerned?
You would need to recreate the .border and .shadow classes, making the changes you want, and put them in custom css.
Only for my interest: Moreover for a single image I can make adjustments under image details, advanced option, image css class.
Which css file will get these updates?
This is where you would type in a css class. You would need to add this class to custom css.
In case of editing a gallery (relevant for the above mentioned stacked images) I cannot adjust these css details. Probably again in the style.css file? What are the necessary terms to add there? Do you also have an idea for this concern?
You should make any css changes in your custom.css file, not style.css. style.css will get overwritten each time you make a change to your theme and export.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
You should make any css changes in your custom.css file, not style.css. style.css will get overwritten each time you make a change to your theme and export.
Yes, I know. I will do so after putting the blog on the server. For the time being I act only with localhost an my hard drive.
subsequent updates working fine for me:
#ttg-stack-1 img {
margin-top: 10px;
margin-bottom: 10px;
border-bottom: 3px solid #000000;
border-top: 3px solid #000000;
border-left: 3px solid #000000;
border-right: 3px solid #000000;
box-shadow: 1px 10px 10px rgba(0,0,0,0.4);
}
Offline
Use .ttg-stack, not #ttg-stack-1.
If you have more than one gallery appearing on a page, you would then also have #ttg-stack-2, etc. and your rules wouldn't apply to those subsequent galleries.
Offline
Pages: 1