CSS for font size and layout of sidebar/footer widgets

  • Unknown's avatar
    tltgisch · Member ·

    Hi there!

    I would greatly appreciate some help editing the layout and font formatting of the sidebar widgets on my site, via the CSS editor, if possible. I am using the Libre 2 theme and have three sidebar widgets on the right (Gravatar, text, social media), three footer columns with various widgets at the bottom.

    1) I would like to be able to customize the size of the title and text font in each of the widgets on my sidebars and footers and have this be independent of the overall font sizes available for customization in the customizer. Each time I try to set the fonts correctly for the size I want them to be on the page, the sidebar and footer widget titles and texts change; they are significantly smaller than the rest of the page text. Is there a way to control them separately with CSS?

    2) I would like for the first widget on the right-hand sidebar to be moved down so that it aligns with the top of each page (on the home page, the portfolio photos + titles). As it is now, the top sidebar widget (gravatar) appears higher up on the page under the menu than the beginning of each page does. This throws the alignment of the page off. Is there a way to move the whole sidebar down?

    I appreciate any help you can give me today with either of these issues!

    Thanks and take good care,
    T

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, this is for the sidebar widget content text size. I’ve included both for standard text and also for link within the widgets. 

    /*sidebar widget text size*/
#secondary .widget {
	font-size: .875rem;
}
#secondary .widget a {
	font-size: .875rem;
}

    For the sidebar widget titles. 

    /*sidebar widget title sizes*/
#secondary .widget-title {
	font-size: 12.6px;
}

    Footer widget text and link size. 

    /*footer widgets text size*/
.footer-widgets {
	font-size: .875rem;
}
.footer-widgets a {
	font-size: .875rem;
}

    Footer widget titles. 

    /*footer widget titles*/
.footer-widgets .widget-title {
	font-size: 12.6px;
}

    On your home page, you have a empty paragraph above the portfolio shortcode that is creating the misalignment. Edit the page and remove that and instead let’s adjust some of your custom CSS to move the content and sidebar down. You already have this CSS rule in your custom CSS. Find this and adjust the .5em bottom margin to get the spacing you desire. 2.5em looks pretty good to me. 

    .site-header {
	margin-bottom:.5em;
	padding-top:0
}
  • The topic ‘CSS for font size and layout of sidebar/footer widgets’ is closed to new replies.