override inline styles

sorry to throw these questions like this, but i believe one could maybe solve the others: is it possible to disable inline styles? I’d like to customize all the frontend interface with css. I hope this is possible

cheers

Set Table I-A1 to auto and use shortcode like:

[wppa type="..." size="0.8"][/wppa]

for a 80% width responsive display.

You can overrule inline styles as follows:

.classname {
height: 123px !important;
}

With !important you can override any css setting.

You can not disable inlinestyles in wppa, you can put – most of them – in a loadable css file by UNticking Table IV-A9, but that will be automaticly generated and it will be usesless to edit it.

the “…” means album, slider or whatever i use, right? iv’e put slide, and it works with sizes and coordinates. But as this is an image, to change the src attribute from that triangle to my own image, i could use some jquery, like this:

jQuery(document).ready(function ($){

	$("#ubb-1-l").attr("src", base_template + "/img/btnBack.png");
});
// base_template = the variable holding the template url

Is this the best way?

And how can i change the other javascript rollovers on the same buttons, so that they don’t change at all, not even in opacity?

I’m tryin to get this look: https://utopiaacores.com/design/

this doesn’t work:

var b = document.getElementById("ubb-1-l");
b.removeEventListener("onmouseover", "wppaUbb");
b.removeEventListener("onmouseout", "wppaUbb");

If i can do this, i’ll replace the current nextgen gallery by this plugin, because i can’t use the lightbox to navigate in the gallery, and with your plugin, i can do that (so far only in localhost; will upload when ready)

Thanks for your support

but this works:

$("#ubb-1-l")
.attr("src", base_template + "/img/btnNext.png") .removeAttr('onmouseover').removeAttr('onmouseout');

seen it here: https://stackoverflow.com/questions/2888307/remove-attributes-onmouseover-and-onmouseout

the rollover no longer works, which is want i wanted. is there a better solution, mainly so i can remove the inline events declarations in the page?

thanks

yes, this javascript works, and i get the buttons i need. but while the page loads, for few seconds, i can still see the original buttons, and only after jquery kicks in, changing them. It would be much better if those inline styles could be prevented from loading, like in Table I-A1 we do with inline css.

thanks for the support and for your dedication to make a great plugin ??

just tested on a tablet, and the next and back are very hard to click. it cant be the size of them, because two of the navigation buttons have the same size, and work. i use the same events as you, only mine aren’t inline (but this shouldn’t make a difference, right? if in this html i change the image’s src, shouldn’t still work?

<img id="ubb-1-r" class="ubb-r ubb-1" src="https://utopiaacores.com/wp-content/plugins/wp-photo-album-plus/images/ubbr.png" style="border: none; z-index: 183; position: absolute; right: 0px; box-shadow: none; top: -10px; cursor: default; opacity: 0.19999999999999996; background-color: transparent;" onmouseover="wppaUbb(1,'r','show')" onmouseout="wppaUbb(1,'r','hide')" onclick="wppaUbb(1,'r','click')">

here is the page: https://utopiaacores.com/design

On a tablet, add:

ontouchstart="anyFunction"

where ‘anyFunction’ is identical to the onclick function, so:

...  onclick="wppaUbb(1,'r','click')"  ontouchstart="wppaUbb(1,'r','click')" >

yes, it works. now i hope i can layout all the elements, overriding rules with !important, like you said. probably, i’ll use flexbox

thanks

Please do as much as possible using the Photo Albums -> Settings admin page, to prevent disappointments in a later stage, and to save you a lot of work!

Hello again

yes it would be the best. but the problem is most of the units there are in pixels (iv’e set to auto what i was permitted), and hence they’re not dynamic. So i don’t see another option aside of overriding with css

the layout i’m trying to do in flex is something like this:
https://jsfiddle.net/lsag64/2VMVn/

actually, with this plugin, it’s almost there: https://utopiaacores.com/design

it’s ok in terms of functionality, but i can’t make the containing element of the gallery to have a height dictated by it’s height, and make the width dynamic. and this messes the vertical centering of the buttons, because the container wont have a dynamic height, and they are centered in its height

to make it easier, i thought of removing all the styles like this

$("#wppa-container-1, #slide_frame-1 div").each(function(i){
	$(this).attr({
		style: ""
	})
})

but it seem to have no effect

i belive the image width, in the image browser (not in the lightbox) should be contained in the space avaliable, but the heigth proportional. Can you help with any hint?

Thanks for your continued support and patience