Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2019-01-11 19:36:15

bernard45
Member
Registered: 2015-08-18
Posts: 71
Website

Image top margin in single image page

Is it possible to change the top margin above (image + pagination buttons) ?
CSS ?

Offline

#2 2019-01-11 21:54:06

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

Re: Image top margin in single image page

Do you want it just on single image pages or also on album and album set pages as well?


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#3 2019-01-11 23:28:41

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

Re: Image top margin in single image page

I can see a way to do this in the page template (just change breadcrumb padding in the Content section of the template), but it will affect the entire album, including the thumbnail grid.

I can see no easy way of doing this with custom css for the single-image page only. I see no selector above the breadcrumbs that identifies the page as being a single-image page (needed to target single-image pages specifically)

It might be possible with jQuery using a function that checks to see if a certain element exists (has length) and if so, add styling to another element (ul.breadcrumbs)

there are a couple of elements on the page that might work for this, like .single_image

I'd have to spend some time digging into this though (learn more jQuery -- not a bad thing!)



It might also be possible with phplugins and some code that determines if the page is using a url that includes the word "single", if so, apply more padding-top to the the ul.breadcrumbs selector.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#4 2019-01-12 00:07:04

bernard45
Member
Registered: 2015-08-18
Posts: 71
Website

Re: Image top margin in single image page

What I had in mind was below breadcrumbs, for (any)image-page only, ie between breadcrumbs and image.
But ok, if it's possible....

Offline

#5 2019-01-12 00:08:07

bernard45
Member
Registered: 2015-08-18
Posts: 71
Website

Re: Image top margin in single image page

sorry, I meant if it's not possible

Offline

#6 2019-01-12 00:28:40

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

Re: Image top margin in single image page

Below breadcrumbs is entirely possible.

not sure why I read "pagination buttons" as breadcrumbs... too early in the morning most likely


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#7 2019-01-12 00:36:53

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

Re: Image top margin in single image page

this looks like it works:

ul.single_icons {
  margin-top: 60px !important;
}

adjust margin-top to your liking.

It should probably go in a media query so that the extra margin isn't added on mobile devices.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#8 2019-01-12 00:44:32

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

Re: Image top margin in single image page

here's the rule in a media query. Adjust the min-width according to the devices you want to affect. With this, the top-margin setting affects only browser widths 1025 px and wider. So on an iPad in landscape mode, the margin won't be applied.

@media only screen and (min-width: 1025px) {
       ul.single_icons {
       margin-top: 60px !important;
    }
}

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#9 2019-01-12 02:11:32

bernard45
Member
Registered: 2015-08-18
Posts: 71
Website

Re: Image top margin in single image page

Hi Rod, fantastic it works, exactly what I was looking for !
Thanks

Offline

#10 2019-01-12 02:12:54

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

Re: Image top margin in single image page

wink


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

Board footer

Powered by FluxBB