monsterman

Also, I have another minor issue.

I managed to change the width and colour of the textarea entry fields but am trying to do the same without success for the checkboxes.

My test code in “Simple Custom CSS” plugin is:

.wpcf7 input[type="checkbox"] {
    border: 5px solid pink;
}

However, this does not alter the checkboxes even though the same CSS does modify the textarea boxes (see previous posts).

Any ideas are greatfully received.

BTW: how did you manage to see the previous CSS with the bracket?

It’s not on the same page as the contact form so I don’t see how you could have viewed it with Firebug or the equivalent.

Thanks Stephen. You were correct.

The final code looks like this

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    background-color: #FAFAFA;
    border: 2px solid #848484;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.06) inset;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    padding: 16px;
    width: 100%;
}

You’ll have to use a different slider.

How would a different slider work better?

Many thanks for the detailed advice. I’ve downloaded Chrome and take your point that it provides more information about the CSS content than Firebug or the native Firefox Inspector.

One question:

Take this screenshot: https://www.imagesup.net/?di=1514184062317

I want to change the margin-bottom: from 40px to 10px. I’m not clear how I enter the code in my Simple Custom CSS plugin to override the standard margin.

I’m sure it’s part of the .footer-widgets-1 area but then there’s a .widget as well (see image).

I tried entering this for example but it didn’t change anything:

.footer-widgets-1.widgets {
word-wrap: break-word;
margin-bottom: 10;
}

How should I format the CSS to place into Simple Custom CSS plugin?

Thanks again – I appreciate your help.

Worked great thanks!

I managed to find the CSS myself with Firebug. Not sure why I couldn’t find it before.

OK, I installed Firebug and can see how you found the .footer-widgets-1 #text-5 p CSS.

Thanks. Your code did edit the left widget.

My impression is that Firebug is superior to the Inspect Element.

I’ll install it and see if I can reproduce what you achieved.

This is exactly how I found the CSS for the middle and right widgets.

I used the Inspect Element of Firefox.

Thanks – this worked.

I put the HTML as you suggested. Then I modified the font with the Easy Google Fonts plugin.

@sunny – thanks that worked great. I appreciate your input.

@icvjames – Sunny is referring to Appearance / Customize from the Dashboard.

Hi Sunny,

Here you go: https://www.ripponacademic.com/

I’ve used Google Easy Fonts throughout the website but want to make the text on the front page smaller than that on the rest of the website.

Thanks!

Thanks – I used the Simple Custom CSS plugin and your code to reduce the margib width.

It didn’t alter the text issue but I think my theme isn’t supposed to have the text under the featured image.

Quick question: how did you know that .wrap dealt with the right and left margins? In other words: is there a guide which spells out how to understand what each line of style.css actually does?

Thanks!

Here is my site’s home page: https://www.ripponacademic.com/

I have tried to reduce the size of the photo but all that happens is that the photo gets smaller from the left side. The right margin stays where it is.

All advice greatfully received. Thanks!

Highlight the content you would put into code tags then click ‘code’.

This should add code formatting.