This question is not answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 7 - Pages: 1 - Last Post: 16-Jun-2018 11:38 Last Post By: linuxrog Threads: [ Previous | Next ]
jGromit

Posts: 34,400
Registered: 31-Jan-2006
ZigZag background image options
Posted: 14-Jun-2018 00:42
 
  Click to reply to this thread Reply
Attachment beige051.jpg (2.2 KB)
ZigZag uses the theme image for its page background. That's something of a perversion of what I long agitated for with regards to supporting theme images - every other skin uses them as a page banner. Personally, I find the cropping choices confusing - how is a user supposed to know what cropping bounds to use?

In any event, one of the problems with this is that using an image as a page background often produces a visual mess. The background image simply draws the visitor's attention away from the album images, which tends to defeat the purpose. So, I thought, why not just use a little background texture image for the page background, like the one attached? Choose it as the theme image, apply no cropping, and exclude it from the album.

Well, I quickly found out why that was a non-starter. ZigZag "helpfully" stretches the image to cover the viewport instead of repeating it. Not really what I had in mind.

Two possible fixes. First, this could be a checkbox in the skin settings somewhere - Repeat background image. Second, this can be fixed with just a single line of CSS:
body {background-size: auto;}

But ZigZag provides no way for a user to add his own CSS - he's stuck with editing the skin's template file, common.css, never a good idea. And the absence of this option has already come up in several other contexts - time to add it!
jGromit

Posts: 34,400
Registered: 31-Jan-2006
Re: ZigZag background image options
Posted: 14-Jun-2018 13:43   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
BTW, if the hapless ZigZag developer decides to provide a skin setting for user-supplied CSS, it's the soul of simplicity. Define the field as a JSmartTextArea, and wrap it in a scroll pane, to allow for lots of stuff.

Then, in common.css, run it through the template processor so that it can handle things like scriptlets. Last line of common.css, for example:
<ja:if exists="insertCss"><%=engine.processTemplate(insertCss)%></ja:if>
linuxrog

Posts: 302
Registered: 21-Nov-2008
Re: ZigZag background image options
Posted: 15-Jun-2018 20:23   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
Another altermative to solve this is to create a blank page filled with color but larger than your suggested image. I did that here, Directions , after you pointed out that I had a "visual mess." So, Zigzag could default to a blank image supplied by default; maybe add the option of selecting a color in settings.

Just for fun, check out the first comment: I used stying to make it stand out distinctly from other comments.

Parenthetically, now I'm stuck without a separator! Gotta figure out how that happened. One of the hazards of, as you point out, editing common.css, etc.

/Roger
jGromit

Posts: 34,400
Registered: 31-Jan-2006
Re: ZigZag background image options
Posted: 15-Jun-2018 21:19   in response to: linuxrog in response to: linuxrog
 
  Click to reply to this thread Reply
linuxrog wrote:
...Zigzag could default to a blank image supplied by default; maybe add the option of selecting a color in settings.

Edit: I thought the skin allowed for this, but it doesn't. The "item background color" setting applies to the comment boxes, but not to the page background. This is a sufficiently common requirement, the skin should accommodate it. If you remove the theme image, you should be able to set a solid page background color.

As it is, you're stuck with editing common.css again, and adding, for example:
body {background-color:red;}

This doesn't kick in unless you remove the theme image, of course - right-click in the Theme image box in the Explore view, and choose Remove

Parenthetically, now I'm stuck without a separator!

The file you're trying to use, line.zigzag.jpg, isn't present.

Folks (not just you), you really need to learn how to use the developer's console in your browser (Chrome or Firefox). It makes tracking down things like this very, very simple. You can experiment with changing the CSS, you can figure out why an image isn't being shown, and so on. No guesswork needed.

Edited by: jGromit on 15-Jun-2018 16:07
jGromit

Posts: 34,400
Registered: 31-Jan-2006
Re: ZigZag background image options
Posted: 15-Jun-2018 21:57   in response to: linuxrog in response to: linuxrog
 
  Click to reply to this thread Reply
linuxrog wrote:
Just for fun, check out the first comment: I used stying to make it stand out distinctly from other comments.

And you've broken the HTML in the process. That's why it's not centered, among other things. And if you want to get people lost, misspelling the name of the street is a good way to go about it! ;)

I'll go through this once. First, reinstall ZigZag, and don't alter the index.htt file. We're going to do all of this with CSS. Best to keep it all in one place.

Now, for your first comment, enter it like this:
<b>Destination — Parkview Bldg.</b><br>3112 Gracefield Road<br>Silver Spring, MD<br><span style="font-size:small;">Google maps may not show route<br>upon entry into Riderwood Village.</span>

Do not create a new <div> - this is what breaks the HTML.

Now edit common.css and enter this at the very end:
.item h2 {display:none;}
.item:first-of-type p {border:2px solid blue; padding-bottom:5px;}
hr {height:30px;}

You may want to tinker with the height on the hr element. Since you're using a line, the default height ends up taking up too much screen real estate, IMO.

And if you also want to eliminate the separator on the first comment, add this to the CSS changes:
.item:first-of-type hr {display: none;}
jGromit

Posts: 34,400
Registered: 31-Jan-2006
Re: ZigZag background image options
Posted: 15-Jun-2018 22:07   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
Attachment ss004027.png (315.6 KB)
And this is what it looks like.
linuxrog

Posts: 302
Registered: 21-Nov-2008
Re: ZigZag background image options
Posted: 15-Jun-2018 22:32   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
You said,
JGromit wrote:
The file you're trying to use, line.zigzag.jpg, isn't present.

Folks (not just you), you really need to learn how to use the developer's >console in your browser (Chrome or Firefox). It makes tracking down >things like this very, very simple. You can experiment with changing the >CSS, you can figure out why an image isn't being shown, and so on. No >guesswork needed.


I know, I need to learn how to quote your comment . . .

Ah, not present! As previously instructed, I had placed line.zigzag.jpg in a folder and pointed to it in dialog, Settings / Separator image. It was there but did not get picked-up by the skin! I guessed, contrary to what you suggested, about file locations, and found separator images in multiple folder, namely, . . . /Zigzag/styles, namely, classic, gold, and modern. If I put line.zigzag.jpg in the correct style folder, jAlbum does find it.

You were correct about guessing . . . I see local copies of styles, etc., as well as in system files (root).

I'm a larnin. On to your next comments.

Thanks.

P.S. Firefox debugging was of no help to me. Not familiar with that tool.

Edited by: RobM on 16-Jun-2018 10:36
Quoted comment
linuxrog

Posts: 302
Registered: 21-Nov-2008
Re: ZigZag background image options
Posted: 15-Jun-2018 22:35   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
There is a lot to digest here as I'm not really a "developer." Thanks for catching the typo. Can't blame auto-correct for that one. I will save the rest for another day . . . my wife keeps peeking over my shoulder and wondering why I'm spending so much time on this. They just don't understand.

From Anacostia North, THANKS for the opportunity to learn more.

/R
Legend
Forum admins
Helpful Answer
Correct Answer

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