Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2016-01-17 04:21:55

dvdfan001
Member
Registered: 2014-04-27
Posts: 157

Stack gallery type

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

#2 2016-01-17 07:30:50

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,164
Website

Re: Stack gallery type

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 1.1.1 test site, Pangolin test site

Offline

#3 2016-01-17 07:58:28

dvdfan001
Member
Registered: 2014-04-27
Posts: 157

Re: Stack gallery type

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

#4 2016-01-17 08:08:13

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,164
Website

Re: Stack gallery type

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 1.1.1 test site, Pangolin test site

Offline

#5 2016-01-17 08:57:31

dvdfan001
Member
Registered: 2014-04-27
Posts: 157

Re: Stack gallery type

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

#6 2016-01-17 09:04:58

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,164
Website

Re: Stack gallery type

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 1.1.1 test site, Pangolin test site

Offline

#7 2016-01-17 10:19:04

dvdfan001
Member
Registered: 2014-04-27
Posts: 157

Re: Stack gallery type

rod barbee wrote:

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

#8 2016-01-17 13:32:48

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 4,958
Website

Re: Stack gallery type

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.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

Board footer

Powered by FluxBB