Question about opacity

glow · January 8, 2014

Hi my shopping cart has an image background whos opacity I want to be able to change so I had someone work on it and they managed to apply opacity to the whole section not just the back ground so now when opacity is set to 50% the opacity is being applied to not only the background but but it is being applied to the product tittle, product description, price, add to cart button, basically opacity is being added to everything. He says that it is unnavoidable because the opacity isbeing adde to the div that contains all of the shopping cart elements and so they too will have their opacity affected. So I was wondering if their is a way to apply opacity to the div and only affect the background and not the other elemnts in the div? here is the code sample

<div style="background-image:url(<?= $bg ?>);background-color:<?= $color ?>" class="product_cont">

                    <h1 class="product_cat"><?= $category->name; ?></h1>

                    <table width="100%">

                        <?php

                        while ($product_query->have_posts()): $product_query->the_post();

                            $product_meta = get_post_meta(get_the_ID(), 'mac', TRUE);

                            @extract($product_meta);

                            $variety = @array_filter($variety);

                            ?>

                            <tr>

                                <td width="10%" style="margin-left:20px;vertical-align:middle;">

                                    <?php

                                    the_post_thumbnail(array(50, 50));

                                    ?>

                                </td>

                                <td width="65%">

                                    <span class="product_title" ><?php the_title(); ?></span>

                                    <p class="product_description">

                                        <?= substr(get_the_content(), 0, 60); ?>

                                    </p>

                                </td>

                                <td width="10%">

                                    <?php

                                    $product_price = get_post_meta(get_the_ID(), 'product_price', TRUE);

                                    $product_meta = get_post_meta(get_the_ID(), 'mac', TRUE);

                                    @extract($product_meta);

                                    echo "<p class='product_price'>$" . @number_format($product_price, 2) . "</p>"

                                    ?>

                                </td>

                                <td style="text-align:center;" width="15%"><button data-product="<?php the_ID(); ?>" class="add_cart_btn"><?= (!empty($acb_button_btn_text))? $acb_button_btn_text:"Add To Cart" ?></button></td>

                            </tr>

                            <div title="Add Item" style="display:none;" id="dialog-<?php the_ID(); ?>">

                                <form method="POST">

                                    <input type="hidden" name="action" value="add_to_cart">

                                    <input type="hidden" name="macp_cart[product_id]" value="<?php the_ID(); ?>">

                                    <!-- Variety/Size -->

                                    <?php if ($variety != NULL): ?>

                                        <div style="width:100%;display:block;">

                                            <p style="font-weight:bold;margin:0px;">Size</p>

                                            <input checked type="radio" name="macp_cart[variety]" value="<?php the_ID() ?>" /> Normal Price <br>

                                            <?php

                                            foreach ($variety as $key => $vrt) {

                                                if (!empty($vrt)) {

                                                    $variety_post = get_post($key);

                                                    $variety_meta = get_post_meta($key, 'mac', TRUE);

                                                    echo "<input type='radio' name='macp_cart[variety]' value='$key' /> " . $variety_post->post_title . " <small>($$vrt)</small><br>";

                                                }

                                            }

                                            ?>

                                        </div>

                                    <?php endif; ?>

                                    <!-- Product Option -->

                                    <?php if ($option != NULL): ?>

                                        <div style="width:100%;display:block;">

                                            <p style="font-weight:bold;margin:0px;">Product Options</p>

                                            <?php

                                            $check = "checked";

                                            foreach ($option as $key => $opt) {

                                                $option_post = get_post($key);

                                                $option_meta = get_post_meta($key, 'mac', TRUE);

                                                echo "<input $check type='radio' name='macp_cart[option]' value='$key' /> " . $option_post->post_title . " <small>($" . $option_meta['product_price'] . ")</small><br>";

                                                $check = "";

                                            }

                                            ?>

                                        </div>

                                    <?php endif; ?>



                                    <!-- Product Extra -->

                                    <?php if ($extra != NULL): ?>

                                        <div style="width:100%;display:block;">

                                            <p style="font-weight:bold;margin:0px;">Product Extra</p>

                                            <?php

                                            foreach ($extra as $key => $ext) {

                                                $extra_post = get_post($key);

                                                $extra_meta = get_post_meta($key, 'mac', TRUE);

                                                echo "<input type='checkbox' name='macp_cart[extra][]' value='$key' /> " . $extra_post->post_title . " <small>($" . $extra_meta['product_price'] . ")</small><br>";

                                            }

                                            ?>

                                        </div>

                                    <?php endif; ?>

                                    <div style="width:100%;display:block;margin:0px;">

                                        <label for="user_note">Note.</label><br><textarea name="macp_cart[note]" id="user_note"></textarea>

                                        <br>

                                        <label for="qty">Quantity: </label><br><input type="text" name="macp_cart[qty]" id="qty" value="1">

                                        <br>

                                        <input style="margin-top:10px;" type="submit" value="<?= (!empty($acb_button_btn_text))? $acb_button_btn_text:"Add To Cart" ?>">

                                    </div>

                                </form>

                            </div>

                        <?php endwhile; ?>



                    </table>

                </div>

