Need help with the styling of my buttons – Caperverso theme

  • Unknown's avatar
    laurapalmerwp · Member ·

    This isn’t for my site, its for a clients as below:

    https://mygoodmeasure.wordpress.com/contact/
    https://mygoodmeasure.wordpress.com/blog/

    How do I alter the size and colour of the font in my submit button (on contact page) without affecting the text that goes into the text fields (when someone types in them)? I’d also like to make this button’s hover state gold rather than white?

    Can I make the shape of my Leave a comments button and edit buttons on the blog, the same as the submit button on the contact page? And on my blog, under the first photo, the edit button’s text doesn’t show up. Is there a reason for that?

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

  • Unknown's avatar
    rachelmcr · Member ·

    Hi Laura,

    I noticed you’ve had quite a few very specific CSS questions lately, and I wanted to step back a bit a walk you through the process for finding the CSS you need. For these sorts of questions, I use the methods described in our guide to How to Find Your Theme’s CSS to identify the theme’s current CSS and find the CSS selectors to make the changes.

    For example, let’s look at this page:

    https://mygoodmeasure.wordpress.com/contact/

    How do I alter the size and colour of the font in my submit button (on contact page) without affecting the text that goes into the text fields (when someone types in them)? I’d also like to make this button’s hover state gold rather than white?

    I used my browser’s inspector tools to find the current size and color of the font on the submit button: https://cloudup.com/cswEP92uGrC

    Here are the current CSS rules defining that:

    .wf-active input[type="submit"] {
  font-size: 10px;
}

.wf-active input {
  color: #fff;
}

    I’d recommend using the first CSS selector — .wf-active input[type=”submit”] — to target the submit button. That way, you can add CSS Rules that only affect that input type.

    Can I make the shape of my Leave a comments button and edit buttons on the blog, the same as the submit button on the contact page?

    You can use the same approach to find the current CSS rules that define the shape of the submit button, and apply those to the Leave a Comment and Edit buttons. Here are a couple of the existing CSS rules I found that should help with that:

    input[type="submit"] {
  padding: 12px 16px;
}

