This question is answered.


Permlink Replies: 12 - Pages: 1 - Last Post: 12 Jan 22, 16:35 Last Post By: jret Threads: [ Previous | Next ]
jret

Posts: 76
Registered: 5-Mar-2009
Neptune: title background opacity question
Posted: 11 Jan 22, 14:49
 
  Click to reply to this thread Reply
Is it possible to have a top to bottom gradient (darker to transparent) in the title background? I think that normally a gradient would not be practical but I'm trying for a different look where a gradient might enhance the title background. I've studied the CSS - even experimented a little bit - but it's either impossible, impractical, or beyond my knowledge set.

FYI - at first I wasn't too keen on some of the changes implemented in Neptune but I've really grown to like Neptune - a LOT. Thanks for creating a wonderful skin. Very much appreciated.
JeffTucker

Posts: 8,178
Registered: 31-Jan-2006
Re: Neptune: title background opacity question
Posted: 11 Jan 22, 15:42   in response to: jret in response to: jret
 
  Click to reply to this thread Reply
Have you experimented with Neptune > Title Bar > Theme Image > Gradient title background? The setting for Title background opacity then controls the darkness at the top of the banner.
jret

Posts: 76
Registered: 5-Mar-2009
Re: Neptune: title background opacity question
Posted: 11 Jan 22, 17:34   in response to: JeffTucker in response to: JeffTucker
 
  Click to reply to this thread Reply
Yes, I've tried that and it is the effect that I want except that I want to use it when the Parallax theme image is checked. What I'm attempting is to have the title background (with gradient) at the top of the page using the Parallax. I'm probably not describing it very well but go to this LINK to see an example. I like the Parallax feature but would also like to have the title background at the top with a gradient that would allow the icons/titles to display clearly, especially when the background is too light.

When the title background is positioned lower (not touching the top) the gradient doesn't make a lot of sense and perhaps it doesn't make much sense at all - but it was something I wanted to try. The example in the link could probably benefit from a darker background but a smooth gradient from dark to transparent seems more appealing than an abrupt delineation at the image. If possible, great - if not, all is OK - Neptune is a great skin.
JeffTucker

Posts: 8,178
Registered: 31-Jan-2006
Re: Neptune: title background opacity question
Posted: 11 Jan 22, 18:45   in response to: jret in response to: jret
Correct
  Click to reply to this thread Reply
First, turn off the built-in dimming background - Neptune > Title Bar > Theme Image > Title background opacity: 0%

Then try some custom CSS:
.ne-pagetitleTI {background-image: linear-gradient(to bottom, rgb(0 0 0 / 0.7), transparent); min-height: 200px;}
You can tinker with the 0.7 to make it darker (up to a max of 1.0), or lighter. The min-height has the effect of spreading the dimming background further down the page, so it's more visible. Without that, it doesn't have much vertical space to play with.
JeffTucker

Posts: 8,178
Registered: 31-Jan-2006
Re: Neptune: title background opacity question
Posted: 11 Jan 22, 19:31   in response to: jret in response to: jret
 
  Click to reply to this thread Reply
Glad you like the skin - I wish more people would give it a try. I've tried to configure things so that, without any messing around, you can get a polished, well laid-out album. But if you really want to tinker, I've kept the CSS fairly straightforward, without endlessly complicated selectors.

The parallax theme image, however, is a very tricky beast to handle - it took me forever to get it working properly in the first place, and modifying it is a bit of a minefield.
jret

Posts: 76
Registered: 5-Mar-2009
Re: Neptune: title background opacity question
Posted: 11 Jan 22, 22:50   in response to: JeffTucker in response to: JeffTucker
 
  Click to reply to this thread Reply
Worked perfectly - thanks so much plus I learned yet some more about CSS and how things work.
jret

Posts: 76
Registered: 5-Mar-2009
Re: Neptune: title background opacity question
Posted: 11 Jan 22, 22:55   in response to: JeffTucker in response to: JeffTucker
 
  Click to reply to this thread Reply
