Drop Down CSS Style Sheet

[JD]

URL: www.aeipathy.proboards.com

Okay, I have a stupid question. But where in the Style Sheet can I find the lines that customise the drop down menus on the forum? I'm talking about the action drop downs and such but universal as I have an NPC profiles plugin that makes a drop down too and they don't seem to necessarily run on the same code. Is there an over arching id or class that I can edit? I've scanned up and down the style sheet and I'm not 100% certain on what I'm looking for - I've tried looking for "drop down" and "menu" but nothing obvious is springing to the eye.

I don't want to change much - just the highlight colour of the hover, the colour of the right hand arrows and the padding of each row. Can anyone point me in the right direction of where those lines on the style sheet are? I don't want to accidentally manipulate the wrong thing <3

[Nscalerr]

Hi JD

I think the section /* CSS Arrows */ on line 387 might be what you are after.

[JD]

Jun 9, 2019 5:57:55 GMT -8 Nscalerr said:

Hi JD

I think the section /* CSS Arrows */ on line 387 might be what you are after.

Thanks Nscalerr!

This has definitely answered the changing the color of the arrows... Just can't work out how to change the text or the padding of each row in the drop downs....? :S

[Nscalerr]

I have found that changing the color in the area I told you about, also changes the color on the navigation menu, so to have it affect only where we want it to affect, add the following to the bottom of the stylesheet, setting color and padding to what you want.

/* CSS Arrows */
.posts .arrow.right > span {
   border-left-color: #ff0000;
   padding: 10%;
}

[JD]

Jun 9, 2019 21:07:59 GMT -8 Nscalerr said:

I have found that changing the color in the area I told you about, also changes the color on the navigation menu, so to have it affect only where we want it to affect, add the following to the bottom of the stylesheet, setting color and padding to what you want.

/* CSS Arrows */
.posts .arrow.right > span {
   border-left-color: #ff0000;
   padding: 10%;
}

Hey Nscalerr yeah I got the colour to change but I want to do things like change the text to uppercase, change the font and adjust the padding on each row of the menu. I tried editing these things in that section but it didn't affect it. <3

[Nscalerr]

The section I showed won't change the other things you want, but the CSS I came up with will do it, just have to add a bit to it. Now sure it is possible to change the padding for each row individually. The padding affects just the arrow itself with this CSS, not the row itself. The extra bit of CSS will change the padding on the row itself. Warning: keep the numbers low, even 5px is a big change.

.posts .ui-menu-has-sub-menu {
   padding: 5%;
}
/* CSS Arrows */
.posts .arrow.right > span {
   border-left-color: #ff0000;
   text-transform: uppercase;
   font-name: Add font name here;
}

[JD]

Jun 11, 2019 3:33:27 GMT -8 Nscalerr said:

The section I showed won't change the other things you want, but the CSS I came up with will do it, just have to add a bit to it. Now sure it is possible to change the padding for each row individually. The padding affects just the arrow itself with this CSS, not the row itself. The extra bit of CSS will change the padding on the row itself. Warning: keep the numbers low, even 5px is a big change.

.posts .ui-menu-has-sub-menu {
   padding: 5%;
}
/* CSS Arrows */
.posts .arrow.right > span {
   border-left-color: #ff0000;
   text-transform: uppercase;
   font-name: Add font name here;
}

Nope. That still doesn't work, sorry. I copied it in exactly but all it did was make the arrows red.

[Nscalerr]

Hmm now I am getting a bit lost. This will need a bit of thinking about. It works ok on my forum.

Going to tag Chris in to this, incase there is something I have missed.

[Chris]

It is important to note that the majority of menus you see used in PBv5 comes from a jquery UI addon called selectMenu which is in turn a work based upon the UI Menu addon and because of this all menus that employ that addon will use the original .ui-menu class as well as the .ui-selectMenu derived class.
The HTML structure for these menu is usually an unordered list <ul> containing list items <li> with clickable texts ultimately contained within anchors <a> within those list items. So if you want to affect padding for example you would most likely want to do that on the <li> housing element with something like: .ui-menu.ui-selectMenu li {padding: wxyz}. If you want to target the text then you would have to go one level deeper since anchors do not inherit certain attributes such as color from their parents: .ui-menu.ui-selectMenu li > a {color: wxyz}

Also note that I used both ui-menu and ui-selectMenu in the selectors to add weight and override competing rules but I certainly did not account for gorilla rules (uses lots of classes to smash the competition) or any nuclear option rules (uses the !important modifier to kill every other rule) that might exist in a future or unmentioned theme. I am also not familiar with the type of menus used in the NPC Profiles plugin since I know of the plugin but never had a chance to see it in action but if it employs the same selectMenu addon for creating its menus then that should be affected as well.

