Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Resize Width Of DNN Search Box With CSSResize Width Of DNN Search Box With CSS
Previous
 
Next
New Post
6/7/2010 6:56 PM
 
How do you resize the width of the DNN search box using CSS?   Any methods I have tried aren't working!

DONEIN.NET DotNetNuke Modules
Feedback * Google Sitemaps * Meetup * Redirector * Share On Facebook * Site Map * Battleship (FREE)
Follow us on Twitter!
 
New Post
6/7/2010 7:32 PM
 

Hi,

The Search box is given a class of .NormalTextBox by default but you'll need to check this use FireBug (www.getfirebug.com) or view the source code of your page as the css class for this can be changed as part of the skin.

If it is .NormalTextBox, as this is a shared css class, you'll need to target the search box by using any wrapping elements ID. An example of this is if the search box is in a div element with an id of searchbox, you'd use #searchbox input.NormalTextBox. Example code is below:

HTML

<div id="searchbox">
<input class="NormalTextBox"></input>
</div>

CSS

#searchbox input.NormalTextBox{
width:250px;
}

If the Input has a different class use that instead, the same principles apply.

If you can't get this to work can you provide a link to a sample of the skin as this will be easier to work with.

Regards,

Rick.



PSDtoDNN - You supply the artwork... we'll build the skins!™
Website | Twitter | YouTube | Skype
 
New Post
6/8/2010 11:02 AM
 
That worked like a charm! Is there anyway to set initial text on the search box? Like "Enter search query here..." I am trying to do this without actually touching the core DNN code, so I would want it to be done within the Skin file.

DONEIN.NET DotNetNuke Modules
Feedback * Google Sitemaps * Meetup * Redirector * Share On Facebook * Site Map * Battleship (FREE)
Follow us on Twitter!
 
New Post
6/8/2010 11:18 AM
 

Glad it worked for you!

Regarding the prepopulation, I reckon this could be done with jQuery, using something like this: http://blog.zachwaugh.com/post/309915.... I've never done it, but will ask on twitter to see if someone else knows how.

Rick.



PSDtoDNN - You supply the artwork... we'll build the skins!™
Website | Twitter | YouTube | Skype
 
New Post
6/8/2010 12:04 PM
 
Not sure how to do it in the skin but you can pre fill the search box by amending the SearchInput.ascx in root >>admin >> search
Look for the following code:

asp:textbox id="txtSearch"  runat="server" Wrap="False" Width="150px" columns="35" maxlength="200" cssclass="NormalTextBox"

and add the following

value="text you want to show in the text box"

Hope this helps,
this works with open search input object as well

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Resize Width Of DNN Search Box With CSSResize Width Of DNN Search Box With CSS


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out