Support » Plugin: WP Photo Album Plus » override inline styles

  • Resolved lsaguiar

    (@lsaguiar)


    Hello.

    i’d like to move up the buttons that navigate to the next and previous photos, to center them vertically, relatively to the slideshow height. they have the id’s ubb-1-l (back button) and ubb-1-r (next button). I know i can overide css in Table IV: > A > 10 > Custom style. but those styles are being overridden by inline styles.

    I would also need to set the width of the slideshow do a percentage value, so it becomes responsive. in Table I > A > column width, Cant use auto, because i’d need it to be about 80%, and auto gives me 100%, right?

    https://wordpress.org/plugins/wp-photo-album-plus/

    thanks for any help given.
    cheers

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter lsaguiar

    (@lsaguiar)

    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

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    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.

    Thread Starter lsaguiar

    (@lsaguiar)

    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: http://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

    Thread Starter lsaguiar

    (@lsaguiar)

    but this works:

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

    seen it here: http://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

    Thread Starter lsaguiar

    (@lsaguiar)

    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 😉

    Thread Starter lsaguiar

    (@lsaguiar)

    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="http://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: http://utopiaacores.com/design

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    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')" >
    Thread Starter lsaguiar

    (@lsaguiar)

    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

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    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!

    Thread Starter lsaguiar

    (@lsaguiar)

    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:
    http://jsfiddle.net/lsag64/2VMVn/

    actually, with this plugin, it’s almost there: http://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

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘override inline styles’ is closed to new replies.