Artisteer search box , search icon not in text box

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
5/13/2013 7:04:43 PM
Gravatar
Total Posts 42

Artisteer search box , search icon not in text box

Hi 

i have created a new skin within artisteer 4.1 .

the search box has the search icon within the text box ...

after exporting to mojoportal , the search icon is under the text box not within it .. 

had a look at the layout.master and the only reference to the search box is :

<div class="art-textblock art-object227400126" data-left="83.01%">
    <portal:searchinput id="SearchInput1" linkonly="false" renderaslistitem="false" runat="server" buttoncssclass="art-search-button" useheading="false" overridebuttontext=" "></portal:searchinput>
</div>

any ideas on how to get the search button/icon back inside the text box 

mojoPortal Version2.3.9.6 MSSQL 

 

Ta

 

LeeB

5/14/2013 7:47:16 AM
Gravatar
Total Posts 2239

Re: Artisteer search box , search icon not in text box

Hi,

Open your site in Chrome and press F12. From there, locate the search button in the rendered markup and adjust the CSS until it's where you want it. Copy your modified CSS selectors and rules to the style-artisteer-overrides.css file in your skin. Go to Administration > Advanced Tools > Design Tools > Cache Tools and click the "Reset Skin Version GUID" button.

HTH,
Joe D.

5/14/2013 8:55:31 AM
Gravatar
Total Posts 18439

Re: Artisteer search box , search icon not in text box

Make sure your theme.skin file has these 3 items:

<portal:SearchPanel  runat="server"
    RenderContentsOnly="false"
    CssClass="art-search"
/>

<mp:WatermarkTextBox  runat="server" 
    CssClass=" " 
/>

<portal:SearchModuleDisplaySettings runat="server" 
    OverrideButtonText=" "
    OverrideWatermarkText=""
    UseWatermark="false"
/>

Hope that helps,

Joe

5/14/2013 9:15:43 AM
Gravatar
Total Posts 42

Re: Artisteer search box , search icon not in text box

Hi Joe and Joe D

checked out the theme.skin and the only thing missing was the CssClass="art-search"
 

added that and there was no change... Search icon is still outside (and under) the text box

 

Did the F12 within Chrome

found

<div id="ctl00_SearchInput1_pnlSearch" class="searchpanel " onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_SearchInput1_btnSearch')" style="display:inline;">
 

<input onfocus="javascript:watermarkEnter(this, 'enter search terms');" onblur="javascript:watermarkLeave(this, 'enter search terms');" name="ctl00$SearchInput1$txtSearch" type="text" id="ctl00_SearchInput1_txtSearch" title="Site Search" class=" ">
<input type="submit" name="ctl00$SearchInput1$btnSearch" value="" id="ctl00_SearchInput1_btnSearch" class="art-search-button">


</div>

 

not sure what CSS to modify !!! sorry not an CSS expert more of a C# peson !!

is the error in class searchpanel ?

 

is there an error within the export function to generate the artiseer CSS ?

Thanks

LeeB

 

5/14/2013 9:21:44 AM
Gravatar
Total Posts 42

Re: Artisteer search box , search icon not in text box

Hi Joe D

 

also found this in the style.css file

 

form.art-search>input, a.art-search-button{
   bottom:0;
   left:0;
   vertical-align: middle;
}

form.art-search input[type="submit"], input.art-search-button, a.art-search-button
{
   margin:0 auto;
}
form.art-search input[type="submit"], input.art-search-button, a.art-search-button {
   position:absolute;
   left:auto;
   display:block;
   border:none;
   background:url('images/searchicon.png') center center no-repeat;
   width:24px;
   height: 100%;
   padding:0;
   color: #FFFFFF !important;
   cursor: pointer;
}

a.art-search-button span.art-search-button-text {
   display: none;
}

 

 

looks ok to me !!

 

LeeB

5/14/2013 9:40:20 AM
Gravatar
Total Posts 18439

Re: Artisteer search box , search icon not in text box

Can you upgrade to mojoPortal 2.3.9.7 and see if that resolves it? I "think" it will.

5/15/2013 8:57:48 PM
Gravatar
Total Posts 42

Re: Artisteer search box , search icon not in text box

Hi Joe

I had a funny feeling you were going to say that :)

Will try it over the weekend ...

thanks

LeeB

6/3/2013 5:24:21 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Artisteer search box , search icon not in text box

Hi guys, we ran into this same problem, upgrading from 2.3.8.5 to 2.3.9.7 and re-exporting Artisteer skins using Artisteer 4.1. The problem is we had styled our search input as Joe Davis explained in his great Styling the Search Input article. However, Artisteer 4.1 forces width:100% on all input[type="text], and that causes the search button to be pushed outside of the SearchInput control.

The fix is to add the following to style-artisteer-overrides (or whichever your css file of choice is, below the main style.css in style.config):

div.art-search input[type="text"] {width:auto;}

Joe, I think perhaps this should be default artisteer override CSS in the exporter, since the mojoPortal search panel is set up with the assumption that both the input box and button are contained within the SearchInput control. Sorry for reporting another potential exporter change just after you pushed out a new version. If you do want to change the exporter and can hold off on publishing a new version until early next week, I will hopefully be done fixing up our sites (just in case I find any other issues). If you think this fix should be handled outside of the exporter, of course I or Joe D. can change the document, so just let me know.

Jamie

 

6/4/2013 11:10:02 AM
Gravatar
Total Posts 18439

Re: Artisteer search box , search icon not in text box

Hi Jamie,

Artisteer does not force those widths it has them that way by default but you can change it from within Artisteer before exporting. Our art41-greengold.artx file has a search input in the header and in the right side and it looks correct on export in my testing.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.