This question is answered.


Permlink Replies: 22 - Pages: 2 [ 1 2 | Next ] - Last Post: 1 Aug 22, 12:06 Last Post By: InkAura
InkAura

Posts: 12
Registered: 24-Jun-2022
Saturn template tweaks question please
Posted: 24 Jun 22, 22:26
 
  Click to reply to this thread Reply
Attachment Capture.JPG (114.9 KB)
Please accept my apologies if this is in the wrong form - so i have finally decided a template and fine tuned it to a degree but still have 2 things left im trying to achieve and don't believe its in the standard setting and will require a code change of sorts

can anyone point me in the right direction or what file to look in to try and find the code that may contribute to this - the template im using is Saturn and im trying to achieve the following

1: left alignment of the images to left of page and any corresponding text under image
2: where is says ceramic tile in the title bar get some more text / a couple of paragraphs in there

any pointers would be welcomed - image attached

thanks shane

Edited by: InkAura on 24 Jun 2022, 22:26
JeffTucker

Posts: 8,039
Registered: 31-Jan-2006
Re: Saturn template tweaks question please
Posted: 24 Jun 22, 22:53   in response to: InkAura in response to: InkAura
 
  Click to reply to this thread Reply
Attachment thumbsleft.png (735.9 KB)
Attachment albumtitle.png (68.1 KB)
Attachment foldertitle.png (131.0 KB)
If you actually want to push the thumbnail table to the left of the viewport, and to left-align the caption, enter this under Saturn > Code > CSS:
#ja-fthumbs, #ja-thumbs {margin: 0px 0px 10px;}
.ja-fthumbcaption, .ja-thumbcaption {text-align: left; padding-left: 10px;}
You might want to vary the left padding on the caption to place it better.

But you're going to have problems with that. If the last row contains a different number of thumbnails, the layout will insist upon centering that last row of thumbnails below the others. Changing this would require a wholesale change to the structure of the page, which is not something you can do with some code tweaks. See thumbsleft.png.

For the title bar text, you can enter as much as you want in the album title, album description, folder title, and folder comment. See albumtitle.png and foldertitle.png for examples.

You could also put text into a block of text between the title bar and the thumbnails by entering it under Saturn > Code > Top & Bottom Info.
InkAura

Posts: 12
Registered: 24-Jun-2022
Re: Saturn template tweaks question please
Posted: 24 Jun 22, 22:53   in response to: InkAura in response to: InkAura
 
  Click to reply to this thread Reply
thanks for such a detailed reply and taking the time - its greatly appreciated

Edited by: InkAura on 24 Jun 2022, 22:53

Edited by: InkAura on 24 Jun 2022, 22:55

JeffTucker

Posts: 8,039
Registered: 31-Jan-2006
Re: Saturn template tweaks question please
Posted: 25 Jun 22, 02:20   in response to: InkAura in response to: InkAura
 
  Click to reply to this thread Reply
Actually, you can defeat the last-row centering. Saturn > Code > CSS:
#ja-fthumbs, #ja-thumbs {margin: 0px 0px 10px; text-align: left;}
.ja-fthumbcaption, .ja-thumbcaption {text-align: left; padding-left: 10px;}
But it looks lousy. Having everything jammed to the left on a web page looks like something from a 13-year-old's first web page, in about 1997. ;)
InkAura

Posts: 12
Registered: 24-Jun-2022
Re: Saturn template tweaks question please
Posted: 25 Jun 22, 17:57   in response to: JeffTucker in response to: JeffTucker
 
  Click to reply to this thread Reply
thanks Jeff ok so after many days of trialling many software's and many hours in front of this screen and go through the instruction manual on your site - i am finally getting close to the image in my mind lol, i have attached an image of the outstanding things im trying to achieve - some of them may need a custom code and some may not only you could tell me this.

regarding the colours its a custom colour im trying to achieve so would have to enter the # hex code

i have posted another pic Screenshot 2022-06-25 165524 which when you see will understand why im trying to get left alignment

it may seem a lot of work but it's not one post its many in a series similar posts that will be same layout.

Thankyou
JeffTucker

Posts: 8,039
Registered: 31-Jan-2006
Re: Saturn template tweaks question please
Posted: 25 Jun 22, 18:32   in response to: InkAura in response to: InkAura
Helpful
  Click to reply to this thread Reply
Attachment pushleft.png (737.0 KB)
Lots of carefully-crafted CSS that needs to be turned off! But none of it particularly mysterious. Saturn > Code > CSS:
#ja-navleft, #ja-navright {display: none;}
#ja-nothemebanner > div, .ja-pagetitle, .ja-pagedescription, .ja-infotxt {margin: 0px; text-align: left;}
#ja-fthumbs, #ja-thumbs {margin: 0px 0px 10px; padding: 0px; text-align: left;}
.ja-fthumbcaption, .ja-thumbcaption {text-align: left; padding-left: 10px;}
In a test album, screenshot attached. You might want to tinker with adding some padding-left to some things, just to prevent them from hugging the left side of the frame too closely.

The color changes are the easy part. Just choose the Custom style of Saturn, then hit the Saturn > Custom panel, where you can make things any color you like. You can choose one of the preset styles as the starting point, then just change the things you want to alter.
InkAura

