Help with CSS Please if anybody knows @ #Packageblock

  • Liz
    Liz
    Elite Member 441 points
    May 3, 2015 at 7:39 am

    (I am assuming) This is the default css for the tall vertical package display blocks.
    Found using Firebug. “Tearing hair out trying to figure this out!”
    ______________________________________________
    element {
    }
    #PACKAGEBLOCK .panel {
    transition: all 0.2s ease-in-out 0s;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    }
    _______________________________________________

    I have 4 packages in Dating theme

    In the order of Left to Right Low to Higher price for membership.

    I want to ad 4 different background images to the panels
    without it affecting all other panels through out my site.

    I have tried changing the css for panels however it affects all panels.

    I just want to display a Background PNG or jpeg for each of my 4 membership package panels.

    Does anybody know what CSS code I would add to my Child theme’s Custom CSS
    so it is aimed at just the Packageblock.

    The package block is just the vertical block. I don’t want it to affect the Horizontal package block that
    is displayed elsewhere in my site showing upgrade options in (my account dashboard area)

    I have the vertical Package block showing as vertical when members first select a package, as I think I am using membership packages not listing packages!

    anyone know how to do this?


  • Josh
    Super Guru 13,875 points
    May 3, 2015 at 8:46 am

    Hello Liz
    Try this in Design Setup >Custom Meta Data >Header Styles
    <style>
    #PACKAGEBLOCK .panel {
    background-image: url(“bg2.jpg”);
    }
    </style>

  • Liz
    Liz
    Elite Member 441 points
    May 3, 2015 at 11:07 am

    @Josh, I can’t believe you’ve done it again………..


  • Josh
    Super Guru 13,875 points
    May 6, 2015 at 3:41 pm

    Hello Liz
    Since you ‘blocked’ me from posting a solution in your other post will post it here for you or any other community member interested in the same.
    In Design Setup >Custom Meta Data >Header Styles add the following code:
    [code title=””]
    <style>
    #panel0 {
    background-image: url(“https://mysiteurl/wp-content/uploads/2015/05/bg0.jpg&#8221;);
    }

    #panel1 {
    background-image: url(“https://mysiteurl/wp-content/uploads/2015/05/bg1.png&#8221;);
    }
    #panel2 {
    background-image: url(“https://mysiteurl/wp-content/uploads/2015/05/bg2.png&#8221;);
    }
    #panel3 {
    background-image: url(“https://mysiteurl/wp-content/uploads/2015/05/bg3.png&#8221;);
    }
    </style> [/code]
    Replace my image link with your link
    In Design Setup >Custom Meta Data >Footer Styles add the following code:
    [code title=””]
    <script>
    jQuery(‘.packagesblock .col-md-3:nth-child(1) .panel ‘).attr(‘id’,’panel0′ );
    jQuery(‘.packagesblock .col-md-3:nth-child(3) .panel ‘).attr(‘id’,’panel1′ );
    jQuery(‘.packagesblock .col-md-3:nth-child(5) .panel ‘).attr(‘id’,’panel2′ );
    jQuery(‘.packagesblock .col-md-3:nth-child(7) .panel ‘).attr(‘id’,’panel3′ );
    </script>
    [/code]
    Hope this helps

    Attachments:
    You must be logged in to view attached files.
  • Liz
    Liz
    Elite Member 441 points
    May 11, 2015 at 1:20 pm

    Attachments:
    You must be logged in to view attached files.

  • Josh
    Super Guru 13,875 points
    May 11, 2015 at 1:55 pm

    Yes you can use the css code in your child theme stylesheet

    This reply was awarded the best answer by the topic poster.
  • Liz
    Liz
    Elite Member 441 points
    May 11, 2015 at 2:37 pm

    What about the Script code that you suggested to put in the footer Custom Meta Data ?
    I cant put a script in the style.css can I ?

    You worked hard for this one Josh and I appreciate you. as well as the time you took to look into the question and find a very good answer as well as explain it really well. Thank you.
    I didn’t block you by the way…… I simply made a request 🙂 but you have the choice as to how you choose to respond to my frustration, and you got 200/100 perfect score. You’ll make the perfect husband, if your not already married. You tolerate and understand Women really well. Have a nice night.

    Liz

    Attachments:
    You must be logged in to view attached files.

  • Josh
    Super Guru 13,875 points
    May 13, 2015 at 10:01 am

    Copy the file footer.php to your child theme then add the script after the closing </body> tag

Viewing 8 posts - 1 through 8 (of 8 total)

New Business Themes for WordPress 2020

Start your new website today!

View Business Themes