[Nscalerr]

With the following I can make the background of the Action menu arrow change colour, but not the colour of the arrow itself.

.ui-menu.ui-selectMenu li {
   padding: 5%;
}
.ui-menu.ui-selectMenu li > a {
   text-transform: uppercase;
   color: #0000ff;
}
.ui-menu.ui-selectMenu li > span {
   background: #ff0000;
}

[Chris]

Jun 14, 2019 21:21:56 GMT -8 Nscalerr said:

With the following I can make the background of the Action menu arrow change colour, but not the colour of the arrow itself.

.ui-menu.ui-selectMenu li {
   padding: 5%;
}
.ui-menu.ui-selectMenu li > a {
   text-transform: uppercase;
   color: #0000ff;
}
.ui-menu.ui-selectMenu li > span {
   background: #ff0000;
}

You already had the arrow color conquered

Jun 9, 2019 7:35:48 GMT -8 JD said:

Thanks Nscalerr!

This has definitely answered the changing the color of the arrows... Just can't work out how to change the text or the padding of each row in the drop downs....? :S

or am I misunderstanding what is being asked?
The information I gave was to address the other concerns (padding, text font, text color, etc)

[Nscalerr]

Think I confused myself with the other requests. Right with the arrow CSS added in this time.

/* CSS Arrows */
.posts .arrow.right > span {
   border-left-color: #ff0000;
}
.ui-menu.ui-selectMenu li {
   padding: 5%;
}
.ui-menu.ui-selectMenu li > a {
   text-transform: uppercase;
   color: #0000ff;
   font: Add what you want to do with the font here;
}

[JD]

Jun 12, 2019 23:10:21 GMT -8 Chris said:

It is important to note that the majority of menus you see used in PBv5 comes from a jquery UI addon called selectMenu which is in turn a work based upon the UI Menu addon and because of this all menus that employ that addon will use the original .ui-menu class as well as the .ui-selectMenu derived class.
The HTML structure for these menu is usually an unordered list <ul> containing list items <li> with clickable texts ultimately contained within anchors <a> within those list items. So if you want to affect padding for example you would most likely want to do that on the <li> housing element with something like: .ui-menu.ui-selectMenu li {padding: wxyz}. If you want to target the text then you would have to go one level deeper since anchors do not inherit certain attributes such as color from their parents: .ui-menu.ui-selectMenu li > a {color: wxyz}

Also note that I used both ui-menu and ui-selectMenu in the selectors to add weight and override competing rules but I certainly did not account for gorilla rules (uses lots of classes to smash the competition) or any nuclear option rules (uses the !important modifier to kill every other rule) that might exist in a future or unmentioned theme. I am also not familiar with the type of menus used in the NPC Profiles plugin since I know of the plugin but never had a chance to see it in action but if it employs the same selectMenu addon for creating its menus then that should be affected as well.

Thank you Chris,

This was super helpful!! it was the class info that I needed but couldn't seem to find. This is working brilliantly to a certain extent but I need to ask a follow on question (apologies!! >..<" ) -

Is there a difference in class between say the Actions drop down on a thread and the Settings drop down on a post? Because some elements have changed on the post drop down but not all (the padding specifically is not triggering).

Actions Drop Down -



Post Settings Drop Down -



Those are taken at the same zoom settings.

Also as you can see, there is still the line down the back of the drop down? Is this a background image? Or is this a border setting I can't work out? Because I'm struggling to get rid of it.

Thank you for all your help so far!!! <3

[Chris]

I suspect the theme I see when I look at the given forum link is not the theme you are working on (e.g. the post options is at the bottom left, not matching the placement in your posted image) so I obviously cannot see what changes may have been made to either HTML or CSS. You could give me a link to a forum with the theme set as the default (so I can see it) and probably identify the cause in about 30 seconds or alternatively waste an inordinate amount of time in this thread when the problem is finally identified on page 30 through guess work, for the record I highly prefer the former.

The line that creates space for an accompanying icon (but never used on PB) comes from a background image applied to the <li>: //storage.proboards.com/forum/images/ui-menu/side-bar2.png

What I as a guest see at http://aeipathy.proboards.com:

but none of the CSS rules put forth in this thread are there for review so one could then see why one rule would be winning over a competing rule or perhaps simply being ineffective due to a change in HTML.

[JD]

Oh cock!! I'm so sorry Chris ! I totally forgot about the theme. I was originally working on it on the link I provided but have since moved it to our new forum. Here's where I'm now working on the theme on our new site - aeipathy.forums.net/ and this is a link to a thread in example - aeipathy.forums.net/thread/238/second-time-lucky

putting in a background-image:none; fixed the issue with the line - thank you for the confirmation there <3