Spun theme – lost grayscale circles

  • vlward2012 · Member ·

    I know this is a problem several others have had, but I have not yet been able to find the answer. I am unable to get the circles on my homepage to turn grayscale, as in the demo. The ‘always show colour circles’ box is unchecked and the front page is set to show latest posts. I have also tried removing the featured image. But still the circle on the front page shows in colour.

    On a related note, is it possible to have a photo/image in a post, but not have this show in the circles on the front page? Is it possible to just have these as block coloured circles with the post title?

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • kathrynwp · Staff ·

    Internet Explorer does not support the greyscale CSS filter effect needed for this feature.

    http://caniuse.com/#feat=css-filters

    If you view your site in another browser like Firefox or Chrome you should see the greyscale effect if you’ve opted for it.

    I’ll answer your other question separately.

  • thesacredpath · Member ·

    Hi, there,

    On a related note, is it possible to have a photo/image in a post, but not have this show in the circles on the front page? Is it possible to just have these as block coloured circles with the post title?

    We can do this by using the “blog” body class to limit this to only the blog page, and then by using the unique post id class listed in the article HTML tag in the source to limit it to only a single post. 

    .blog .post-173 img {
    visibility: hidden;
}
.blog .post-173 a {
    background: #cc0000;
    border-radius: 180px;
}

    If you wish to have the colored circle change color when hovered, one easy way to do that would be to set an opacity (transparency) when it is hovered. For the above example, it would look like this: 

    blog .post-173 a:hover {
    opacity: 0.5;
}

    If you view the source code for your blog page, in the opening body HTML tag you will see something like this:
    <body class="home blog logged-in admin-bar mp6...

    In the opening article HTML tag for a post on the main page, you will see something like this:
    <article id="post-173" class="post-173 post...

    If you wish to do this to multiple posts, with the same color, you can add additional selectors to a single rule, comma separated like this example: 

    .blog .post-173 a, .blog .post-194 a, .blog .post-57 a {
    background: #cc0000;
    border-radius: 180px;
}

    I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

  • The topic ‘Spun theme – lost grayscale circles’ is closed to new replies.