Tweaking buttons and text color ...

cwardnl

Posts: 8
Registered: 30-Jun-2018

Tweaking buttons and text color
Posted: 8 Dec 22, 15:54

Hello,

I've upgraded to the latest Tiger and jAlbum from a 2020 version and my old album settings obviously no longer work, so I'm trying to re-create them. For a few items my previous CSS modifications and new experiments studying / modifying the code (in Chrome, F12) are not working. It would be great if I could get some help with the following items from someone much better at HTML / CSS than I am:

How do I set the color, background color and hover color for the "scroll up arrow" button at the bottom of a page and the "up one level bent arrow" button in Hero when you've descended into a folder?
How do I make the forwards and backwards buttons (in a folder) have only text without an image or black background?
I have set "Text color" in Settings - Tiger - Site - Design - Site but the actual color I see seems to have white mixed in to the color I specify. How is this working?
In Settings - Tiger - Site - Footer I have this code:

<div class="mybackLink"><a href='../index.html'>Return Back</a></div>

I do this (instead of using the "Custom link" field) because I want my button to be below, not to the right of the image count. However, it would look better with a bit of space below it. What's the best way to code that?

Thank you very much in advance.

Laza

Posts: 1,549
Registered: 6-Sep-2005

Re: Tweaking buttons and text color
Posted: 13 Dec 22, 11:27

in response to: cwardnl

Helpful

Here's the CSS code (Settings / Tiger / Advanced / Custom code / CSS):

.scrollup.button {
	background-color: teal;
	color: white;
}
.scrollup.button:not(.disabled):hover {
	background-color: black;
}
.hero header .back-btn {
	background-color: teal;
}
.hero header .back-btn:hover {
	background-color: black;
}
.prev-next-links .cont > * { 
	background-color: transparent;
	box-shadow: none;
}
.prev-next-links a.button {
	color: inherit;
	background-color: inherit;
	padding: 0;
}
.mybackLink {
  margin-bottom: 1rem;
}

"the actual color I see seems to have white mixed in to the color I specify"

This should not happen. What are the settings?

cwardnl

Posts: 8
Registered: 30-Jun-2018

Re: Tweaking buttons and text color
Posted: 13 Dec 22, 18:52

in response to: Laza

	samp5.jpg (24.1 KB)
	samp4.jpg (63.6 KB)
	samp3.jpg (64.8 KB)
	samp2.jpg (64.0 KB)
	samp1.jpg (66.1 KB)

Thank you very much for your help Laza, that works well.

Basically I'm trying to get consistent text colors on a Tiger page with folder name text with image count, Hero text, and image count text in the footer easily programmable and able to (in many cases) match each other. I'm struggling with this.

If I take the included Tiger Sample Project and make "Text color" bright red and "Link color" bright green, instead I get a mix of red and white (pink) on all text except Hero text (stays white) and a mix of green and white on my bottom link. (samp1 picture)
If I then try to make "Text color" black then all text (except Hero) becomes grey, even if I make boxes background light. (samp2 picture)
I now see that if I make the "Background color" bright and "Text color" white, Folder text actually becomes black, however image count text in the footer stays light. (samp3 picture)

So what I observe is:

Hero text color is set separately from all other text color. I think I can use this CSS to set it by hand which seems to work:

.hero header .description { color: #222222 }
.hero header h1 { color: #222222 }

There appears to be an algorithm that keeps Folder text either lighter or darker that is opposite of "Background color", and setting "Text color" can influence it a bit in some cases.
Same thing for Footer text, it seems to be somewhat automatically set by the color "Footer". This also includes the "Return Back" link I added.

On my own albums I have a case with darker background, box and footer colours and the folder text appears bright white and I can't lower its brightness. (samp4 picture) Note here I also used this CSS to remove the black gradient behind Hero:

.hero header .title { background: none; }

Any suggestions you can give to help me better control the various text colours would be greatly appreciated.

One other question: inside my folder pages I'm getting the "Top bar" added but I want to disable it since I am trying to disable all buttons there. (samp5 picture) I think it might be doing this because in your "top-bar.inc" code I see a variable "hasHomeBtn" which is set True if variable "level" > 0. (I think level may reflect the setting here in the GUI: Settings - Tiger - Site - Top bar - Depth, and I cannot set that to 0, it keeps resetting to 1.) But if you can suggest the best way to disable the Top bar then that would be great.

Thank you again, I appreciate your time.

Laza

Posts: 1,549
Registered: 6-Sep-2005

Re: Tweaking buttons and text color
Posted: 14 Dec 22, 10:48

in response to: cwardnl

I don't want to go through each and every color. You better look into the common.css file in the skin directory (Ctrl-Shift-S), which does these calculations. I was struggling a lot to provide acceptable results along with every color the users set, however, any text color besides black and white is able to ruin a web page

.

cwardnl

Posts: 8
Registered: 30-Jun-2018

Re: Tweaking buttons and text color
Posted: 15 Dec 22, 11:47

in response to: Laza

OK, thanks for the tip. You are right about the ugly colours.

I was using them simply to test how the website colours were being modified from what I set in Settings. Then my last 2 questions which I can't yet solve myself:

How do I get rid of the top bar? (samp5 in my previous post) It's not there at the top level but once I go into a folder then it appears and I'd rather it not take space since I'm only using 1 hierarchy layer. (all "Top navigation" buttons are disabled in Settings)
How do I make the image transparent on hover in a forwards or backwards button? (it used to on older versions of Tiger) And the text centered vertically? (it's on the bottom)

Thanks.

Laza

Posts: 1,549
Registered: 6-Sep-2005

Re: Tweaking buttons and text color
Posted: 15 Dec 22, 12:43

in response to: cwardnl

Helpful

The Home page button on the subfolders is not removable now. I will fix this for the next release.

Unfortunately, the Previous/Next links' background images cannot be made transparent now, as they are CSS background images, which cannot be made transparent. I tried, but could not make it work.

cwardnl

Posts: 8
Registered: 30-Jun-2018

Re: Tweaking buttons and text color
Posted: 17 Dec 22, 20:24

in response to: Laza

OK, thanks for your feedback, I appreciate it.