Need help? Check out our Support site, then


Spun Theme: Control Opacity Fade of Thumbnail Images and Buttons

  1. Hi,

    I'd like to be able to control the amount of fade/opacity on the front page thumbnail images of the Spun theme (independent of the text), and possibly reverse the default behavior.

    Right now the images start out faded and go to 100% opacity on hover, and I want to have the option to switch it around the other way, so they are normally at full opacity and can fade on hover.

    In the same way, I also would like to be able to control the opacity of the infinity handle, the secondary/widget visibility toggle (I currently have it hidden), and the menu/navigation buttons: again, independently of the text.

    Thank you in advance!

    The blog I need help with is blog.robcorpuz.com.

  2. Hi there, add the following two rules to your custom CSS. I have reversed the opacities to produce the effect you want.

    .blog .hentry a .attachment-home-post, .archive .hentry a .attachment-home-post, .search .hentry a .attachment-home-post {
    opacity: 1;
    }
    .blog .hentry a:hover img, .archive .hentry a:hover img, .search .hentry a:hover img, .blog .hentry a:focus img, .archive .hentry a:focus img, .search .hentry a:focus img {
    opacity: 0.8;
    }
  3. Here's the declarations to switch the hover opacity rules:

    .blog .hentry a:hover img,
    .archive .hentry a:hover img,
    .search .hentry a:hover img,
    .blog .hentry a:focus img,
    .archive .hentry a:focus img,
    .search .hentry a:focus img {opacity: 0.8;}
    
    .blog .hentry a .attachment-home-post,
    .archive .hentry a .attachment-home-post,
    .search .hentry a .attachment-home-post {opacity: 1;}

    Which bit is the infinity handle and can you unhide the currently hidden bit so I know which part of the page you're talking about?

    I don't know if there's much point in changing the opacity on the navigation menu, you could change the background colour instead and it would have almost the same effect. The only thing you would be missing is a little of the background texture coming through. The opacity technique is much more noticable on images! It is still possible though. Here's how you can target the main nav menu (and set the fade times):

    .menu>li {opacity: 0.5; transition: all 0.8s ease-in-out 0.5s;}
    .menu>li:hover {opacity: 1; transition: all 0.8s ease-in-out 0.5s;}
  4. Just FYI - the first part of the code I posted is the same as thesacredpath's - he's a bit speedier than I am!

  5. Thanks so much thesacredpath and hallluke!

    The first part, about the thumbnails, worked just fine)

    The second part, with the menu buttons, also faded the text, which I'd like to keep opaque. Basically, I'd like to duplicate the effect of the main nav buttons on my portfolio site (www.robcorpuz.com).

    I've made both the toggles visible that I was talking about, but basically I'd like to be able to apply the same effect (normal: faded blue/purple background and opaque dark blue text & hover: opaque blue/purple background and opaque yellow text) to:

    main navigation menu buttons
    "More (older posts)" button
    "+ (show widget area)" button
    Comment bubble button (on individual posts)
    prev/next navigation arrows (on individual posts)

    Thanks!

  6. @hallluke, thanks for catching the menu question. I need more coffee. ;P

  7. Unfortunately if you set an element to be less opaque you can't then set a child element to be more opaque - in this case if you change the li element background opacity the a element will inherit this setting.

    On your non-wordpress site just the background colour is modified so perhaps you should try that approach too.

  8. Hi hallluke and thesacredpath,

    I've been working on this, using code from my portfolio site to try and make it work, and I feel like I'm moving in the right direction somewhat. I've got most of the buttons (on the desktop) looking the way I wanted (normal: faded blue/purple background and opaque dark blue text -- hover: opaque blue/purple background and opaque yellow text) but I have some issues:

    1) I'd like to be able to add some spacing to the sub-menu and move it down so it doesn't cover the main-menu. I tried playing with margins and padding but couldn't get anywhere.

    2) I can't seem to get the tail of the comment bubble (on individual posts) to follow this same behavior.

    3) The spacing of the mobile menu is off now, with items intersecting.

    Do you have any suggestions? Thanks so much)

  9. 1) I'd like to be able to add some spacing to the sub-menu and move it down so it doesn't cover the main-menu. I tried playing with margins and padding but couldn't get anywhere.

    Add the following to space the menu down. 3.8em seems to work well. If you get the menu down too far it can disappear when you try and move your mouse down to the submenu items.

    .main-navigation ul ul {
    top: 3.8em;
    }

    2) I can't seem to get the tail of the comment bubble (on individual posts) to follow this same behavior.

    The tail of the comment bubble is actually a "border" and you have the CSS in your custom CSS right now. Find the following and adjust the color code as desired.

    .comments-link .tail {
        border-top-color: #e3af01;
    }

    3) The spacing of the mobile menu is off now, with items intersecting.

    You can adjust the line height so that they don't stack up. There is a separate class for the mobile menu, .main-small-navigation, which you can use to target just that menu as follows. The first is spacing for the top level menu items, and the second is for the submenu items.

    .main-small-navigation {
        line-height: 25px;
    }
    .main-small-navigation .sub-menu {
        line-height: 45px !important;
    }
  10. @corpuzrob, by the way, I like your site and will be spending some time there this weekend.

  11. @thesacredpath,

    Thanks so much for your help and kind words about my site!

    I tried to do everything you suggested and mostly it worked out great, thanks! Just a couple small things:

    1) Along with moving the sub-menu down, I also wanted to add a little bit of space/padding above, between, and below the sub-menu items themselves, so that, for example, the sub-menu buttons under "About" that say "This Blog" & "Brain Icons" aren't smashed right up against each other with no white space above and below them. I tried playing with padding and margins but couldn't figure it out. Wouldn't mind being able to adjust the opacity of the white box behind the sub-menu items/buttons, but that's not crucial.

    2) Perhaps I'm missing something obvious, but I still can't figure out how to change the tail of the comment bubble so that it follows this behavior (normal: faded blue/purple background -- hover: opaque blue/purple background) to fit with the rest of the bubble. Also, is there a way to increase the size of this comment bubble? :^)

    3) I'm really liking the look of the mobile menu now, but I'd still love to be able to change the font color of the sub-menu items, and change the hover/active background color the "Menu" button. I've tried tinkering with both but had no luck so far.

    Thanks so much! You guys are great)

  12. Along with moving the sub-menu down, I also wanted to add a little bit of space/padding above, between, and below the sub-menu items themselves, so that, for example, the sub-menu buttons under "About" that say "This Blog" & "Brain Icons" aren't smashed right up against each other with no white space above and below them.

    This adds a bit of padding above and below the submenu items.

    .main-navigation .sub-menu li a {
        margin-top: 3px;
        margin-bottom: 3px;
    }

    To adjust the opacity of the white background on the submenu, add the following. It uses an RGB color with an alpha transparency (the last number). What you will notice is that the "contact" menu items will then show through the submenu off of About.

    .main-navigation .sub-menu li {
        background-color: rgba(255, 255, 255, 0.5);
    }

    2) Perhaps I'm missing something obvious, but I still can't figure out how to change the tail of the comment bubble so that it follows this behavior (normal: faded blue/purple background -- hover: opaque blue/purple background) to fit with the rest of the bubble. Also, is there a way to increase the size of this comment bubble?

    The comments bubble and tail are done with opacity in the following two rules.

    .comments-link a:hover, .comments-link a:focus {
        opacity: 1;
    }
    .comments-link a:hover .tail, .comments-link a:focus .tail {
        opacity: 1;
        transition: all 0.4s ease-in-out 0s;
    }

    The size of the bubble is controlled by height, width and border-radius in the following. After making the bubble bigger, you will need to adjust the line-height to center the number/+ sign.

    .comments-link a {
        background: none repeat scroll 0 0 #444;
        border-radius: 30px;
        color: #fff;
        display: block;
        float: right;
        height: 30px;
        line-height: 1;
        text-align: center;
        width: 30px;
    }

    3) I'm really liking the look of the mobile menu now, but I'd still love to be able to change the font color of the sub-menu items, and change the hover/active background color the "Menu" button. I've tried tinkering with both but had no luck so far.

    To change the non-hover color of the submenu items on the mobile menu, you can add this.

    .main-small-navigation .sub-menu li a {
        color: #cc0000 !important;
    }

    If you want to change the text hover color also, same rule above but with :hover after the "a"

    The background of the menu toggle can be changed with the following.

    h1.menu-toggle:hover {
        background-color: #65cc00 !important;
    }
  13. Hi Everyone,

    Awesome Portfolio site Rob! & Awesome assistance happiness engineers!

    I'm working on my spun theme currently and am having mega trouble determining a few things and it seems (to me) to be some similar questions. I'm looking to extend or show all of the bubbles/ posts I have published. I'd like to eliminate the show "older posts" as well as have the social media footer static.

    my blog is: gypseafree.com
    Thank you in advance! <3

  14. Hi @acarrera04, since you are asking a slightly different question, can I ask you to create a new thread in the CSS Forum and we will watch for it and help you out. Many thanks in advance.

  15. @thesacredpath yes & thank you for the response! :)

  16. Yes, thanks again, @thesacredpath, and thanks @acarrera04 :^)

    thesacredpath, I'm still working on a couple of things that you suggested, so I may be back here to ask a couple more things a bit later)

  17. @corpuzrob, no problems. You know where to find us. :)

Topic Closed

This topic has been closed to new replies.

About this Topic