input[type="submit"] {
  border-radius: 3px;
}

    The padding creates the extra space around the text to make the button larger, and the border-radius rounds the edges of the button. You can use the browser inspector to identify what CSS selectors control the other buttons you’d like to change, and then try out these rules to make them match.

    And on my blog, under the first photo, the edit button’s text doesn’t show up. Is there a reason for that?

    Your theme includes this CSS:

    .edit-link a, .edit-link a:visited, .edit-link a:hover, .edit-link a:focus, .edit-link a:active, a, a:visited, a:hover, a:focus, a:active {
    color: #000000;
    }

    The .edit-link a:visited selector applies when you have already visited the link before, so if you’ve visited that link (to edit that particular post) the text will turn black.

    I hope this helps you you started on these changes! Please let me know if you have any questions about that. :)

  • Unknown's avatar
    laurapalmerwp · Member ·

    Thanks for your help on this. You’ll have to bear with me on this. I actually do use the inspector tools to search out relevant css but I am not proficient in css enough to quite find all that I want!

    Re separating the submit button and text in text fields, that’s now worked but am unsure how to alter the size of the text that appear in the comments box? I have tried altering font size but only alters the top text fields text.

    I can’t seem to get my hover states on my Leave a comment button the same as my Submit button (button to go gold and text to go dark blue or black). I have tried for a few hours now!

    By adding in what I thought was correct(ish) code for the edit button – to get this the right colours/states etc, the alignment of my blog content all misaligns. I added the following:

    /*Alter edit button*/
    .edit-link a, .edit-link a:visited, .edit-link a:hover, .edit-link a:focus, .edit-link a:active, a, a:visited, a:hover, a:focus, a:active {
    input[type=”submit”] {
    font-family: tinos;
    font-style: italic;
    color: #ffffff;
    font-weight: normal;
    font-size: 110%;
    padding: 12px 16px;
    border-radius: 3px;
    }
    }

    I’ve removed it as not sure why this affected the whole page. But if you help me with the css so ths button appears and works like the leave a comment button – that would be appreciated. Again, I’m not good enough at css to do this alone.

    Many thanks

  • Unknown's avatar
    rachelmcr · Member ·

    Hi Laura,

    Sure thing! It can take some time to learn all the ins and outs of CSS, and I’m happy to help you find the resources you need to get things working. :)

    Re separating the submit button and text in text fields, that’s now worked but am unsure how to alter the size of the text that appear in the comments box? I have tried altering font size but only alters the top text fields text.

    I can’t seem to get my hover states on my Leave a comment button the same as my Submit button (button to go gold and text to go dark blue or black).

    Can you share the exact CSS you tried to use for those changes? We can take a look at it together to see why it isn’t working as expected.

    Usually when a particular CSS rule doesn’t work the way you expect, it has to do with how you defined the CSS selector. If you pick a general CSS selector and there’s another CSS rule in your theme’s CSS that is more specific, that more specific rule will overwrite your CSS. You can read more about CSS specificity to learn about how that works.

    By adding in what I thought was correct(ish) code for the edit button – to get this the right colours/states etc, the alignment of my blog content all misaligns. I added the following:

    Can you try adding that CSS but without the input[type=”submit”] selector (since that is meant to control the submit button)? Here’s what I mean:

    /*Alter edit button*/ 

    .edit-link a, .edit-link a:visited, .edit-link a:hover, .edit-link a:focus, .edit-link a:active, a, a:visited, a:hover, a:focus, a:active {
font-family: tinos;
font-style: italic;
color: #ffffff;
font-weight: normal;
font-size: 110%;
padding: 12px 16px;
border-radius: 3px;
}

    Please give that a try and let me know how it goes. :)

  • Unknown's avatar
    laurapalmerwp · Member ·

    Ok, have added that edit button css in and it hasn’t altered the padding/colour of the button, or the text within it. Could you just send me the css for this? I am getting nowhere fast!

    See the css below for the submit button and form fields text fields. Again, if you could correct it for me so I can match the hover state of the Leave a comment button to the submit button, as well increase the size of the text that appears in the comments fields for me – that would be much appreciated.

    /*Alter submit button text*/
    .wf-active input[type=”submit”] {
    font-size: 10px;
    font-size: 89%;
    font-family: tinos;
    text-transform: uppercase;
    font-style: italic;
    color: #ffffff;
    }

    input[type=”submit”]:hover, input[type=”submit”]:focus {
    background: none repeat scroll 0 0 #9a9867;
    color: #000;
    box-shadow: none;
    }

    .wf-active input {
    font-size: 89%;
    font-family: tinos;
    text-transform: uppercase;
    font-style: italic;
    color: #000000;
    }

    Thanks

  • Unknown's avatar
    rachelmcr · Member ·

    Hi Laura,

    I don’t know the exact CSS you need off the top of my head, so I’m trying to walk through the process with you so we can both work it out together. Hopefully that way you can find the CSS you need in this case and learn some tricks for working with CSS on future customizations. :)

    Let’s walk through each of the changes in light of your current CSS:

    1. The color of the edit button:

    This CSS in your theme defines the background color for both the submit button and the comments button:

    .site-title, input[type="submit"], .comments-link a {
  background-color: #000000;
}

    Here’s where I found that in my browser inspector: https://cloudup.com/cpjEeuBcLP4

    The edit button doesn’t have a background color built in, so you’ll need to add CSS for that. You can use the same idea as the CSS rule above but apply it to the .edit-link a property to give it a black background.

    Then, you’ll need to define a different background color for when you’re hovering over that button. Your theme uses this default CSS for the edit button’s hover state:

    .edit-link a:hover, .edit-link a:focus, .edit-link a:active {
  background: white;
  color: black;
}

    Here’s where I found that in my browser inspector: https://cloudup.com/cWL4PNP5bEr

    You’ll need to add custom CSS to overwrite that background rule, to add the background property “background: none repeat scroll 0 0 #9a9867;” that’s used for the submit button.

    2. The padding on the edit button:

    I looked and I’m seeing the same padding on the edit button and the submit button. If you continue to see that edit button with different padding, please make a screenshot of the button and the padding you’re seeing so I can take a look (in case it’s a browser-specific issue). You can upload screenshots to your Media Library under Media > Add New in your dashboard, or you can use an online service like Snaggy.

    3. The text in the edit button:

    Right now you’re using percentages to calculate the font size in both the submit button and the edit button. It can be hard to match font size in that case, since those percentages may not be based on the same absolute size.

    I started by checking the computed font size for the submit button in my browser inspector: https://cloudup.com/cnNjc-N6uut

    The computed font size for the submit button is 13.3500003814697 pixels because it’s 89% of 15 pixels. The edit button, on the other hand, is 11 pixels because it’s 110% of 10 pixels. You could rewrite your custom CSS to use absolutely values (like 13.35 pixels for both buttons) to be sure the two are the same.

    You can use the same approach to increase the font size in the fields in the form — using absolute sizes can help you control exactly what size the text appears.

    Please let me know if you run into any more questions as you work on that. :)

  • The topic ‘Need help with the styling of my buttons – Caperverso theme’ is closed to new replies.