Space above widget title

  • Masters

    #9334

    Hi

    I try to edit the widgets so I can make them look different.

    How can I decrease the space that is above the widget title with custom CSS?

    Then how can I round the bottom corners of the widget?

    wid.png

    Thanks!

    Mod

    Kenneth John Odle

    #43386
    Quote:
    How can I decrease the space that is above the widget title with custom CSS?

    .sidebar h3 {padding-top: 7px;}

    7px is the Graphene default, afaik. You’ll need to change it to something else.

    Quote:
    how can I round the bottom corners of the widget?

    .sidebar div.sidebar-wrap {border-radius: 12px;}

    Change 12px to whatever looks good.

    Right now, the border radius is applied to the .sidebar h3 element. The above code ensures that the top and bottom corners have the same amount of rounding.

    Masters

    #43387

    Thanks for the codes, they work like a charm.

    I want to ask two more things if they could be done with css:

    I see in this ( http://www.expertperformer.ro ) web page that when you hover the nav menu text, it takes like half a second to change from white to red. Can I do that in graphene with css?

    Is there a way to bold or change the weight of the standard text in the nav menu with the custom css?

    Thanks!

    Mod

    Kenneth John Odle

    #43388
    Quote:
    Can I do that in graphene with css?

    Yes, by using a CSS animation on the :hover pseudoclass for the item in question.

    First, create your animation:

    @keyframes changetored {
    0% {color: white;}
    100% {color: red;}
    }

    That should be easy to understand: when the animation starts, the text is white; when it ends, the text is red. You can add intermediate points, as well, so that you could actually go through a number of colors.

    Then add that animation to your element:

    .nav a {animation: changetored 10s linear;}

    This animation will take 10 seconds to execute (you probably want something close to 1 second), and it will be a linear transition.

    Quote:
    Is there a way to bold or change the weight of the standard text in the nav menu with the custom css?

    Easiest way to figure this out is to examine the navigation elements of my website with Firebug (or just look at my child theme style sheet) to see what I changed and how I changed it. Navigation menus can be tricky.

Viewing 4 posts - 1 through 4 (of 4 total)

  • You must be logged in to reply to this topic.