PVII Support Forums + General Web Design, CSS, and Dreamweaver Discussions

PVII Forums » PVII Product Support

PBX: First-time-user questions

(12 posts) (2 voices)

Started 9 months ago by wcamp
Latest reply from Sinclair

wcamp

online
Member

I've added a number of Pop Box Magic instances to an under-construction page. I believe that all instances are functioning as they should.

A couple of questions . . .

1. I'd like to restyle the pop-up balloons but want to be sure that I won't compromise PBX's functionality. Please scroll 2/3 down the page to a line of fifteen PBX text triggers beginning with "Hebrews 1:1-2." The first four text triggers open balloons that have the pbx-glass style; the remaining eleven have my customized gradient-background, without the "glass" styling. Before I choose which of the two styles to implement on this site, I'd like to consider creating a third rule that combines the "glass" look with the "gradient" look. Is there a risk in my assigning a new rule that combines the declarations of both rules?

2. The majority of <a> classes for all fifteen hyperlinks use "pbx-trigger pbx-trig-dark". The class that I assigned for the "Hebrews 11:1" link is "pbx-trigger pbx-trig-light". When the balloons open for the "dark" as well as "light" text triggers, I see no difference in light/dark or black/white text. I presume that my user class — pbx-hebrewsTooltip_gradient — overrides the designated "pbx-trigger pbx-trig-dark" and "pbx-trigger pbx-trig-light" class assignments. Right? If so, should I ignore or change anything to those entries? For example, should I change this entry for the "11:1" trigger?

<a href="#" class="pbx-trigger pbx-trig-light" data-pbx="p7PBX_8,0,500,1,3,400,0,150,0,0,0,0,1">11:1</a>

And in the PBX user interface, should I not be concerned with which dark or light option I select, since my custom "pbx-hebrewsTooltip_gradient class appears to override that option?

https://www.warrencampdesign.com/hebrews/part1/week1.php

Thanks, in advance, for your guidance going forward.

Warren

Posted 9 months ago
Sinclair

offline
Member

Warren,

1: No I don't think so, this is what I'd do to keep things simple, create/paste these rules in at the bottom of your p7PBX-01 stylesheet...

.greengrad {
background: rgb(164,179,87);
background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
}
.pinkgrad {
background: rgb(229,112,231);
background: -moz-linear-gradient(top, rgba(229,112,231,1) 0%, rgba(200,94,199,1) 47%, rgba(168,73,163,1) 100%);
background: -webkit-linear-gradient(top, rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%);
background: linear-gradient(to bottom, rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%);
}
.blugrad {
background: rgb(197,222,234);
background: -moz-linear-gradient(top, rgba(197,222,234,1) 0%, rgba(138,187,215,1) 31%, rgba(6,109,171,1) 100%);
background: -webkit-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%);
background: linear-gradient(to bottom, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%);
}

.... then create 3 test PBX instances in the first instance, put the word greengrad into the user class field, in the second instance use the word pinkgrad and third instances, use the word blugrad

Keep it simple, as little CSS as will get the job done.

2: The problem there is that your link style rules in the hebrew-styles stylehesheet are competing and winning some of the battle, it's a mix of declarations/rules - I think they look pretty good - up to you whether or not to adjust things. You could always try commenting out the link style rules in your hebrew-styles stylehesheet to see what happens!

HTH

Posted 9 months ago
wcamp

online
Member

Hi, Sinclair:

Regarding inquiry 1, I've spent a good amount of time following your directions regarding my creating custom PBX balloons having the "glass" style with a slight gradient-color background. Alas, too many variables made it confusing for me to figure out. I'm comfortable using only the default "glass-style" balloons.

Regarding inquiry 2, I don't think you answered my question so I reword it: Should I be concerned with the markup that reads as follows?
. . . pbx="p7PBX_15,0,505,1,3,400,0,150,0,0,0,0,1">7:20–22</a> <a href="#" class="pbx-trigger pbx-trig-dark" data-pbx="p7PBX_16,0,500,1,3,400,0,150,0,0,0,0,1">8:13</a> <a href="#" class="pbx-trigger pbx-trig-dark" data-pbx="p7PBX_7,0,500,1,3,400,0,150,0,0,0,0,1">9:15</a> <a href="#" class="pbx-trigger pbx-trig-dark" data- . . .

These and more include "class="pbx-trig-dark". They appeared because that option was the default option in the "UI's "Trigger > Text > Style field. What exactly does "Text Dark" and "Text Light" designate? After creating numerous PBX instances on my page, I changed a couple of "trig-dark" to "trig-light" but saw no difference to anything. The style rule for PBX pop-up balloons on this page calls for *white* text, as shown here:

/*Background Colors*/
.pbx-hebrewsTooltip,
.pbx-trigger.pbx-button.pbx-hebrewsTooltip{
background-color: #408697;
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}
.pbx-trigger.pbx-button.pbx-hebrewsTooltip:hover,
.pbx-trigger.open.pbx-button.pbx-hebrewsTooltip {
background-color: rgb(100,100,80);
color: #FFF;
}
. . .
Please tell me if that rule is correctly formatted. Let me know if I should be concerned with choosing "Text Dark" or "Text Light" when using the PBX UI.

Thank you. my friend.

Warren

Posted 9 months ago
Sinclair

offline
Member

Warren,

Text-Light and Text-Dark in the UI means that the triggers will get either white or black colors, Your page won't as you have inheritance issues from your link style rules in the hebrew-styles stylehesheet.

Yes, your styles look ok to me but as I say some inheritance issues will be present. You can use whatever you want with regard to Text Dark or Text Light , just be aware of your inheritance issues.

Why not create a new blank html page, not a copy of an existing page, so that there are no inheritance issues and test the PBX, then things will become apparent with regard your UI choices.

HTH

Posted 9 months ago
wcamp

online
Member

Greetings, Sinclair:

Please don't get frustrated with my not being able to grasp what you're suggesting when you say, "your inheritance issues."

I've created a clean TEST page and four PBX tooltip instances; the first three have the Dark Text class assignment for the trigger and include my custom User Class assignment; the fourth tooltip uses the White Text class assignment for the trigger without assigning a user class for the Popup.

Clearly, when looking at the fourth example, the trigger text becomes white, which I understand. For the others, my style sheet's <a> tag defines the color and style of the text rigger. Yes?

Please clarify if there's a problem with what my user class declarations and/or my external style sheet(s) for the actual page include. If there's a problem, kindly elaborate on what I ought to change. Thanks.

Closing question: Is there a way to preset the UI selector for the Close button to White by default for this site? (I ask because there 300 pages on my sites that include faulty tooltips, created by another developer, that need to be replaced with PBX instances. All have white text on dark backgrounds, and I'd want the Close button on all of them to be consistent with the text's light-color choice.)

https://www.warrencampdesign.com/hebrews/part1/week1TEST.php

https://www.warrencampdesign.com/hebrews/part1/week1.php

I'm eager to read your next e-clarification, Sinclair, along with your answer to the closing question. Thanks, in advance.

Wondering Warren

Posted 9 months ago
Sinclair

offline
Member

Warren,

Yes, so as you can see on the test page, it inherits none of the associated style declarations from the hebrew-styles stylehesheet, back to the https://www.warrencampdesign.com/hebrews/part1/week1.php page, these are the rules found at line #197 from which declarations such as text-shadow, letter-spacing and so on are inherited to the link rules in PBX.......

.main-content a:link, footer a:link {
color: #52d6f4;
font-weight: 600;
text-shadow: 0px 1px 1px #00394D;;
letter-spacing: 0.2em;
}
.main-content a:visited, footer a:visited {
color: #0fc3ec;
}
.main-content a:active, footer a:active, .main-content a:hover, footer a:hover, .main-content a:focus, footer a:focus {
color: #408697;
text-decoration: none;
text-shadow: 0 1px 1px #00394D;
background-color: #f5f3f1;
}

Really, that could be whittled down to......

.main-content a, footer a {
color: #52d6f4;
font-weight: 600;
text-shadow: 0px 1px 1px #00394D;
letter-spacing: 0.2em;
}
.main-content a:hover, footer a:hover {
color: #408697;
text-decoration: none;
text-shadow: 0 1px 1px #00394D;
background-color: #f5f3f1;
}

Then if you check that out, you'll see that 'Text Dark' color declaration is now working but you still have declarations such as text-shadow: 0 1px 1px #00394D; so you'd need to add a declaration like text-shadow: none; over in the PBX stylesheet to negate that for instance, that's assuming you want to change things, as I said previously, I think it looks pretty good and if you're not too fussed then leave things as they are, but you may still want to do the whittling.

Not sure what to look out for with your user class/es, where on the page are you using it/them?

I create rules like so for using in the 'User Class' field in the 'Trigger' section of the UI.....

