How to Make Changes to Smiles Menu?

[Community Library]

How can I make the Smiles Menu wider and change the background from grey to white?

I tried to change the width of the Smiles Menu using the Advanced Styles & CSS Visual Editor by entering numbers (900, 900px, 90%) at the very bottom where it says Smiles Menu>Width but nothing changed.

I'm sure it must be easy but how do I change the background color?

Thanks!

[Jen Parsons]

I'm not sure why the menu didn't change for you because I've always gone to, Admin > Themes > Advanced Styles & CSS > Objects > Smilies Menu and entered a pixel amount and it's always changed for me.

To change the background's color you can use the CSS here. It will change the color of the Select and Actions pulldowns as well.

[Former Member]

I am wondering, is it possible at all to have the smileys list pop-up in a new window? Instead of a menu?

[Community Library]

Sept 3, 2013 9:42:28 GMT -8 Jen Parsons said:

I'm not sure why the menu didn't change for you because I've always gone to, Admin > Themes > Advanced Styles & CSS > Objects > Smilies Menu and entered a pixel amount and it's always changed for me.

To change the background's color you can use the CSS here. It will change the color of the Select and Actions pulldowns as well.

I tried to post before and somehow lost it...errrr.

Admin > Themes > Advanced Styles & CSS > Objects > Smilies Menu does not seem to change the smileys menu width for me even on a simplified test forum with all plugins disabled.  HERE

I'm hoping to use larger smileys so I thought 900 pixels or 90% would be a good width.
How do I do this?
The field does not seem to accept my entries...It is blank when I return after saving and testing.

I was able to change the background color with the stylesheet code you linked me to...Thank you very much!

[Jen Parsons]

I wish I could help you Community Library but I have no idea why it isn't working for you. 

You should tag some of the staff in this thread.   They'll be able to tell you why it isn't working. 

[Community Library]

Sept 6, 2013 14:16:50 GMT -8 Jen Parsons said:

I wish I could help you Community Library but I have no idea why it isn't working for you. 

You should tag some of the staff in this thread.   They'll be able to tell you why it isn't working. 

Thank you.

I'm guessing I'll be embarrassed in the end.

Thank you so much for taking the time.

[David Clark]

The smiley menu's width should be editable from the visual editor, Community Library, but to change something like the background color you'll need to use manual CSS code. Since the visual editor options aren't working for you, try changing the width with CSS too.

Head to Admin > Themes > Advanced Styles & CSS > Style Sheet tab and scroll all the way to the bottom, pasting this code below the rest.

.smiley-menu {
width: 500px;
background-color: green !important;
}

The highlighted text you can edit to your taste.

(Also if you have a question about your ProBoards forum, who better to ask than the ProBoards guys?! Don't be shy )

[Community Library]

Sept 7, 2013 10:38:20 GMT -8 David Clark said:

The smiley menu's width should be editable from the visual editor, Community Library, but to change something like the background color you'll need to use manual CSS code. Since the visual editor options aren't working for you, try changing the width with CSS too.

Head to Admin > Themes > Advanced Styles & CSS > Style Sheet tab and scroll all the way to the bottom, pasting this code below the rest.

.smiley-menu {
width: 500px;
background-color: green !important;
}

The highlighted text you can edit to your taste.

(Also if you have a question about your ProBoards forum, who better to ask than the ProBoards guys?! Don't be shy )

Awesome and simple.

Thank you so much.

I'm not a coder so the variables are an issue, for example '.smiley-menu'.

I guess I should have picked it up from the code I was referred to.

Is there a common method for determining the variables (identifiers) of specific elements?

For example, how could I have determined that the name for the smiles menu background is '.smiley-menu'?

Again, thank you for stepping in to help.

I was frustrated at first with V5 but now I'm pulling it together.




 

[David Clark]

Community Library, modern browsers are equipped with built-in development consoles which have element inspectors. If you have Chrome you can right-click any part of the page and click on Inspect Element and it will pop open with a tree of valuable information. (If you have Firefox then you can grab Firebug and do the same.)

SPOILER: Click to show

In this screenshot you can see an example of how I might identify CSS selectors. In this case, I right-clicked and snooped the smiley menu and noticed (circled in red) that there was already a width declaration existing under the class selector ".smiley-menu" - these element inspectors also allow you to alter the existing CSS, so I changed the width to make sure that it did what I wanted, and then I passed the selector on to you, with CSS code appropriate to your issue.

Towards the right side of the screenshot, you can see green squares - note that these elements either have a "class" or "ID", like "colorPicker", etc. Anything with a class can be referenced in the style sheet by adding a period in front of it (e.g. .ui-timepicker-menu {width: 9001px;} would be valid) and anything with an ID can be referenced with a pound sign before it (e.g. #colorPicker {height: 9001px;}).

It's not always completely obvious how to select something with CSS, though, so sometimes it requires a bit of detective work to help users out.

[Community Library]

I've viewed that before but did not realize I could use it to determine more accurately the name of specific elements.

Thank you!

Now to go give it a try...LOL

[David Clark]

If you need any help understanding, let us know Community Library - we use the tools in the developer consoles every day here.

[Stinky666]

Holy crap, David Clark!!
I use Inspect Element when needed some times, but I never actually knew you could change the settings to see what they look like etc.

That will be a huge help when trying to do things from now on. Thanks

[David Clark]

Dude, yeah. Can't live without it.

[Stinky666]

Sept 8, 2013 11:37:24 GMT -8 David Clark said:

Dude, yeah. Can't live without it.

People always say about using Inspect Element, but nobody in all this time, and all the posts it i mentioned, said to do the above lol.
Why has no one told me this before? I could have saved a lot of people hassle, as well as myself haha.