Changing the colour of buttons in the theme

  • Hey, this is my first wordpress self-hosted site and I’m getting to grips with CSS for the first time and trying to customize things. Mostly this is going OK, though fonts have been an issue (which I’ll post another thread about in due course).

    I’m currently struggling with the blue submit button the contact form which I want to turn red:

    https://matthewsinclair.net/contact/

    It’s using the plugin ‘Fast secure contact form’ but it’s pulling the colours from somewhere in the main template.

    I am using the ‘inspect’ command in Chrome to try and identify the correct bit of code. I’ve tried this but isn’t working.

    input[type="submit"]
  background: linear-gradient(#ff0000, #ff3333);
}

input[type="submit"]:hover {
  background: linear-gradient(#ff0000, #ff3333);

}

    I did manage to get the blog page ‘read more’ button to work using:

    /* Making submit buttons red rather than blue */

a.readmore {
  border: 1px solid gray;
  background: linear-gradient(#ff0000, #ff3333);

}
a.readmore:hover {
background: linear-gradient(#ff0000, #ff3333);

}

    Can any one help? Thanks in advance.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi Matt,
    It looks you solve it!!, just checked your website and it looks great.

    I have seen you have added lots of new features like the new redesign home page. Can you please post how you made it?

    Congrats for your work and good luck with your business.

    Thread Starter mattsinc

    (@mattsinc)

    Hi – thank you.

    Hmm, I worked on it quite some months ago now. Front page is a slider using PromoSlider.

    Background sliding images uses Vegas Slider.

    Lower-left portfolio slider is LayerSlider (bought separately).

    Also, I use My Custom CSS (WP plug-in) to override the CSS in the template with my own CSS, to tweak colours/fonts/etc. To discover what the code is for the item you need to change, right-click an element in Chrome or Firefox and choose ‘inspect element’. This will bring up the CSS code. Copy this into My Custom CSS and replace with your own values.

    My full custom CSS is here. You will see there are sub-headings where I named all the different changes I made.

    Services page uses the theme’s inbuilt Services widget. That needed some custom CSS to work properly as they weren’t aligning (see My Custom CSS above and search for ‘fix for services widget’).

    Hope that helps. The theme is not bad (there are some very good ones on themegarden with a lot more functionality if you don’t mind spending $30-$45, I have since found out).

    Good luck!

    MS

    Hi Mat,

    thanks for your fast answer.

    Lots of info, it’s a great help!!!.
    I am now beginning to “see the light”.
    Although still struggling with some minor problems and dealing with texts and documentation issues.
    You can take a look and see my progress
    https://www.landtecture.com

    For sure my next web would be with a paid theme, $30-$50 they worth it.

    Thanks again,
    Regards,

    Thread Starter mattsinc

    (@mattsinc)

    Nice work, you are making good progress on your site.

    If you want a multi-lingual site, I have found the plug-in WPML to be very good. Unfort I can’t show you the translated site yet (because I don’t have the German content given to me yet, so it’s not live, for the client project I am working on). But it has been very easy to make the site I am working on multi-lingual.

    MS

    Thanks Mat,
    There are still lots of things to do, it’s a long list.
    Re the multi-lingual I began using qTranslate, cause I knew it form another site. I still haven’t post anything in Spanish … everything takes time and this is not my first priority as you can imagine.

    I needed to change our old web site, it was more than five years old, and needed an update. This is a small company and we need to keep budgets tight, so I work on it when I have a moment.

    Thanks again for your help.
    If you need any help with the landscaping of a Shopping mall or the rehab of a landfill we can help you :).
    Regards,

    Fernando
    landtecture

    Thank you Matt, I really appreciate the post describing your solution.
    Cheers,
    rookie

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing the colour of buttons in the theme’ is closed to new replies.