WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] reverse circle color scheme (26 posts)

  1. hassan.Zia
    Member
    Posted 7 months ago #

    Sir the circles on home page are black n white , and after mouse hover they turn colored. i want to reverse the role. i.e they are colored normally, on mouse hover they turn black and white.

  2. Andrew
    Forum Moderator
    Posted 7 months ago #

    Do you have a Child Theme or Custom CSS plugin?
    How familiar are you with CSS?
    Which browser are you most familiar with?

  3. hassan.Zia
    Member
    Posted 7 months ago #

    yes i have a child theme.
    i am a little familiar with CSS and know how it works. according to my understandings if i find out what is the name of the function in CSS i can reverse it , right?

  4. hassan.Zia
    Member
    Posted 7 months ago #

    Also sir is it possible to modify the position and number of circles to appear in a row.
    e.g two circles in first row (in the middle)
    three in the row below (divided into equal distances)

  5. Andrew
    Forum Moderator
    Posted 7 months ago #

    Could you create a new thread for each issue?

  6. Andrew
    Forum Moderator
    Posted 7 months ago #

    Which browser are you using?

  7. hassan.Zia
    Member
    Posted 7 months ago #

    im using chrome

    i tried switching
    .hentry.no-thumbnail
    with
    .hentry.no-thumbnail:hover

    but it didn't work

    i also tried to follow this thread but it didnt work also

    http://wordpress.org/support/topic/prevent-circles-from-greying-out-when-not-highlighted?replies=5

  8. Andrew
    Forum Moderator
    Posted 7 months ago #

    Can you link your site?

  9. hassan.Zia
    Member
    Posted 7 months ago #

  10. Andrew
    Forum Moderator
    Posted 7 months ago #

    How come you copied all the code from Spun's style.css file and pasted into your Child Theme style.css file?

  11. hassan.Zia
    Member
    Posted 7 months ago #

    umm.. i wasn't supposed to to that?
    this is my first experience with child-theme. sorry if im making some dumb mistakes.

    i did it because i wanted to display post names in the circle as well. i did it by following another post explained here in the forum.
    if i only post that function in styl.css it destroys the site:
    but if i copy paste whole css file it works fine

    media screen and ( max-width: 800px ) {
    .blog .hentry span.hometitle {
    font-size: 24px;
    font-size: 2.4rem;
    }

  12. Andrew
    Forum Moderator
    Posted 7 months ago #

    Look at the Codex example:
    http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

    You should have this at the top of your style.css file:

    /*
     Theme Name:     Spun child
     Template:       spun
    */
    
    @import url("../spun/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
  13. hassan.Zia
    Member
    Posted 7 months ago #

    ok did that. the text is out of the circles. but that is another debate. no what to do for reverse circle color scheme. thank you for your quick and easy replies

  14. Andrew
    Forum Moderator
    Posted 7 months ago #

    the text is out of the circles.

    Put all of the code from this PasteBin page in your style.css file: http://pastebin.com/Zg8huB3j

  15. hassan.Zia
    Member
    Posted 7 months ago #

    did that. thnx. you are a life savor
    so what about the color reversal?

  16. Andrew
    Forum Moderator
    Posted 7 months ago #

    Can you deactivate your snowflake plugin for now? I can't use my browser's developer tools on your site properly.

  17. hassan.Zia
    Member
    Posted 7 months ago #

    deactivated

  18. Andrew
    Forum Moderator
    Posted 7 months ago #

    At the bottom of your style.css file add this:

    .blog .hentry a .attachment-post-thumbnail {
     filter: none;
     -webkit-filter: none;
     -moz-filter: none;
     -o-filter: none;
     -ms-filter: none;
     opacity: 1;
     -webkit-opacity: 1;
     -moz-opacity: 1;
    }
    
    .blog .hentry a:hover .attachment-post-thumbnail {
     filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
     -webkit-filter: grayscale(1); /* Older versions of webkit */
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%); /* IE 10 */
     filter: gray; /* IE 9 */
     filter: url('inc/desaturate.svg#greyscale'); /* Firefox */
     opacity: .8;
     -webkit-opacity: .8;
     -moz-opacity: .8;
    }
  19. Andrew
    Forum Moderator
    Posted 7 months ago #

    Also copy the "inc" folder (with its contents) from the Spun theme and paste it into your Child Theme folder.

  20. hassan.Zia
    Member
    Posted 7 months ago #

    You are a life savor. i could have kissed you if you were in-front of me XD

    thanks a lot

  21. hassan.Zia
    Member
    Posted 7 months ago #

    by the way it is not working in firefox :(
    in firefox instead of turning grey on mouse-over the circle disappears

  22. Andrew
    Forum Moderator
    Posted 7 months ago #

    Did you do this:

    Also copy the "inc" folder (with its contents) from the Spun theme and paste it into your Child Theme folder.

  23. hassan.Zia
    Member
    Posted 7 months ago #

    working on firefox as well.
    once again thanks :)
    you are like a magician.

  24. hassan.Zia
    Member
    Posted 7 months ago #

    i have posted my other question in another thread.

    http://wordpress.org/support/topic/modify-number-of-circles-home-page-per-row?replies=1

    please guide me for that also Andrew NINJA

  25. Andrew
    Forum Moderator
    Posted 7 months ago #

    I couldn't figure it out with CSS alone, but I did make a christmas pudding if that helps http://snag.gy/Zp5eh.jpg

  26. hassan.Zia
    Member
    Posted 7 months ago #

    that could work as well

Reply

You must log in to post.

About this Theme

About this Topic