Widget customisation

  • Author
    Posts
  • #136240

    johodges100
    Member
    Original poster

    Hi. How can I remove the small grey bar at the top of each widget on the sidebar? Thanks

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

    #136243

    binarymoon
    Theme Author

    Hi there – you can remove this with some custom css.

    .sidebar .widget:before {
    display: none;
    }

    There’s information on using this here: https://en.support.wordpress.com/custom-css/

    Thanks – Ben

    #136270

    johodges100
    Member
    Original poster

    Thanks so much. That’s sorted it.

    Is there any way to reduce the padding between widgets on the sidebar ie so that the categories list is closer to the ‘welcome please click on categories’.

    Thanks again

    #136275

    binarymoon
    Theme Author

    Since your site is marked as private I can’t actually see what you have set up but the following code should help.

    .sidebar .widget {
    	margin-bottom: 0;
    	padding-top: 0;
    }
    #136318

    johodges100
    Member
    Original poster

    Hi

    Thanks so much for the reply. This doesn’t quite do what I need though. I have made the site public now (it is still a work in progress) so you can see what I need. It would be great to close the gap between the ‘welcome’ message on the top widget and the categories on the second widget on the sidebar

    With thanks

    Jo

    https://colemanhodges.com/

    #136324

    binarymoon
    Theme Author

    Hi Jo – thanks for making it public. That helps a lot.

    The css I have added below is specific to the widgets you have setup. If you change the widget order it could break the styles.

    .sidebar .widget:nth-child(2) {
        padding-top: 0;
    }
    .sidebar .widget:nth-child(2) .widgettitle {
        display: none;
    }
    .sidebar .widget:first-child {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    This should be closer to what you are looking for but we may need to tweak further.

    An alternative would be to add your message to the archive widget title, and then we change the styles of that to look like normal text. That may make things a bit more flexible.

    Thanks – Ben

    #136382

    johodges100
    Member
    Original poster

    Hi Ben. Thanks so much. That looks loads better. I wonder if you could explain what an archive widget title is. Many thanks, Jo

    #136391

    binarymoon
    Theme Author

    Glad that’s worked! :)

    Regarding the archive widget – it looks like I misspoke a little. I had assumed the list of years was from an archive widget but it looks like it’s a tag cloud. But, either way, most widgets have the ability to add a title to them, and the Tag cloud widget has one.

    If you edit the widget then you can see a box to enter the title. However the theme will style it so it’s uppercase, but we can change that with some custom css if you should want.

    However, if you’re not planning to change the design any time soon then you can just stick with what you have since it’s working :)

    #136444

    johodges100
    Member
    Original poster

    Thanks – I had tried the widget title but the capitals didn’t look very friendly! It would be great to get the css for lower case, just incase I want to use the title at some point.

    I have a couple of other questions but will start a new thread to keep things clear for anyone else with similar questions

    Thanks again

    Jo

    #136516

    binarymoon
    Theme Author

    Hi Jo

    To change the widget title to regular case you can use the following:

    .sidebar .widget h3.widgettitle {
        text-transform: none;
        letter-spacing: normal;
        opacity: 0.8;
    }

    I changed the opacity as well so that the title stands out a bit more. Without that it will look like the other widget text.

    #136519

    johodges100
    Member
    Original poster

    Amazing, thanks so much. So very happy with the support you are giving as I work through this :)

The topic ‘Widget customisation’ is closed to new replies.