Button default to theme style + allow full customi...

absfarah · ‎05-08-2018

Hello all,

Is it possible for a button element to inherit the default theme button style when dragged into the editor? In addition, can this button then be styled completly via my app? I am hoping the settings can easily be made visible and changeable in the settings dialog.

Here are the styles I want Weebly users to be able to edit:

.my_btn {
	display: inline-block;
	padding: @btnPadTopBtm*1px @btnPadLftRght*1px;
	background: @btnBgNormal;
	color: @btnColorNormal;
	font-size: @btnFontSize*1px;
	border: @btnBorderWidth*1px solid @btnBorderColorNormal;
	-webkit-border-radius: @btnBorderRadius*1px;
	border-radius: @btnBorderRadius*1px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.my_btn:hover {
	background: @btnBgHover;
	color: @btnColorHover;
	border-color: @btnBorderColorHover;
}

devsupport · ‎05-08-2018

That's an interesting question @absfarah

Seeing as how the "C" in CSS stands for cascading, I wouldn't see why a button shouldn't be able to inherit the currently applied theme's button styles (provided your markup is semantic and is applicable to the theme's button style selector rules).

Have you performed any experiments on this yet which you could share some URLs and/or code which we could use to continue the conversation? CSS can get tricky depending upon how the cascade is applied (external, embedded, or inline), and the order in which it is loaded for rendering in the browser. Each case would be unique, since each theme is unique.

As it relates to allowing your element settings define the button styles, I'm certain this is an achievable goal, because we have a Add Stylesheets to Your Element resource in our developer docs. Of course, how you approach the solution is going to be critical. Inline styles make the most sense for this particular use case methinks (since the closer to the element, the more applicable importance a rule is). I'm thinking in this case, you'd want to create the DOM Element and apply styles to it before appending/inserting it into the DOM, and you "could" use JavaScript to accomplish this since we provide the ability to extend our Backbone.View and you can call that view's Render method to apply changes.

Button default to theme style + allow full customisation