.pbx-trigger.myclass {color:#000; background-color:#f90;}
.pbx-trigger.mycclass:hover,.pbx-trigger.myclass.open{color:#f90; background-color:#000;}

....just enter the word myclass into the 'Trigger' User Class field.

If you don't want to have to make the choice of color in the UI, find these rules in the PBX stylesheet, line #48 or so.....

.pbx-close.pbx-black-close a {
background-image: url(img/close-black.png);
}
.pbx-close.pbx-white-close a {
background-image: url(img/close-white.png);
}

Change that to....

.pbx-close.pbx-black-close a {
background-image: url(img/close-white.png);}
.pbx-close.pbx-white-close a {
background-image: url(img/close-white.png);
}

HTH

Posted 9 months ago
wcamp

online
Member

Whew! . . . You put a lot into your e-reply, Sinclair. I thank you very much for holding my hand through this learning process with PBX.

I'll start working on implementing your suggestions on Monday.

Many thanks, my friend.

Warren

Posted 9 months ago
Sinclair

offline
Member

Personally, I'd just revert to a clean PBX stylesheet, create a new stylesheet and make use of the 'User Class' options, I think that'd be your best bet.

I've given you some examples, you could build on them by adding your own in the newly created stylesheet, so...

Triggers (User Class field)....

.pbx-trigger.myclass {color:#000; background-color:#f90;}
.pbx-trigger.mycclass:hover,.pbx-trigger.myclass.open{color:#f90; background-color:#000;}

and this one will override most/all of the inheritance issues on the https://www.warrencampdesign.com/hebrews/part1/week1.php page.....

.pbx-trigger.blutrig {color:#408697; text-shadow: none; letter-spacing: normal; font-weight: bold;}
.pbx-trigger.blutrig:hover,.pbx-trigger.blutrig.open {color:#fff; text-shadow: none; background-color: #408697; border: none; font-weight: normal;}

then there are the 'Pop-Up ' 'User Class' field....

.greengrad {
background: rgb(164,179,87);
background: -moz-linear-gradient(top, rgba(164,179,87,1) 0%, rgba(117,137,12,1) 100%);
background: -webkit-linear-gradient(top, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
background: linear-gradient(to bottom, rgba(164,179,87,1) 0%,rgba(117,137,12,1) 100%);
}
.pinkgrad {
background: rgb(229,112,231);
background: -moz-linear-gradient(top, rgba(229,112,231,1) 0%, rgba(200,94,199,1) 47%, rgba(168,73,163,1) 100%);
background: -webkit-linear-gradient(top, rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%);
background: linear-gradient(to bottom, rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%);
}
.blugrad {
background: rgb(197,222,234);
background: -moz-linear-gradient(top, rgba(197,222,234,1) 0%, rgba(138,187,215,1) 31%, rgba(6,109,171,1) 100%);
background: -webkit-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%);
background: linear-gradient(to bottom, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%);
}

HTH

Posted 9 months ago
wcamp

online
Member

Sinclair, hello:

I don't know if what I've already put on my "hebrews/part1/week1.html" page is correct regarding PBX's tooltips feature. I like the current color styling for the triggers and popups. I don't need the gradient styling that first interested me. Is there a problem keeping what I have?

Nevertheless, I've done as you suggested. I created a CLEAN test page using a "clean PBX stylesheet" with added rules as you suggested.

https://www.warrencampdesign.com/clean-pbx/indexCLEAN.html

I'm afraid that I don't understand the apparent need for me to replace my PBX stylesheet that I've already set up for my "week1.html" page.

Please clarify if I must replace my stylesheet with a new one. I hope I don't. ( ; - )

Warren

Posted 9 months ago
Sinclair

offline
Member

As long as you're happy with things, that's fine, it was an attempt to show you how your you might override the triggers that are getting inheritance issues, as long as you're aware then it's all good and of course, the blutrig clsasses were specific to your site and the were easily changed to suit.

Well, there's no need to replace, I just like to keep the tool's stylesheets as is, any additional and/or override rules, I like to keep in an exceptions stylesheet.

The 2nd line of the pinktrig and greentrig rules are not quite right, check my rules to see the difference.

HTH

Posted 9 months ago
wcamp

online
Member

I'm relieved to learn that I can keep what I'd already entered on the PBX stylesheet. I neglected to remember what you'd told me previously when I began working with Page Builder magic: "Create and call an 'exceptions.css' page that has only your modified rules."

Regarding the CLEAN test page that I created, I see the errors I made assigning the appropriate color name to the rule titles. I believe that I've made the corrections, although it's now no longer practically applicable.

Thanks very much for your guidance going forward, Sinclair.

Sincerely and gratefully,

Warren

Posted 9 months ago
Sinclair

offline
Member

One other thing to remember is that should an update to a tool such as PBX require a new stylesheet to facilitate new functionality, your PBX stylesheet could get replaced in the update process!

HTH

Posted 9 months ago

PVII Forums » PVII Product Support

RSS feed for this topic

Reply

You must log in to post.