I was starting to overcrowd my menu section, so I batched all the "extras" together under one menu tab: "Extra Goodies". It's working fine, but I do have a couple of questions. First, in Subs.php:
I didn't want anything to happen if a user clicked "Extra Goodies"; I wanted them to have to see the drop-down before choosing. So, I put 'javascript:void(0)' for 'href'. Is that okay, or is that something that's not done anymore? It does work fine (even with IOS) and throws no errors, but I don't want it to someday just stop working because it's deprecated. :)
'goodies' => array(
'title' => $txt['goodies'],
'href' => 'javascript:void(0)',
'show' => !$user_info['is_guest'],
'sub_buttons' => array(
'breaking' => array(
'title' => $txt['breaking_feed'],
'href' => $scripturl . '?page=news',
'show' => !$user_info['is_guest'],
),
'showing' => array(
'title' => $txt['now_showing'],
'href' => $scripturl . '?page=movies',
'show' => !$user_info['is_guest'],
),
'weather' => array(
'title' => $txt['weather'],
'href' => $scripturl . '?page=weather',
'show' => !$user_info['is_guest'],
),
),
),
The other question is cosmetic (attached jpg). I wanted the "Extra Goodies" tab to be red but I wanted the drop-down choices to remain black. I "borrowed" the CSS from elsewhere in index.css, in order to have all the highlighting, etc., that the other buttons have (otherwise, it's just a plain, undecorated button) and the red color comes from here:
/* Customized Extra Goodies Button
------------------------------------------------------- */
#button_goodies a {
color: #ff0000;
cursor: pointer; }
#button_goodies ul
{
z-index: 100;
padding: 5px;
margin: 0 0.2em 5px 0;
}
#button_goodies ul li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#button_goodies ul li a
{
display: block;
font-size: 0.8em;
color: #ff0000;
background: #e8e8e8 url(../images/theme/menu_gfx.png) no-repeat 0 -60px;
padding: 0 0 0 8px;
margin-left: 12px;
text-transform: uppercase;
cursor: pointer;
}
#button_goodies ul li a:hover
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 0;
color: #fff;
text-decoration: none;
}
#button_goodies ul li a span
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -60px;
display: block;
height: 19px;
line-height: 19px;
padding: 0 8px 0 0;
}
#button_goodies ul li a:hover span
{
background: #fff url(../images/theme/menu_gfx.png) no-repeat 100% 0;
}
/* the active one */
#button_goodies ul li a.active
{
background: #5a6c85 url(../images/theme/menu_gfx.png) no-repeat 0 -90px;
color: #fff;
font-weight: bold;
}
#button_goodies ul li a.active span
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -90px;
}
#button_goodies ul li a.active
{
font-weight: bold;
}
#button_goodies ul li a.active:hover
{
color: #ddf;
}
If I remove either of those #ff0000; values, then the main tab is black again. If I leave them both, the drop-downs are red.
What's a girl to do? :-\
Actually, I've sorted it to something I can live with. I'm not one to sit by and wait; I have to TINKER! :D
Solved; nothing to see here. :)
So what did you come up with? If you're curious, the reason things were either all black or all red is that declaring like that will target the descendents.
The #button_stuff id is for the top level li, and #button_goodies ul is the drop menu under the top level tab. So declaring red in #button_goodies ul li a should not affect the top level. If it does, something is borked somewhere else.
#button_goodies a will target not just the anchor in the top level, but will also hit all descendant anchors in sub-menus. If you want it to only hit the top level you'd use #button_goodies>a since the > tells it to only hit stuff which is directly inside the first thing.
And this reminds me of how effing poxy 2.0.x CSS is. Horrible stuff. :P
(it frequently suffers from overly specific declarations, and sometimes has duplicates as well)
Quote from: Antechinus on June 23, 2016, 06:52:44 PM
So what did you come up with? If you're curious, the reason things were either all black or all red is that declaring like that will target the descendents.
The #button_stuff id is for the top level li, and #button_goodies ul is the drop menu under the top level tab. So declaring red in #button_goodies ul li a should not affect the top level. If it does, something is borked somewhere else.
#button_goodies a will target not just the anchor in the top level, but will also hit all descendant anchors in sub-menus. If you want it to only hit the top level you'd use #button_goodies>a since the > tells it to only hit stuff which is directly inside the first thing.
And this reminds me of how effing poxy 2.0.x CSS is. Horrible stuff. :P
(it frequently suffers from overly specific declarations, and sometimes has duplicates as well)
What I came up with was to learn to like red! ;D
Well... I've got this in Subs.php:
'goodies' => array(
'title' => $txt['goodies'],
'href' => 'javascript:void(0)',
'show' => !$user_info['is_guest'],
'sub_buttons' => array(
'breaking' => array(
'title' => $txt['breaking_feed'],
'href' => $scripturl . '?page=news',
'show' => !$user_info['is_guest'],
),
'showing' => array(
'title' => $txt['now_showing'],
'href' => $scripturl . '?page=movies',
'show' => !$user_info['is_guest'],
),
'weather' => array(
'title' => $txt['weather'],
'href' => $scripturl . '?page=weather',
'show' => !$user_info['is_guest'],
),
),
),And also this:
if(isset($_REQUEST['action']) && strpos($_REQUEST['action'], '@page=news') !== false)
$current_action = 'breaking';
if(isset($_REQUEST['action']) && strpos($_REQUEST['action'], '@page=movies') !== false)
$current_action = 'showing';
if(isset($_REQUEST['action']) && strpos($_REQUEST['action'], '@page=weather') !== false)
$current_action = 'weather';
// --- start goodies
elseif ($context['current_action'] == 'goodies')
$current_action = 'breaking';
// --- end goodies(Only those three "if isset" bits were when the buttons were all single menu buttons. I wasn't sure if I should lose them, so I left them, since they didn't seem to do any harm.)
My Modifications.english.php is this:
//custom menu
$txt['goodies'] = 'Extra Goodies!';
$txt['breaking_feed'] = 'Breaking News';
$txt['now_showing'] = 'Now Showing!';
$txt['weather'] = 'Local Weather';So, since I wanted "Extra Goodies!" to be red, but still wanted the highlight to work, I have this in my CSS:
/* Customized Extra Goodies Button
------------------------------------------------------- */
#button_goodies a {
color: #ff0000;
cursor: pointer; }
#button_goodies ul li a:hover
{
color: #fff;
text-decoration: none;
}
#button_goodies ul
{
z-index: 100;
padding: 5px;
margin: 0 0.2em 5px 0;
}
#button_goodies ul li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
But that's wrong; since everything's still red (attached). What I'm after is "Extra Goodies" being red, but the drop-down being black, white on hover. (Don't mind the squirrels; they're mostly harmless.)
All that to ask... the button being "goodies" can you see the the Bork? :D
Yeah. Bork is here.
#button_goodies a {
color: #ff0000;
cursor: pointer; }
Like I said, try this:
#button_goodies>a {
color: #ff0000;
cursor: pointer; }
Or if you want it another way...
#button_goodies>.firstlevel {
color: #ff0000;
cursor: pointer; }
...should also work.
But you probably don't need the pointer bit, since IIRC all browsers do pointer on links by default.
This fixes it! 8)
#button_goodies>a {
color: #ff0000;
cursor: pointer; }
Really, that ">" changes everything? I've never seen that in CSS before; I'm impressed!
I'm gonna start following you around, so I can feel smarter. :D
Thanks, big time!
Yup, the > means "only apply this to anchors which are directly inside #button_goodies". So <li id="#button_goodies"><a>Stuff</a></li> gets hit.
If you just leave a space (like #button_goodies a) that means "apply this to any anchors which are directly inside #button_goodies,
and any anchors which are inside anything else that is inside #button_goodies". So <li id="#button_goodies"><ul><li><a>More stuff</a></li></ul></li> gets hit too.
Quote from: Antechinus on June 23, 2016, 07:50:46 PM
Yup, the > means "only apply this to anchors which are directly inside #button_goodies". So <li id="#button_goodies"><a>Stuff</a></li> gets hit.
If you just leave a space (like #button_goodies a) that means "apply this to any anchors which are directly inside #button_goodies, and any anchors which are inside anything else that is inside #button_goodies". So <li id="#button_goodies"><ul><li><a>More stuff</a></li></ul></li> gets hit too.
That's incredible; I had no idea. I need to go CSS-manual surfing and find out what's changed; I'm still mucking about with old stuff. It's a wonder all my sites haven't gone belly-up. You guys are a lot more helpful than Stackoverflow (and a lot less anal), ha!
(Okay, that's just an opinion; if anyone here works for Stackoverflow, I'm sure I don't mean YOU.) :D