WordPress.org

Support

Support » Themes and Templates » Customizr » Making the squares behind the feature images transparent

Making the squares behind the feature images transparent

  • Hi there,

    I want to make the white square boxes around the featured images transparent, because I have an image in the background. I’ve tried lots of different things from forums but nothing has worked.

    Here is my website
    http://www.bluemooncafesheffield.co.uk

    And this is all the stuff I have in my custom CSS section if this helps:
    .navbar .navbar-inner {
    -webkit-box-shadow: 0px 0px 0px;

    -moz-box-shadow: 0px 0px 0px;
    box-shadow: 0px 0px 0px;
    background:none
    }

    .navbar .nav > li > a, .navbar .nav > li > a:first-letter {
    color: black;
    text-shadow: none;
    }
    .brand.span3 {
    display: block;
    float: none;
    margin: auto !important;
    }
    }
    /* Center tagline */
    .span7.inside.site-description {
    float: left;
    margin-left: 15%;
    margin-top: -30px;
    display: block;
    }

    /*Slider size*/
    .carousel .item {
    line-height: 250px;
    overflow: hidden;
    min-height: 500px;

    .round-div {
    border-color: #000000; /* Change #000000 to background-color */
    }

    .page .entry-title {
    display: none;
    }

    .marketing h2 {
    color: white;
    font-weight: normal;
    }
    .breadcrumbs {
    display: none;
    }

    Can anyone help?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Try:
    Change:

    .round-div {
    border-color: #000000; /* Change #000000 to background-color */
    }

    To this:

    .round-div {
    border-color: transparent;
    }

    This didnt work unfortunately 🙁 any other suggestions?

    Tried to get to your site, but it looks like you have modified functions.php of the main theme (and broken it). You need to undo the changes you have made in Customizr’s functions.php and set up your own in a child theme. More details on how to do this here.

    Thank you deputy05 this seems to have done the trick on full screen and tablet size screen however when it goes down to phone size the white boxes reappear any idea how I can fix this?

    The theme makes use of media queries to handle responsiveness at smaller screen sizes. This means you also need to overrule these rules with your CSS.

    You need to add:

    @media (max-width: 979px) {
        .round-div,
        .widget-front .round-div {
            border-color: transparent;
        }
    }

    p.s. If you’re not using the social block and the site description in the header, you can get rid of extra space between your logo and menu by adding:

    .social-block.span5 {
        display: none;
    }

    and changing your .span7.inside.site-description { ... rule to display: none; instead of display: block;.

    Thank you so much thats done the trick!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Making the squares behind the feature images transparent’ is closed to new replies.
Skip to toolbar