By Lee Sykes
February 2008
In this tutorial we demonstrate how to style the search box in DotNetNuke skins. We walk you through how we applied the styling to the search box in the free ‘internet sharing’ skin.
This covers how we expanded the width of the search box, how to use a graphic for the search box, how to style the text that the search box uses, how to style the search link as a button and how to replace the search link with an image.
We recommend that you view
CSS skinning tutorials and get to grips with skinning before following this tutorial.
Video 1
- Introduction to styling the search box in the ‘internet sharing’ skin
- Viewing the skin with all styling removed from the search box
- Opening the skin files as a website in VWD express
- Skin.xml
- The search token
- How to specify the display settings for the Site and Web radio search options
- How to remove the Site and Web radio search buttons
- How to view the ids and classes associated with the search box and search link
- Using the web developers toolbar to edit the CSS file live
- How to style the search box
- How to specify a width for the search box
- How to style the search box text
- Copying the CSS to the skin.css file
- How to use an image for the search text box
- How to add padding to the search text box
- How to remove the borders from the DotNetNuke search box
Time Length: 9min 59secs
Video 2
- Problems caused by styling the search text box
- How to style the search link
- Looking at the options of using the id or class
- How to style the search link button in a standard DotNetNuke skin
- Styling using a CSS class
- Styling using the search ID
- How to use CSS to style the search link to appear as a button
- How to override background images styling the search button
- How to style the search button when the mouse hovers over the button
- How to style the search link with an image
- How to specify in the search token settings to use an image
- How to style the search image
- How to position the search image
- How to remove the link borders around the image
Time Length: 13min 34secs
Total Time Length: 23min 33secs
For details on the web developers toolbar, view this tutorial:
Troubleshooting DotNetNuke Skins