Appreciate your comment about wishing more people would try Neptune. I think if they did try it and spend a few moments trying the features most appealing to them, they would adopt it in a heartbeat. I really enjoyed Matrix and, while it was certainly an excellent skin for creating classy looking photo albums, Neptune is so many more steps forward. Just a treat to use.
rfm2

Posts: 68
Registered: 13-Dec-2007
Re: Neptune: title background opacity question
Posted: 12 Jan 22, 01:07   in response to: jret in response to: jret
 
  Click to reply to this thread Reply
I echo those sentiments heartily. I also was a hard core Matrix fan (I still have over 400 albums posted with it), and I did whine mightily when it was sent to the old age home. After switching all new albums to Neptune a couple of years ago, the Neptune albums not only have a much more modern/sleek look, the compatibility with mobile devices is critical since so many of my viewers now use that method of access. Jeff's support (as you have just seen) is, and always has been, over the top
jret

Posts: 76
Registered: 5-Mar-2009
Re: Neptune: title background opacity question
Posted: 12 Jan 22, 05:08   in response to: JeffTucker in response to: JeffTucker
 
  Click to reply to this thread Reply
Hit a slight snag. If there is any content in Title Description it's pushed down past the min-height - at least that's what I believe is happening. See LINK

I haven't begun to experiment but it occurred to me that one solution would be change the min-height to equal the height of ne-pagetitleTI and reconfigure the gradient to match up to a CSS gradient for pagedescription. I'm guessing at least one "gotcha" with this approach would be a visible line where the two gradients meet.

Another thought I had would be to leave the gradient as-is and put a negative top-margin value on the pagedescription CSS.

Before proceeding with trial & error experimentation I thought I would ask you for the best solution.
JeffTucker

Posts: 8,178
Registered: 31-Jan-2006
Re: Neptune: title background opacity question
Posted: 12 Jan 22, 14:24   in response to: jret in response to: jret
Helpful
  Click to reply to this thread Reply
jret wrote:
Hit a slight snag. If there is any content in Title Description it's pushed down past the min-height - at least that's what I believe is happening.

Yes, exactly. I knew that would be an issue within the first 30 seconds I spent looking at this, originally. The problem is that there's no HTML wrapper that encompasses both the title and the description, so there's no CSS that can affect them together.

Let me tinker a bit. I think there's a "clever" solution to it.

The real solution is to hack the skin's templates to create the missing wrapper, but I hesitate to go down that road, since any skin update will wipe it out again. And I don't want to add it to the skin permanently, since you may well be the only Neptune user who ever needs it. For the others - I call them The Four Hundred, in a nod to New York in the Gilded Age - it would just be code bloat.
jret

Posts: 76
Registered: 5-Mar-2009
Re: Neptune: title background opacity question
Posted: 12 Jan 22, 14:53   in response to: JeffTucker in response to: JeffTucker
 
  Click to reply to this thread Reply
Thanks for the explanation. It definitely confirms my suspicion that the solution is way above my pay grade - LOL.
JeffTucker

Posts: 8,178
Registered: 31-Jan-2006
Re: Neptune: title background opacity question
Posted: 12 Jan 22, 14:53   in response to: jret in response to: jret
Helpful
  Click to reply to this thread Reply
jret wrote:
Another thought I had would be to leave the gradient as-is and put a negative top-margin value on the pagedescription CSS.

I tried a few other things, but they all led down the path into "more byzantine than the last solution" territory. Negative top margin turns out to be the easiest to control, with no nasty side-effects that I can detect.
.ne-pagedescriptionTI {margin-top: -160px !important;}
ETA: Turns out you have to force the issue a bit - added !important.
jret

Posts: 76
Registered: 5-Mar-2009
Re: Neptune: title background opacity question
Posted: 12 Jan 22, 16:35   in response to: JeffTucker in response to: JeffTucker
 
  Click to reply to this thread Reply
negative top-margin worked fine. I've used it a couple times in the past without any ill side effects that I could observe. My impression is that negative margin settings should be avoided for the most part ... I believe it works fine in this situation. Thanks again for your help.

I have several pages to update, a task for later today or even tomorrow due to a crowded schedule.
Legend
Forum admins
Helpful Answer
Correct Answer

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