[RD] Theme default for font and border colors

[aRMY83]

I've been working on a plugin and would like to know how I can set these variables:

color: #$[plugin.settings.font_coloris];

#$[plugin.settings.border_coloris];

to read the theme font and border color settings by default if the end user decides not to choose a color in their settings?

[David Clark]

I'm gonna push this on over to Plugin Development, aRMY83.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Perhaps your looking for
THIS CODE IS FOR USE IN CSS
{if $[plugin.settings.border_coloris]} {change the color}//if plugin settings= true
{else}{set default color}{/if}

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

THIS CODE SHOULD BE USED IN JAVASCRIPT
a similar code should be
if(proboards.plugin.get('PLUGIN_NAME').settings.font_coloris != '')//NOT key name//Those are 2 single quotes
{
set it to the color needed
}
else { set default color}

[aRMY83]

Thanks David Clark for the rapid response.

@ P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓

I'll give both a go and see what happens and thanks for the input.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

I forgot the brackets around {else} in the css code

[aRMY83]

Hello P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓

Tried both the CSS / JS and they did not work. Will play around with it tomorrow and once again, thanks much for the input.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Sorry I didn't have much time to help you earlier. Here is a more thorough example.
I tested this code myself so I know it works.
This is the information on your page. This example will use a set id to apply css. I used a div tag because it is the easiest for example purposes, but this should work on all tags that support css border and css color such as lets say a <p> or <table> tag.
<div id="fontid">This color has changed</div>
<div id="borderid">This border's color has changed</div>
----------------------------------------------------------------------------------------
Place this in your header or footer tag. Alternatively the text/css content could be put in the css box. You can add css properties here for specific ids/classes. The borderid will add a border so that the color can then later be changed.
<style type="text/css">
#borderid {border-width:1px;border-style:solid;}
#fontid{font-size:15px;}
</style>
-----------------------------------------------------------------------------------------
This is the javascript. It can be placed in the header/footer box or the content placed in the javascript box.
The document.ready means that it won't apply your styles until the document has finished loading. You may have been trying to add the style before the content was loaded. A footer code should essentially load after the content making it preferable over the document.ready. You could even use an onload function. Whatever gets the job done/suits your needs. I have commented out some alert boxes that should tell you what's happening real time in your app if you enable them.
<script type="text/javascript">

$(document).ready(function() {
var fontcoloris = proboards.plugin.get('PLUGIN_ID').settings.font_coloris;//plugin_id found under the first section of your build plugin page.
var bordercoloris = proboards.plugin.get('PLUGIN_ID').settings.border_coloris;
if(fontcoloris != '')//2 single quotes
{
//alert(fontcoloris);
document.getElementById("fontid").style.color=fontcoloris;
}
else { document.getElementById("fontid").style.color='blue';}//SET YOUR DEFAULT COLOR
if(bordercoloris != '')
{
//alert(bordercoloris);
document.getElementById("borderid").style.borderColor=bordercoloris;
}
else { document.getElementById("borderid").style.borderColor='blue';}
});//end document.ready
</script>

[aRMY83]

Hello P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓

Working on what you just presented and if you don't mind, could I send you a PM here to clarify some things?

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

I made an app to test it and yeah I don't mind a PM
Don't forget to add resoloved to your topic when you get it working.

[Chris]

My understanding of the question is you want to be able to determine and use the border-color and text color of the currently active theme in the event the plugin user opted not to set values for these in the plugin settings. Barring some variable that I'm unaware of, the easiest way for a plugin to dynamically determine this would be using the getComputedStyle method (or currenStyle/runtimeStyle prop for older IE browsers). Since we have jQuery installed on V5 we could also use the css() method it provides and avoid creating a forked code. It's a tad slower than the native browser methods but since you'll be calling it only once to determine values the difference will be negligible.

var bordercolor = $('.container > .content').css('borderTopColor')

would return the border color for the current theme on most pages (use a more specific selector if you need to determine for a specific element) and querying for 'color' would do the same for text color. You can then check whether your user has set a value in plugin settings and substitute the value in if they have not.

The other more common approach is to use the same class names as  the default forum element you're looking to mimic and it will then inherit the same CSS properties applied to the original and that way you wouldn't need to worry about setting an explicit property since it will inherit whatever properties the theme currently has set. You can then easily override the theme properties with your own user selected properties by applying an inline style to your generated element.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

I figured if you wanted to use the default colors of the theme, you would refrain from setting the colors altogether and the theme's classes should be inherited.

[aRMY83]

My understanding of the question is you want to be able to determine and use the border-color and text color of the currently active theme in the event the plugin user opted not to set values for these in the plugin settings.

This is correct Chris and being a somewhat non-coder, I thought it would be a simple coding mod, but it is becoming way over my head.

I still would, if possible, like to have a solution as to how one can do this.

Thanking you and P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ for the input here.

[Chris]

Dec 16, 2013 1:04:10 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

I figured if you wanted to use the default colors of the theme, you would refrain from setting the colors altogether and the theme's classes should be inherited.

It really depends on which element's styling you're trying to mimic. Unlike the simpler environment in V4 where adding a simple class to an element allowed it to inherit the properties associated with that class there is a more complex situational targeting used in V5. Element with same classes could have greatly differing appearance depending on their ancestors. This means in addition to adding a class one might also need to recreate the ancestor hierarchy in order to mimic the desired appearance. In cases like that it might be much more efficient to simply copy then write the style inline rather than recreate such a complex hierarchy just to get the benefit of a single CSS rule.

Dec 16, 2013 6:13:16 GMT -8 aRMY83 said:

My understanding of the question is you want to be able to determine and use the border-color and text color of the currently active theme in the event the plugin user opted not to set values for these in the plugin settings.

This is correct Chris and being a somewhat non-coder, I thought it would be a simple coding mod, but it is becoming way over my head.

I still would, if possible, like to have a solution as to how one can do this.

Thanking you and P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ for the input here.

If you give more detail on which page and exactly what you're trying to style (I assume it is an element created by your plugin) then the answer can be more precise. As it is now the answer is broad because the question was broad (too many unknowns)

[aRMY83]

Hello Chris and sorry for the late response.

If you give more detail on which page and exactly what you're trying to style (I assume it is an element created by your plugin) then the answer can be more precise. As it is now the answer is broad because the question was broad (too many unknowns)

This is the top part of a drop down menu: (Main Footer Component)

<style type="text/css">
.styled-select select {text-align:$[plugin.settings.alignment_of_text]; width:$[plugin.settings.enter_widthis]px; color: #$[plugin.settings.font_coloris]; background-color:#$[plugin.settings.background_coloris]; font:$[plugin.settings.font_sizeis]px $[plugin.settings.font_styleis]; border:$[plugin.settings.border_sizeis]px $[plugin.settings.border_styleis] #$[plugin.settings.border_coloris]; height: $[plugin.settings.heightis]px; border-radius:$[plugin.settings.border_radiusis]px;}
</style>

and would like these variables:

color: #$[plugin.settings.font_coloris];

#$[plugin.settings.border_coloris];

to read the theme font and border color settings by default if the end user decides not to choose a color in their settings.

There is a Javascript code within the JS component, minus the script tags which affects menu and url link settings and will provide that to you through a PM here if it is okay with you.