And this is the CSS:

        <style>

        <?php

        $style_opt = get_option('ma_cp_style');

        if (is_array($style_opt)) {

            extract($style_opt);

        }

        $cat_title_style = explode('|', $cat_title_font_type);

        $title_style = explode('|', $title_font_type);

        $dp_font_type = explode('|', $dp_font_type);

        $pp_font_type = explode('|', $pp_font_type);

        $cat_title_style[0] = str_replace(' ', '+', $cat_title_style[0]);

        $title_style[0] = str_replace(' ', '+', $title_style[0]);

        $dp_font_type[0] = str_replace(' ', '+', $dp_font_type[0]);

        $pp_font_type[0]= str_replace(' ', '+', $pp_font_type[0]);

        ?>

            @import url(<?= $title_style[0] ?>);

            @import url(<?= $cat_title_style[0] ?>);

            @import url(<?= $dp_font_type[0] ?>);

            @import url(<?= $pp_font_type[0] ?>);

                    

            .product_cat{

                font-family: <?= $cat_title_style[1] ?> !important;

                font-size:<?= $cat_title_font_size ?> !important;

                color:<?= $cat_title_font_color ?> !important;

                text-shadow: <?php 

                    extract($cat_title_shadow);

                 echo "$h_shadow $v_shadow $blur $color !important";

                ?>

            }

            .product_title{

                font-family: <?= $title_style[1] ?> !important;

                font-size:<?= $title_font_size ?> !important;

                color:<?= $title_font_color ?> !important;

            }

            .product_description{

                font-family: <?= $dp_font_type[1] ?> !important;

                font-size:<?= $dp_font_size ?>px !important;

                color:<?= $dp_font_color ?> !important;

            }

            .add_cart_btn{

                background-color: <?= $acb_button_color ?> !important;

                border-radius: <?= $acb_button_radius ?> !important;

                box-shadow: <?php 

                extract($acb_button_shadow);

                echo "$h_shadow $v_shadow $blur $speard $color !important";

                 ?>;

                color: <?= $acb_button_text_color ?>;

            }

            .add_cart_btn:hover{

                background:none;

                background-color: <?= $acb_button_color_hover ?> !important;

                border-radius: <?= $acb_button_radius_hover ?> !important;

                box-shadow: <?php 

                extract($acb_button_shadow_hover);

                echo "$h_shadow $v_shadow $blur $speard $color !important";

                 ?>;

                color: <?= $acb_button_text_color_hover ?> !important;

            }

            .product_cont{

                background-image: url(<?= $cat_background_image ?>);

                border-radius: <?= $cat_background_container_radius ?>  !important;

                box-shadow:<?php 

                extract($cat_background_container_shodow);

                echo "$h_shadow $v_shadow $blur $speard $color !important";

                 ?> ;

                width: <?= (empty($cat_background_container_width))?"100%":$cat_background_container_width ?>  !important;

                height: <?= (empty($cat_background_container_height))?"100%":$cat_background_container_height ?>  !important;

                background-color: <?= $cat_background_container_color ?>  !important;

                opacity: <?= (empty($cat_background_container_opacity) || $cat_background_container_opacity == "0")?'1':$cat_background_container_opacity/100 ?>  !important;

            }

            .product_price{

                font-family: <?= $pp_font_type[1] ?> !important;

                font-size:<?= $pp_font_size ?>px !important;

                color:<?= $pp_font_color ?> !important;

            }

            .product_cont table,.product_cont table td,.product_cont table tr{

                border:none !important;

            }

        </style>

Thank you for any help that anyone can provide.

Glow

Edited January 8, 2014 by glow

adam_bray · January 8, 2014

That's some funky CSS right there. You've set every line to !important which defeats the point.

Yes there's a way to do what you want. Yes it's simple enough to see the lines you need to change.. but god knows where you're getting your colors from and how they're coming across.

These are the 2 lines you need to change :

background-color: <?= $cat_background_container_color ?>  !important;
 
                opacity: <?= (empty($cat_background_container_opacity) || $cat_background_container_opacity == "0")?'1':$cat_background_container_opacity/100 ?>  !important;

I'm guessing the colors are HEX values, i.e. #FF0000 being red. To do what you want you need to use RGBA values - red, green, blue, alpha. Alpha being the opacity of that color.

What that would give you is something along the lines of this -

background-color: rgba( 255, 255, 255, .1 );

Or with your funky CSS/PHP hybrid -

background-color: rgba(<?= $cat_background_container_color ?>,<?= (empty($cat_background_container_opacity) || $cat_background_container_opacity == "0")?'1':$cat_background_container_opacity/100 ?>);

But remember: The above code won't work if your color ($cat_background_container_color) is a HEX value. If that doesn't work then that'll be the issue.

glow · January 8, 2014

Hi Adam and thank you for posting I should of been more specific I want the opacity to affect:( .product_cont ) only. wil the above code you posted help with that?

glow · January 8, 2014

Hi, I just forwarded your info to my developer and he says that he is not able to convert: Hex to RGB and so apparently that's what is causing the problem.

glow · January 8, 2014

As an alternative if there is no solution can we through php or CSS or javascript perhaps "exclude" the other elements inside the div from having their opacity affected? - is that possible?

adam_bray · January 8, 2014

The method for doing that is the one already posted. The best way would be either convert that color to rgba or type it in normally, without the need for PHP.

glow · January 8, 2014

Thank you Adam for your help .

Sign In

Question about opacity

Recommended Posts

glow

Link to comment

Share on other sites

adam_bray

Link to comment

Share on other sites

glow

Link to comment

Share on other sites

glow

Link to comment

Share on other sites

glow

Link to comment

Share on other sites

adam_bray

Link to comment

Share on other sites

glow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information