Image top margin in single image page

bernard45 · 2019-01-11 19:36:15

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

rod barbee · 2019-01-11 21:54:06

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

rod barbee · 2019-01-11 23:28:41

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.

bernard45 · 2019-01-12 00:07:04

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

bernard45 · 2019-01-12 00:08:07

sorry, I meant if it's not possible

rod barbee · 2019-01-12 00:28:40

Below breadcrumbs is entirely possible.

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

rod barbee · 2019-01-12 00:36:53

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 barbee · 2019-01-12 00:44:32

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;
    }
}

bernard45 · 2019-01-12 02:11:32

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

rod barbee · 2019-01-12 02:12:54

Community @ The Turning Gate

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

Image top margin in single image page

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

Re: Image top margin in single image page

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

Re: Image top margin in single image page

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

Re: Image top margin in single image page

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

Re: Image top margin in single image page

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

Re: Image top margin in single image page

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

Re: Image top margin in single image page

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

Re: Image top margin in single image page

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

Re: Image top margin in single image page

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

Re: Image top margin in single image page

Board footer