Logo size

Hi Sonia,

How do I increase the size of my logo to fit the full width of the page? This is my site

You can remove the padding from the left and right of the logo, and get it to take up 100% of the available space by adding the following to your custom CSS:

.site-branding {
    padding-left: 0;
    padding-right: 0;
}

.site-logo {
    width: 100%;
}

I’d also like to insert the same banner above the footer or widget area. Is this possible?

Adding the banner as a background to the footer area with some more custom CSS is likely the most straightforward way to achieve what you’re after:

.footer-widget-area {
    background-image: url(https://soniarehill.com/wp-content/uploads/2016/08/cropped-SR-1.jpg);
    background-repeat: repeat-x;
    padding-top: 150px;
}

Give that a go and let us know how you get on. ??

Thanks very much Siobhan. All works just great! ??

Kind regards,
Sonia

You’re welcome, Sonia!

Hey Siobhan,

The banner above the footer widget area didn’t look good, so I’m not going to bother with it now. However I have a lot of white space above the widgets on all the pages. Is there a code to tighten this up?

Also, how can I edit the font? I’d like all the text to be a little darker in the main copy and widget areas.

Many thanks,
Sonia

Hi Sonia,

However I have a lot of white space above the widgets on all the pages. Is there a code to tighten this up?

The following would reduce the padding that’s added to the top of your footer widgets:

.footer-widget-area {
    padding-top: 1em;
}

Increase/decrease the value of padding-top to your liking.

Please note that increments/decrements of 0.1 are enough to have an impact e.g. 1.1em, 1.2em, etc.

Also, how can I edit the font? I’d like all the text to be a little darker in the main copy and widget areas.

The following controls the colour of the text on your site:

body, button, input, select, textarea {
    color: #404040;
}

You can change the value of #404040 to any HEX code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values. Here’s an example of a site that I’ve used before:

https://www.color-hex.com/

Hope that’s helpful. ??

Thanks Siobhan.
I’ve managed to darken the text in the main body of the site, but it doesn’t seem to work for the text in the widget areas. How can I do this?

Also, what’s the best plugin for editing fonts etc. for Sela?

Kind regards,
Sonia

Hi Sonia,

I’ve managed to darken the text in the main body of the site, but it doesn’t seem to work for the text in the widget areas. How can I do this?

The main text in your widgets seem to be darkened to me, but the titles and links need to be targeted separately.

The following snippet will change the colour of the titles in the widgets:

.footer-widget-area .widget-title {
    color: #000;
}

The following will then change the links:

.footer-widget-area a {
    color: #000;
}

Also, what’s the best plugin for editing fonts etc. for Sela?

I don’t have a personal recommendation, but you can browse through the ratings and reviews that others have left on individual plugins when browsing the repository:

https://www.ads-software.com/plugins/search.php?type=term&q=font

Hope that helps out!

Super, thanks Siobhan!

You’re welcome! You know where to find us if any extra questions come up, too.