Support » Plugin: Contact Form 7 » Style Upload button

  • mrtom

    (@mrtom)


    I am trying to work out how I can change standard upload button into picture.
    This code for my attach button:

    <li><div class="textt">File (.doc, .docx, .pdf, .txt, .rtf, .odt, .xls, .tmx), max. 5MB</div>
    [file file-14 id:filee class:att limit:5000000 filetypes:doc|docx|txt|rtf|pdf|odt|xls|tmx]</li>

    What tags should I use in css sheet? When I put input#filee {background: #fff url(./images/1.png) no-repeat} nothing happens.
    How can I style this attach button?

    http://wordpress.org/extend/plugins/contact-form-7/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    The selector input#filee or #filee is good.

    mrtom

    (@mrtom)

    Still the css code applied to it doesnt change anything. Actually the only parameter that works is “width” but then the whole button isnt clickable thou.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Can you provide a link to the webpage with the issue? We need to determine whether it’s a simple CSS issue or a plugin issue.

    mrtom

    (@mrtom)

    I’m working on it on localhost but I can insert the code:

    <div id="cframe">
    <ul id="contact">
    <li><span class="text">Your Name</span><span class="required">(*)</span> [text* your-name]</li>
    <li><span class="text">Your Email</span><span class="required">(*)</span>[email* your-email] </li>
     <li><span class="text">Subject</span>[text your-subject] </li>
    <li id="message"><span class="text">Message</span>[textarea your-message] </li>
     <li><div class="textt">File (.doc, .docx, .pdf, .txt, .rtf, .odt, .xls, .tmx), max. 5MB</div>
    <div id="load">[file file-14 id:filee class:att limit:5000000 filetypes:doc|docx|txt|rtf|pdf|odt|xls|tmx]</div></li>
    <li id="submit">[submit "Order translation"]</li>
    </ul>

    CSS

    #cframe{width:100%; height:380px; background:#fff url('http://engleash.net/wp-content/themes/accentbox/images/button.png') no-repeat;}
    #contact{
    	list-style:none;
    	margin:0;
    padding-left:100px;
    padding-top:40px;
    }
    #contact li{
    	float: left;
        height: 40px;
    	margin:0 0 0px;
        position: relative;
        width: 540px;
    }
    .textt {padding-left:5px;margin-top:5px; background-color:#666; width:410px; color:#fff; font-weight:bold}
    #contact li .text{
    	background: #d2ddea;
    	padding:7px 5px 5px 0;
    	position:absolute;
    	z-index:100;
    	min-width:85px;
    	border-bottom-right-radius: 5px;
    	-moz-border-radius-bottomright:5px;
    	-webkit-border-bottom-right-radius:5px;
    	border-top-left-radius: 5px;
    	-moz-border-radius-topleft:5px;
    	-webkit-border-top-left-radius:5px;
    	text-indent: 5px;
    }
    
    #contact li .wpcf7-form-control-wrap{
    	position: absolute;
    }
    #contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{
    	background:#e1eaf6;
    	border:solid 5px #d2ddea;
    	border-radius:5px;
    	-moz-border-radius:5px;
    	-webkit-border-radius:5px;
    	padding:5px 10px 5px;
    	width: 400px;
    	text-indent:85px;
    	z-index:100;
    	margin:0;
    }
    #contact li .wpcf7-form-control-wrap input:focus, #contact li .wpcf7-form-control-wrap textarea:focus{
    	background:#d2ddea;
    }
    #contact li .wpcf7-form-control-wrap textarea{
    	line-height: 28px;
        padding: 10px;
    	height:100px;
            width:415px
    }
    #contact li#message{
    	min-height:100px;
    }
    #contact li#submit input{
    float:right;
    font-weight:bold;
    font-size:16px;
    	color:#f3d086;
    	text-decoration:none;
    	margin:30px 30px 0 0;
    	background:#850502;
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#850502', endColorstr='#c0504d');
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#850502), to(#c0504d));
    	background: -moz-linear-gradient(top, #850502, #c0504d);
    	border:none;
    	-moz-border-radius:3px;
    	-webkit-border-radius:3px;
    	-0-border-radius:3px;
    	border-radius:3px;
    	display:block;
    	padding:10px 25px;
    	text-align:center;
    	text-shadow:0 1px 0 #cd706d;
    	text-transform:uppercase;
    }
    #contact li#submit input:hover{
    	background:#cd706d;
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cd706d', endColorstr='#b54e4c');
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cd706d), to(#b54e4c));
    	background: -moz-linear-gradient(top, #cd706d, #b54e4c);
    	-moz-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
    	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
    	-o-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
    	box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
    	color:#06506c;
    	text-shadow:0 1px 0 rgba(255,255,255,.25);
    	text-transform:uppercase;
    	cursor:pointer;
    }
    div.wpcf7-validation-errors {
        clear: left;	}
    #spec {text-align: justify; font-size:11px; color:#bbb}
    #rate {margin-left:660px; width:300px; padding-top:210px}
    #inf {padding-top:50px}
    input#filee {margin-left:19px; background:#fff url(http://engleash.net/wp-content/themes/accentbox/images/upload.png) no-repeat; width:50px; height:50px}

    The image for upload button is just an example. I will appreciate any help.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Can you post the HTML (no shortcodes)?

    mrtom

    (@mrtom)

    I hope it helps now

    <div id="cframe">
    <ul id="contact">
    <li><span class="text">Your Name</span><span class="required">(*)</span> <span class="wpcf7-form-control-wrap your-name"><input type="text" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" value="" name="your-name"></span></li>
    <li><span class="text">Your Email</span><span class="required">(*)</span><span class="wpcf7-form-control-wrap your-email"><input type="text" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" value="" name="your-email"></span> </li>
    <li><span class="text">Subject</span><span class="wpcf7-form-control-wrap your-subject"><input type="text" size="40" class="wpcf7-form-control wpcf7-text" value="" name="your-subject"></span> </li>
    <li id="message"><span class="text">Message</span><span class="wpcf7-form-control-wrap your-message"><textarea rows="10" cols="40" class="wpcf7-form-control  wpcf7-textarea" name="your-message"></textarea></span> </li>
    <li>
    <div class="textt">File (.doc, .docx, .pdf, .txt, .rtf, .odt, .xls, .tmx), max. 5MB</div>
    <div id="load"><span class="wpcf7-form-control-wrap file-14"><input type="file" value="1" size="40" class="wpcf7-form-control  wpcf7-file att" id="filee" name="file-14"></span></div>
    </li>
    <li id="submit"><input type="submit" class="wpcf7-form-control  wpcf7-submit" value="Order translation"><img class="ajax-loader" src="http://localhost/wordpress/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Trwa wysyƂanie..." style="visibility: hidden;"></li>
    </ul>

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    You’re not using specific-enough selectors.
    Please use a browser developer tool like Firebug for these CSS issues.

    Use the following selectors instead;

    #contact li .wpcf7-form-control-wrap input#filee

    Have a read up on CSS specificity too. If you still need support for these CSS issues, consider using a CSS forum such as http://csscreator.com/forum

    mrtom

    (@mrtom)

    Well, code like this #contact li .wpcf7-form-control-wrap input#filee {margin-left:19px; background:#fff url(http://engleash.net/wp-content/themes/accentbox/images/digg.png) no-repeat; width:50px; height:50px}

    doesn’t work. It seems that only margin-left and width paraemtres give desired result.

    P.S. Thanks for the links. Will have a look.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Style Upload button’ is closed to new replies.