Custom styling

  • Resolved vytaulla51

    (@vytaulla51)


    10 years, 8 months ago

    Hi:

    I am trying to do some custom styling. Prior to recent updates the styles I had figured out accomplished what I wanted but they no longer appear to work.

    If you go to this page, for instance, https://www.wildwoodmusic.com/12-string-guitars.html
    and look at the page through a smart phone you will see that the album descriptive text becomes very narrow, with the thumbnail floating on the left and then a bunch of empty space under the thumbnail. Wastes space and looks bad. Also the headline on right goes out of the box.

    Previously I set up some media queries that would display:none the thumbnail and let the text fill the box. But now that stopped working and I can’t figure out how to accomplish that.

    I would like one of two things, if possible.
    Either: let the thumbnail NOT float, but display:block, and have the text not float, but display block underneath (so image on top, text below, filling the album space (for the smartphone size only) OR

    Have the thumbnail not appear on smallest size and then the text fill the box. But I can’t seem to get rid of the float:left and float:right of these boxes.

    Previously, to accomplish what I wanted I used these styles:

    /*==========For WPPA — to make album thumbs not show on smart size and have album descriptions fill the box=====*/

    .wppa-img {display:none !important;}
    .covertext-frame {min-width:95% !important;float:none !important;}
    .wppa-box-text {padding-right:5px !important; padding-bottom:5px !important;float:none !important;}
    .wppa-title {margin-top:5px !important;}

    @media only screen and (min-width : 461px) {
    .wppa-img {display:block !important;}
    .covertext-frame {min-width:100px !important;}
    }

    That stopped working and I can’t seem to isolate the right styles to get this to work.

    Any assistance greatly appreciated!

    https://www.ads-software.com/plugins/wp-photo-album-plus/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Jacob N. Breetvelt

    (@opajaap)

    First set cover type to Long descriptions mcr in Table IV-D6

    To hide the coverphoto use

    .coverphoto-frame {
display:none;
}

    At the moment you hide the coverphoto, also apply the following:

    .wppa-cover-text-frame {
float:left !important;
width: 100% !important;
}

    Thread Starter vytaulla51

    (@vytaulla51)

    Just what I needed!

    Many, many thanks!

    How can I get text on the covers to be on the very top? Right now there is a large space between the top and the text.

    Thanks

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    Try using cover type Long descriptions in Table IV-D6.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom styling’ is closed to new replies.