This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Css code for buttons

  • Creator
    Topic
  • #1086
    msnaughty
    Member

    Hi there
    Can you tell me if the CSS code is making standard form buttons looked faded and “unpressable”.
    Like this:
    http://brightdesire.com/tour/join/
    I’ve added the official code that my biller gave me and it relies on a table and a standard form with input type=”button”. The buttons work fine, it’s just that they don’t look right.

    The biller says the appearance of the buttons doesn’t have anything to do with them. Can you help me out?

Viewing 15 replies - 1 through 15 (of 15 total)
  • Author
    Replies
  • #1100
    Jason Bobich
    Keymaster

    Hello,

    I apologize, but there is no feature for this with the button shortcode. This is a CSS customization you’d need to make to fit your specific needs. In the next major update to the theme we’ll have a lot more options for things like this as everything will be converted to have Twitter Bootstrap frontend framework behind it.

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

    .tb-button.color_name { ... }

    Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

    #1122
    msnaughty
    Member

    I tried adding your suggestion into the custom css bit on the theme options page, it made no difference.

    So just to clarify, I was asking if the Akita css had a pre-existing rule in it that was making the form buttons look like that (faded, different font, the mouse doesn’t become a hand when you hover). Because I’m not looking to make the buttons look “nicer”. I want them to just look how they would look without any css styling.

    When I inspect using Firefox, it says the button’s css is called “input”. Unfortunately there are numerous “input” styles to choose from in Akita. I was originally asking if you have a suggestion as to which it would be?

    If there is no pre-existing rule about how form buttons should look within the theme, can you suggest why they don’t look or behave like normal form buttons? Would it be something that wordpress is doing? Is it because the form is contained within a table?

    #1123
    msnaughty
    Member

    OK so by searching on the exact colours of the buttons I found the bit in theme.css that deals with forms. I’ve changed the colour of the text so the buttons don’t look faded (although this now only works in Firefox; they still look faded in Chrome and IE). And I still don’t know why the mouse isn’t changing when I hover over the buttons.

    This is the current css styling:

    /* Forms */
    input,
    textarea,
    select {
    	border: 1px solid #d1d1d1;
    	color: #9e9e9e;
    	padding: 7px;
    }
    input {
    	line-height: 100%;
    }
    textarea {
    	width: 98%;
    }
    input:focus,
    textarea:focus {
    	border: 1px solid #bbbbbb;
    }
    input[type=submit] {
    	background-color: #f4f4f4;
    	border: 1px solid #d1d1d1;
    	color: #666666;
    	font-weight: bold;
    	margin: 0;
    	padding: 8px 15px;
    }
    input[type=submit]:hover {
    	color: #666666;
    }

    Suggestions as to why the hover thing isn’t working?

    #1142
    Jason Bobich
    Keymaster

    I tried adding your suggestion into the custom css bit on the theme options page, it made no difference.

    All CSS edits should be coming from your Child theme’s custom.css as it shows clearly in that video I linked you to. — http://vimeo.com/41331677 — You should not be editing any theme files, or you’ll never be able to update the theme.

    In your original question it was not all that clear what you were referring to. The CSS selectors I put in as an example target the theme’s buttons created with the button shortcode. — http://www.themeblvd.com/demo/akita/features/shortcodes/shortcodes-html/ … but now you’re obviously referring to submit type inputs of forms.

    So just to clarify, I was asking if the Akita css had a pre-existing rule in it that was making the form buttons look like that (faded, different font, the mouse doesn’t become a hand when you hover).

    Honestly, I do not know what you’re trying to describe or trying to accomplish, but please keep in mind that support does not inclue customizations. — http://support.themeblvd.com/help/#terms

    When I inspect using Firefox, it says the button’s css is called “input”. Unfortunately there are numerous “input” styles to choose from in Akita. I was originally asking if you have a suggestion as to which it would be?

    So target the button with your own unique, CSS selector rule. I’m not sure why you’d think you can only use something that the theme has already written. If you’re wanting to do something custom that isn’t in the theme (which it sounds like you are, but I’m still not 100% sure), then just do something custom.

    .whatever_container input { /* your custom css...*/ }
    .whatever_container input[type=submit] { /* your custom css...*/ }

    If there is no pre-existing rule about how form buttons should look within the theme, can you suggest why they don’t look or behave like normal form buttons?

    The pre-existing CSS rules for how form buttons look is this:

    input[type=submit] {
    	background-color: #f4f4f4;
    	border: 1px solid #d1d1d1;
    	color: #666666;
    	font-weight: bold;
    	margin: 0;
    	padding: 8px 15px;
    }
    input[type=submit]:hover {
    	color: #666666;
    }

    Feel free to make any overrides you like to this from your Child theme’s custom.css.

    #1204
    msnaughty
    Member

    OK to clarify again. I was essentially asking where in the various css files were the rules regarding forms. I worked that out eventually. And I’ve managed to change it a bit. But as I wrote in the post from 12.53am, I don’t know why the hover function is not working, or why the css changes are only showing up in some browsers.

    Any suggestions as to why the mouse won’t change to a hand when I mouseover the buttons?

    #1206
    Jason Bobich
    Keymaster

    The theme’s default stylings are for input buttons that are type submit. You’re using type="button" — So how to target these specifically?

    input[type=button] {
    	
    }
    input[type=button]:hover {
    	
    }

    In general in HTML, inputs do not have a hand cursor (i.e. the cursor called “pointer”) in most browsers, but you can of course set that with CSS.

    http://www.w3schools.com/cssref/pr_class_cursor.asp

    input[type=button] {
        cursor: pointer;	
    }
    #1209
    msnaughty
    Member

    Wait wait wait.
    It is not *my* custom CSS that doesn’t work with the hover. I have not made any changes to that part of the code. So I’m not asking for support about customizations. I was trying to work out which bit of the theme deals with forms and why the existing Akita css code is not giving me the standard buttons look with mouseovering.

    So I’ll just delete the section in the Akita css that specifies how to deal with forms. Maybe then it will look how it’s supposed to look And yes, I’ll use a child theme.

    #1211
    Jason Bobich
    Keymaster

    Wow, quite the attitude there, Ms. Naughty. I apologize. I edited by response after looking more closely at what you’re trying to do. I just misunderstood your original question and so things got a little confusing. I answer a lot of questions.

    Yes, you’re right. After styling is placed on inputs in general, it is difficult to “override” them because every web browser has different default stylings for form elements. But you can style your “button” inputs in the same way the theme styles “submit” inputs. This will allow for consistency across all browser and other form elements in the theme.

    input[type=button] {
    	background-color: #f4f4f4;
    	border: 1px solid #d1d1d1;
    	color: #666666;
    	cursor: pointer;
    	font-weight: bold;
    	margin: 0;
    	padding: 8px 15px;
    }
    input[type=button]:hover {
    	color: #666666;
    }

    If you were to remove the styling on these elements all together, you’ll notice that every browser will display them differently in whatever default way they’re setup to. Keep in mind that these default stylings also do not include the pointer cursor. And so these are reasons why people generally like to style these elements manually instead of how they’re “supposed to look” as you put it — in order for consistency and something other than the same “default” look that every site has. All personal preference though.

    #1212
    msnaughty
    Member

    Excuse me. “Quite the attitude”? Really? Really?
    I know you’re busy. But so am I. I’m a paying customer and I’m trying to ask a question about your code. Perhaps I could have phrased it differently so you understood my question. But jeez. Thanks for insulting me.

    Unfortunately I’m a DIY coder and I’m not always sure what I’m doing. In this case I don’t know how to create the css code that will make that form look clickable. Because really, that’s all I want. I need those BUY ME buttons to look clickable so the customer is absolutely certain that that’s what they’re supposed to do. Right now, it’s uncertain because they’re faded-looking and they don’t change when you mouseover them.

    At this point, I’m going to go off and experiment by removing all the css code that you’ve just quoted and I’ll see how it looks. This is the only way I know how to work with css, trial and error. And, from what you’re saying, it’s the only way I’ll be able to see if it looks clickable across all browsers.

    #1213
    Jason Bobich
    Keymaster

    Did you just read the first paragraph of my response and then you were so insulted you stopped reading? I get it. I’m a jerk.

    But seriously, I understand what you’re doing and I’m trying to help you and explain it all to you. Just paste this in your CSS:

    input[type=button] {
    	background-color: #f4f4f4;
    	border: 1px solid #d1d1d1;
    	color: #666666;
    	cursor: pointer;
    	font-weight: bold;
    	margin: 0;
    	padding: 8px 15px;
    }
    input[type=button]:hover {
    	color: #666666;
    }

    Put that in your Custom CSS, see what it looks like, and then ask me your follow up questions.

    #1214
    msnaughty
    Member

    I read your paragraph. Nowhere does it say: “put this code in your custom css”. What I was seeing was just code and general discussion about css. No instructions. And yes, you pissed me off.

    In any case, the code you’ve given me works. So, after all this lengthy discussion and confusion, thank you.

    #1216
    Jason Bobich
    Keymaster

    Nowhere does it say: “put this code in your custom css”.

    Apologies, I thought we had established where custom CSS goes at this point in the conversation. I didn’t mean to confuse you further. So cheer up. You got it figured it out!

    And yes, you pissed me off.

    lol and yeah, I got that much. It happens. But as a peace offering how about I help you get that form looking structurally a little more like I think you’re intending it to look:

    .entry-content td {
    	border: none;
    	vertical-align: middle;
    }

    (That goes in your Custom CSS, whether it’s your Custom CSS option on your Theme Options page or your custom.css of your Child theme)

    Now, an alternate approach that might things looking a little nicer overall and simplified is to ignore what I gave you above, and ditch using the old-school table there.

    I’m not sure how much of the code is coming from your 3rd-party vendor, but that section can probably be improved by using column shortcodes to achieve a similar look.

    [raw]
    [one_third]
    Your Zombaio vertification image...
    [/one_third]
    [two_third last]
    Your buttons...
    [/two_third]
    [clear]
    [/raw]
    
    Any charges through Zombaio Payment Services will read ZOMBAIO.COM on your cardholder statement for the merchant Nightly Entertainment.
    
    You may cancel at any time by visiting Zombaio’s support center at http://support.zombaio.com 
    Please refer to the terms & conditions for this transaction.
    #1217
    msnaughty
    Member

    OK thanks for this. The code Zombaio gave me also includes a script attached to the image which is why I pasted it in mostly unaltered. I will have a play with what you have given me and see what works. Perhaps I can just paste the scripty-image code in between one_third and /one_third.

    #1219
    Jason Bobich
    Keymaster

    Oh yeah, exactly, that’s what I thinking you could do. I *think* all of the javascript attached should render fine within the shortcode. But I wasn’t sure if Zombaio was giving you that entire table or not; it sounds like that’s not the case though.

    #1220
    msnaughty
    Member

    The whole table came from Zombaio. The bit that says “Any charges through Zombaio Payment Services will read ZOMBAIO.COM on your cardholder statement for the merchant Nightly Entertainment.” is actually generated by a script.

    I put the entry content td css into the Custom CSS form and that’s done the job. So I might just leave it at that for now rather than risk screwing up the tracking scripts.

    Thank you for this extra bit of help, I do appreciate it.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.