Widget CSS Customization

  • Unknown's avatar
    vlogazul · Member ·

    I am currently using the forever theme and I would like to know if there’s a snippet to make the 3 pictures from the bottom footer have the glowing feature while clicking on the pic, identical to the one on the follow vlog azul button that is on the top right side of the main page. Thanks!

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

  • Unknown's avatar
    5mutek · Member ·

    Hi there – try this out and see if it get’s you where you’d like to be. 

    /* ********************************************
    Add hover effect to images in footer
    *******************************************/

/* Set a CSS transition for fade in and out, adjust timing to tate */

#supplementary img {
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

/* Decrease opacity on hover, adjust opacity amount to taste */

#supplementary img:hover {
    opacity: 0.75;
    filter: alpha(opacity=75); /* Fallback for IE8 & older */
}

    That bit of CSS sets up a nice fade in animation, then decreases the opacity of your footer images on hover. You can change the duration of the animation and the amount of opacity on hover to your taste.

    I’m pretty sure CSS3 transitions are fully supported, but I included browser prefixes just incase.

    Does this help?

  • Unknown's avatar
    vlogazul · Member ·

    It worked perfectly, thanks!

    is there a snippet to change the font of the tittle of the 3 widgets from the footer but only the font from those widgets?

  • Unknown's avatar
    5mutek · Member ·

    Hey, no problem, glad it helped!

    To change the font, for only the bottom 3 widgets, try this –

    /* Change font styling on bottom 3 widgets */

#supplementary .widget-title {
    font-family: "Times New Roman", Times, serif;
}

    You can change the font family to whatever you’d like – but I would suggest either staying with the fonts that are being used in your theme, or making sure to stick to web safe fonts.

    The example I showed you above changes just the font family, but there’s a ton more values that you can change.

    Say, for example, instead of Times Roman, you wanted to use Helvetica, in the color salmon, all caps, with a really light font weight of 200, you could do this – 

    #supplementary .widget-title {
    /* define font stack, with fall backs incase one of your users doesn't have a font' */
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    /* set the font weight to 200, a light weight */
    font-weight: 200;
    /* set all of the letters to upper case */
    text-transform: uppercase;
    /* cange the color to Salmon */
    color: salmon;
}

    The first line defines the font, by using a font stack. Basically, the font stack says hey, check and see if the user has this font, if they don’t, check to see if they have this one, and so on, and if they have none of them just use the system default serif font.

    The next line defines the font weight. You can read more about font weight here – http://www.w3schools.com/cssref/pr_font_weight.asp

    The next line is the text transform property, which I have set to uppercase, but it also has a few different values that you can pass to it. Learn more here – http://www.w3schools.com/cssref/pr_text_text-transform.asp

    The final line sets the color – you can pass a numeric value or a pre-defined name. Here’s a list of color names that you can use – http://www.w3schools.com/cssref/css_colornames.asp

    Just for the heck of it, if you really want to see what all of your options are – here’s all of the available font properties –
    http://www.w3schools.com/css/css_font.asp

    …and one on all of the available text properties –
    http://www.w3schools.com/css/css_text.asp

    Let me know if this helps. :)

  • Unknown's avatar
    vlogazul · Member ·

    it worked perfectly, awesome job! Thanks

    i just recently added a text “2014 vlogazul.com” into my footer using the site-info: before code. is there a snippet to make that text be between the other two texts “Blog de WordPress.com” and “El Tema Forever” on the footer?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, we can use a little CSS trickery in the form of an nth child pseudo selector to place the text befor El Terma Forever.

    In your custom CSS, replace this 

    #site-info:before {
    color: #efefef;
    content: "© 2014 vlogazul.com";
}

    with this: 

    #colophon a:nth-child(2):before {
    color: #efefef;
    content: "© 2014 vlogazul.com ";
}
  • Unknown's avatar
    vlogazul · Member ·

    I already tried the latest code you gave me and it does work, the only thing is that the text that i tried to put on between “2014 vlogazul.com” links with the text “El tema Forever”.. is there any way i can make the text be on the middle but without to be linked with the “El tema Forever” text?

    also, would it be possible to let me know what’s the css element of the “El tema Forever” text? the #colophon a } targets both the “Blog de wordpress.com” and “El tema Forever”

  • Unknown's avatar
    thesacredpath · Member ·

    I can’t think of a way to insert that text between the other two links without it linking.

    Try the two solutions below. The first moves your copyright above the WordPress and theme credits, and the second moves it below them. The additional display: block; declaration causes it to move to a separate line.

    #site-info:before {
    color: #efefef;
    content: "© 2014 vlogazul.com";
    display: block;
}
    #site-info:after {
    color: #efefef;
    content: "© 2014 vlogazul.com";
    display: block;
}
  • Unknown's avatar
    vlogazul · Member ·

    The 2 codes work perfectly, thank you very much!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Widget CSS Customization’ is closed to new replies.