Posts: 12
Registered: 24-Jun-2022
Re: Saturn template tweaks question please
Posted: 25 Jun 22, 20:04   in response to: JeffTucker in response to: JeffTucker
 
  Click to reply to this thread Reply
thankyou so much

it's perfect and the finish line is in sight just 1 small point

1 the yellow line i drew to the left of the image - basically the frame - i changed to the same colour as the background which is why you cannot see it im guessing this is what is stopping the pictures aligning to the left to match the text ? - any solution for this

image attached

its also reporting this in the box to get the embed code and nothing else

Albums created with this skin should never be embedded in an iframe on another page.

Edited by: InkAura on 25 Jun 2022, 20:34

Edited by: InkAura on 25 Jun 2022, 20:53

JeffTucker

Posts: 8,039
Registered: 31-Jan-2006
Re: Saturn template tweaks question please
Posted: 25 Jun 22, 20:55   in response to: InkAura in response to: InkAura
 
  Click to reply to this thread Reply
Attachment nosurround.png (719.7 KB)
The thumbnail images aren't hard against the left side because the skin, by default, places a surround around the thumbnails. Changing the color doesn't make it take up less space. To turn it off, another bit of CSS. I've made some other changes, since you seem to want to get rid of any and all aesthetics, and I'm guessing you're not using folders at all (so no sense including the CSS for them):
#ja-nothemebanner {margin: 0px;}
#ja-navleft, #ja-navright {display: none;}
#ja-nothemebanner > div {padding: 0px 10px;}
#ja-nothemebanner > div, .ja-pagetitle, .ja-pagedescription, .ja-infotxt {margin: 0px; text-align: left; min-height: 0px;}
#ja-thumbs {margin: 0px; padding: 0px; text-align: left;}
#ja-thumbs > div > div:first-of-type {padding: 0px;)
.ja-thumbcaption {text-align: left; padding: 0px;}
The "padding?" in one of your screen shots is simply a CSS box-shadow. Saturn > Title Bar > Borders > Shadow > 0px.

You really, really need to learn how to use the browser's developer tool bar. You could work out most of these things yourself, with just a little tinkering. At this point, it's all just a matter of setting the correct padding values to get things to line up the way you want them to.
InkAura

Posts: 12
Registered: 24-Jun-2022
Re: Saturn template tweaks question please
Posted: 25 Jun 22, 21:06   in response to: JeffTucker in response to: JeffTucker
 
  Click to reply to this thread Reply
thankyou i will have a look at the browsers development toolbar

with regards to the code you posted images are still not far left

kind regards shane
JeffTucker

Posts: 8,039
Registered: 31-Jan-2006
Re: Saturn template tweaks question please
Posted: 25 Jun 22, 21:11   in response to: InkAura in response to: InkAura
 
  Click to reply to this thread Reply
InkAura wrote:
its also reporting this in the box to get the embed code and nothing else

Albums created with this skin should never be embedded in an iframe on another page.


Yes, because that's something you should not do.

The skin is designed to produce pages that are fully responsive to the dimensions of the viewport. It is possible, but very tricky, to produce a responsive iframe, then embed the album in it. But if you're creating an iframe of fixed dimensions, you are dooming visitors who have a monitor that's bigger or smaller than yours to being lumbered with an image display that's either comically small, or that spills out beyond the edges of the monitor, and requires scrolling up and down to see the whole image. Remember, if you use an iframe, the lightbox display of the slide image will have dimensions that are limited not by the size of the viewport, but by the size of the iframe. That may be much smaller or much larger than the viewport.

But if you insist upon putting the album in an iframe, there's no "magic" code to make that happen. It's just a standard iframe with a src attribute pointing to the album.
InkAura

Posts: 12
Registered: 24-Jun-2022
Re: Saturn template tweaks question please
Posted: 25 Jun 22, 21:13   in response to: JeffTucker in response to: JeffTucker
 
  Click to reply to this thread Reply
Hi jeff

i didn't realise i was trying to do that - it must be a setting i have changed and will find it

thanks
JeffTucker

Posts: 8,039
Registered: 31-Jan-2006
Re: Saturn template tweaks question please
Posted: 25 Jun 22, 21:15   in response to: InkAura in response to: InkAura
 
  Click to reply to this thread Reply
If you're not trying to put the album into an iframe, why are you looking for the "embed code?"
JeffTucker

Posts: 8,039
Registered: 31-Jan-2006
Re: Saturn template tweaks question please
Posted: 25 Jun 22, 21:21   in response to: InkAura in response to: InkAura
 
  Click to reply to this thread Reply
InkAura wrote:
with regards to the code you posted images are still not far left

I can't debug a screenshot. I need a link to the album.
InkAura

Posts: 12
Registered: 24-Jun-2022
Re: Saturn template tweaks question please
Posted: 25 Jun 22, 21:30   in response to: JeffTucker in response to: JeffTucker
 
  Click to reply to this thread Reply
Clearly a newbie here yes you are right was trying to insert it

will research some more thank you Jeff
JeffTucker

Posts: 8,039
Registered: 31-Jan-2006
Re: Saturn template tweaks question please
Posted: 25 Jun 22, 21:35   in response to: InkAura in response to: InkAura
Helpful
  Click to reply to this thread Reply
The thing to remember is that most jAlbum skins produce complete web pages, intended to stand on their own. They're not like some sort of "plug ins" that create little code chunks for showing things within another page.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums