WordPress.org

Forums

Customizr
Making the squares behind the feature images transparent (7 posts)

  1. Kellogges
    Member
    Posted 10 months ago #

    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?

  2. deputy05
    Member
    Posted 10 months ago #

    Try:
    Change:

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

    To this:

    .round-div {
    border-color: transparent;
    }
  3. Kellogges
    Member
    Posted 10 months ago #

    This didnt work unfortunately :( any other suggestions?

  4. ElectricFeet
    Member
    Posted 10 months ago #

    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.

  5. Kellogges
    Member
    Posted 9 months ago #

    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?

  6. ElectricFeet
    Member
    Posted 9 months ago #

    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;.

  7. Kellogges
    Member
    Posted 9 months ago #

    Thank you so much thats done the trick!

Reply

You must log in to post.

About this Theme

About this Topic