haochen Posted January 6, 2014 Share Posted January 6, 2014 (edited) i want to put an text like "search" inside box of searching bar, and a image instead of "search" button from default theme, for the text i found a post talking about this but was for PS 1.4.... and for the image i guess i have to put a background on .css with an image? Edited January 6, 2014 by haochen (see edit history) Link to comment Share on other sites More sharing options...
Carolina Custom Designs Posted January 6, 2014 Share Posted January 6, 2014 To add the text simply add the following to your input tag: placeholder="Search..." Hope that helps! Marty Shue Link to comment Share on other sites More sharing options...
haochen Posted January 6, 2014 Author Share Posted January 6, 2014 hello, thanks for fast reply, where should i put this? on blocksearch.tpl? Link to comment Share on other sites More sharing options...
Carolina Custom Designs Posted January 6, 2014 Share Posted January 6, 2014 Either there or blocksearch-top.tpl. Depends on how you are using the module. Marty Shue Link to comment Share on other sites More sharing options...
haochen Posted January 6, 2014 Author Share Posted January 6, 2014 can you tell me how to add this code exactly please, im very newb >,<, ill test on both tpl Link to comment Share on other sites More sharing options...
Carolina Custom Designs Posted January 6, 2014 Share Posted January 6, 2014 can you tell me how to add this code exactly please Sure. In blocksearch-top.tpl find the following <input class="search_query" type="text" id="search_query_top" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|htmlentities:$ENT_QUOTES:'utf-8'|stripslashes}{/if}" /> Then add the code above like this <input class="search_query" type="text" id="search_query_top" name="search_query" placeholder="Search..." value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|htmlentities:$ENT_QUOTES:'utf-8'|stripslashes}{/if}" /> That should do it. Marty Shue Link to comment Share on other sites More sharing options...
haochen Posted January 6, 2014 Author Share Posted January 6, 2014 ah ok, thanks very much, ill test it asap, i guess that the text dissapear if you write something over it Link to comment Share on other sites More sharing options...
Carolina Custom Designs Posted January 6, 2014 Share Posted January 6, 2014 ah ok, thanks very much, You're welcome i guess that the text dissapear if you write something over it You would be correct. Marty Shue Link to comment Share on other sites More sharing options...
haochen Posted January 6, 2014 Author Share Posted January 6, 2014 thanks you very much Marty, i mark this as solved Link to comment Share on other sites More sharing options...
Carolina Custom Designs Posted January 7, 2014 Share Posted January 7, 2014 thanks you very much Marty, i mark this as solved You are welcome. I'm glad you got it sorted. Marty Shue Link to comment Share on other sites More sharing options...
haochen Posted January 7, 2014 Author Share Posted January 7, 2014 i know that i shouldnt ask another question, but i cant find out how to make search box round corners, i testes with all blocls on searchblock.css Link to comment Share on other sites More sharing options...
vekia Posted January 7, 2014 Share Posted January 7, 2014 check this tool: http://border-radius.com/ use these styles for your serach box for example: #search_block_top #search_query_top { padding: 0 5px; height: 23px; width: 300px; border: 1px solid #666; border-right: 0 !important; color: #666; background: url(img/bg_search_input.png) repeat-x 0 0 #fff; float: left; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 1 Link to comment Share on other sites More sharing options...
haochen Posted January 7, 2014 Author Share Posted January 7, 2014 hi vekia, i tested these 3 options already on Firezilla inside of #search_block_top #search_query_top {, but it seems not the right way to change this >.< my web is www.pieces4pc.com Link to comment Share on other sites More sharing options...
Carolina Custom Designs Posted January 7, 2014 Share Posted January 7, 2014 hi vekia, i tested these 3 options already on Firezilla inside of #search_block_top #search_query_top {, but it seems not the right way to change this >.< Because another CSS rule is overriding it. You will need to do this -moz-border-radius:5px 0px 0px 5px!important; -webkit-border-radius:5px 0px 0px 5px!important; border-radius:5px 0px 0px 5px!important; That should solve your problem. Marty Shue Link to comment Share on other sites More sharing options...
haochen Posted January 7, 2014 Author Share Posted January 7, 2014 oh thanks!, now i know whats for !importhat hehe, thanks! Link to comment Share on other sites More sharing options...
Carolina Custom Designs Posted January 7, 2014 Share Posted January 7, 2014 oh thanks!, now i know whats for !importhat hehe, thanks! Keep in mind that it isn't always needed but in your case another CSS rule was using border-radius: 0!important. Once again, you are welcome. Marty Shue Link to comment Share on other sites More sharing options...
haochen Posted January 7, 2014 Author Share Posted January 7, 2014 one last thing i promise , what would happen if both border-radius has !important paramenters? last one written with !important would override or? Link to comment Share on other sites More sharing options...
vekia Posted January 8, 2014 Share Posted January 8, 2014 in this case - last one will be used. Link to comment Share on other sites More sharing options...
Carolina Custom Designs Posted January 8, 2014 Share Posted January 8, 2014 what would happen if both border-radius has !important paramenters? The rule closest to your element will be applied. Marty Shue Link to comment Share on other sites More sharing options...
vekia Posted January 9, 2014 Share Posted January 9, 2014 closest? hmmm as far as i know, when you will use several the same instances of class, for example in global.css at the begining of the file: .myclass { height:200px!important; } in the middle: .myclass { height:400px!important; } at the end: .myclass { height:500px!important; } only last style will be applied: height:500px!important; Link to comment Share on other sites More sharing options...
Carolina Custom Designs Posted January 9, 2014 Share Posted January 9, 2014 Hi Vekia! Your example is rather strange IMHO and one I've never encountered. To define the same class 3 times in the same CSS would seem extremely odd and counterproductive. It would IMO defeat the purpose and use of classes. I also think you misunderstood my remarks. The example you gave is not like what we were answering here in this particular thread. The CSS rule that is closest to the element will override the other. If I have <h1>blahblah</h1> and also <div class="rule"><h1>blahblah</h1></div>. I can assign CCS rules to these independently and the rule closest to the element will be applied. IMHO this is different than your example. Marty Shue Link to comment Share on other sites More sharing options...
Recommended Posts