[Resolved] Edit CSS

[Cassie]

Hi there,

There are a couple of changes that I’m looking to make but am not sure where to do it.

1) Position the 2nd Widget in the Footer to the far left (only have 2 widgets there).
2) Create a space between the white boxes (content) and the border of the page (show the grey background) without sidebars.

Hope this made sense. Thank you.

[Tom]

Hi Cassie,

1. Do you want to stack the two widgets on op of each other? So they’re both aligned to the left?

2. I’m not sure I know what you mean here? Do you have an example of what you’re trying to accomplish?

Let me know,
Tom

[Cassie]

Hey Tom,

If you take a look at the website (http://brotherssoundlightevent.com), you will see a red border. I would like that border to appear on the left and right of the white box as well.

As for the footer widgets, I would like to balance them a little more with the social media widget moving more to the right. Would be good to bring the contact details widget more to the right as well.

Cheers,
Cassie

[Tom]

Hi Cassie,

The red does appear on the left and right of the white content box – are you using a small screen or low resolution? If so, that’s probably why you can’t see it.

For the footer widgets, you can use 1 widget instead of two, and put everything inside that one widget. Then you can control the spacing more accurately, and even center align everything within the box.

Let me know if this helps or not,
Tom

[Cassie]

Thanks, for that! Completely forgot about my browser being open 3/4 only.

Still not sure about the footer widget, though. I tried using only 1 widget – using a table to separate them. Didn’t look too good. Could you please help me with this?

[Tom]

Hi Cassie,

If you’re only going to be adding those two things to the footer, I think it will be hard to make it look good as there will be lots of empty space no matter what.

If you can find more stuff to put in the footer that would work, or maybe find somewhere else to place your facebook link and contact information?

Let me know if you have any questions,
Tom

[Cassie]

Hmm..I will play around with it and see what looks best.

Another question, is it possible to add a logo beside the site title in the header? When I insert an image it keeps inserting it below the site title.

[Tom]

You should be able to do this using this CSS:

.site-branding {display: inline-block;}
.header-image {float:left;margin-right: 15px;}

Tom

[Cassie]

Thanks, Tom. But where do I add it? I have 2 css docs. One is style.css and the other is rtl.css. In style.css is says not to add my CSS there.

[Tom]

I would use a plugin like this to add the custom CSS: https://wordpress.org/plugins/simple-css/

Tom

[Cassandra Teo]

You’ve been a great help, Tom! That helps heaps with customising the CSS. Thank you.

[SSYH]

Dear Tom,

I would like to put my site logo to the left of the site header (instead of at the bottom).

Following your advice which I found on the WordPress forum, I added the following to my child stylesheet:

.site-branding {
display: inline-block;
}

.site-logo {
float: left;
margin-right: 20px;
}

However the header is now too high; ideally I would like it to be at the centre (or at the bottom) on the right of the logo. How should I go about doing this?

Thanks!

[Tom]

Any chance you can link me to your site? 🙂

[SSYh]

Hi Tom,

Here you go:
integralpowerlift.com

Cheers!

[Tom]

Give this CSS a try:

@media (min-width:768px) {
      .site-branding {
            margin-top: 30px;
      }
}

Adjust the 30px to your liking 🙂

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

[Author]

Posts