WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Style Upload button (9 posts)

  1. mrtom
    Member
    Posted 1 year ago #

    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/

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 1 year ago #

    The selector input#filee or #filee is good.

  3. mrtom
    Member
    Posted 1 year ago #

    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.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  5. mrtom
    Member
    Posted 1 year ago #

    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.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you post the HTML (no shortcodes)?

  7. mrtom
    Member
    Posted 1 year ago #

    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>
  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    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

  9. mrtom
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic