[RD] Theme default for font and border colors

[Chris]

In that case you would take advantage of a very important design feature in CSS which basically says ignore a property if the property value given for that property is invalid. If the user never entered a value for the color or border-color then the values they return will be undefined which would obviously not be one of the accepted values for either of those CSS properties (causing the browser to ignore those properties). One change I would make though is to quit using the border shorthand and instead spell it out for each plugin setting so if one is missing/incorrect the browser won't assign an "initial" value but instead use a preexisting value set by another rule such as one created by the theme.

border-width: $[plugin.settings.border_sizeis]px;
border-style: $[plugin.settings.border_styleis];
border-color: #$[plugin.settings.border_coloris];


All that remains is to figure out what additional classes to give the .styled-select in order to inherit default properties you desire but as stated before that would require knowledge of its location (e.g. "is it inside or outside the .container element", "is it on a custom page", etc) so send me the rest

[aRMY83]

Got it on the shorthand.

I'm going to send you the the entire codes, including the JS via a PM here.

[aRMY83]

Hello Chris

Just for your info, I went and changed those shorthand settings as you recommended:

border-width: $[plugin.settings.border_sizeis]px;
border-style: $[plugin.settings.border_styleis];
border-color: #$[plugin.settings.border_coloris];

and it now seems that the border color is now defaulting to the themes with no user value settings. Not sure if this is suppose to be that way, but it sure is working okay now.

When you say:

All that remains is to figure out what additional classes to give the .styled-select in order to inherit default properties you desire but as stated before that would require knowledge of its location (e.g. "is it inside or outside the .container element", "is it on a custom page", etc)

Am I to understand that this would mean finding within the Style Sheet for something like this:

@container_outer_border_color: #000000;
@container_inner_border_color: #000000;

[Chris]

Dec 18, 2013 7:01:09 GMT -8 aRMY83 said:

When you say:

All that remains is to figure out what additional classes to give the .styled-select in order to inherit default properties you desire but as stated before that would require knowledge of its location (e.g. "is it inside or outside the .container element", "is it on a custom page", etc)

Am I to understand that this would mean finding within the Style Sheet for something like this:

@container_outer_border_color: #000000;
@container_inner_border_color: #000000;

What I meant is to literally give the element a class or a combination of classes that would lend it a color scheme that would fit with (and change) with the active theme. The purpose is to provide a default (fallback) state for when the CSS your plugin provides is absent or otherwise fails. We could accomplish this using CSS specificity but that heavily depends on Proboards not changing the selectors on currently existing CSS rules which is far from a safe bet so instead we'll try via the more dependable class names.

Since this is a select element and Proboards chooses to instead use a jQuery addon that can simulate the functionality of select elements we'll be hard-pressed to find a class within the theme that is designed to add styling to select elements, the majority of the rules regarding border and color actually reference specifc DIVs, TABLEs and TDs which would be useless here. What we do have is the classes for styling the post options dropdown (gear icon) however, so give this a try

<select name="choice" class="select_menu_list container" style="float:none;display:inline;position:static;">

(add the red to the section of HTML in the footer you sent)

That should allow it to mimic the appearance (color scheme) of the gear dropdown as well as inherit the text color applied to the container (the inline styles override some of the unwanted side-effects)

[aRMY83]

This sure solved the font text color with any theme I throw at it.

If I may add, I never really notice this before, but when using IE11, the variable (when input is set by end user, example: center) text-align:$[plugin.settings.alignment_of_text]; it does not work and defaults to the left.

When using FF26.0, it works just fine.

[Chris]

Dec 19, 2013 9:18:28 GMT -8 aRMY83 said:

This sure solved the font text color with any theme I throw at it.

If I may add, I never really notice this before, but when using IE11, the variable (when input is set by end user, example: center) text-align:$[plugin.settings.alignment_of_text]; it does not work and defaults to the left.

When using FF26.0, it works just fine.

You've hit on the reason why Proboards chose to use a jQuery addon to create their select elements (such as the gear icon) in the first place, the disparity between the allowed stylings in one browser and the allowed stylings in another is just too great. In this case IE has never allowed text-align to affect select elements.

[aRMY83]

Thanks Chris for that information and without a doubt, I have learned several things from your valued input.