Hello !
Can any one please tell me how/where to change the look and feel of input - text boxes and Buttons in the Page . (like "Search" Text Field and "Search cources" , "Turn Editing on" buttons ) .
Expecting a quick reply pls.
Thanks !!
Hi,
I haven't started to look at the 1.5 stylesheets so I dont know exactly Where to put the CSS code but fot the How you have to target the form elements.
For example to change te backgroud and font of all the form elements :
input, textarea, select{
background:#ddd;
font:11px verdana,arial, sans-serif;
}
Input elements are used for buttons, simple textefields, chexkbox, radio button
textarea element is used for multiline text
select is used for dropdown menu
If you want to change all the submit buttons, there would be a way that may work but not on all the browser. To target the element attribute :
input[type="submit"]{
background:#ddd url(images/button.gif) no-repeat;
border:1px solid #333;
}
Hope this helps
I haven't started to look at the 1.5 stylesheets so I dont know exactly Where to put the CSS code but fot the How you have to target the form elements.
For example to change te backgroud and font of all the form elements :
input, textarea, select{
background:#ddd;
font:11px verdana,arial, sans-serif;
}
Input elements are used for buttons, simple textefields, chexkbox, radio button
textarea element is used for multiline text
select is used for dropdown menu
If you want to change all the submit buttons, there would be a way that may work but not on all the browser. To target the element attribute :
input[type="submit"]{
background:#ddd url(images/button.gif) no-repeat;
border:1px solid #333;
}
Hope this helps
Thanks for your reply !!
I have tried using common CSS properties for all buttons and textfields. But that is not what i need . I want to have different size of buttons atleast in the home page . for example the buttons Turneditingon and SearchCourses.
Also i have another query ,
How do i change the space between the "SearchCourses" textbox and the "SearchCourses" Button please refer the screen shot attached .
For the spacing problem,
I guess you would have to look if there is a parent element which would have a class and then use the following selector :
.coursesearchbox input{
margin:0 10px 0 0;
}
This would target both te text field and button but more precise targeting is I think not very compatible.
For the second question, you could use a similar method but I am not sure if you can precisely restrain the width of these form elements ?
Finally I traced out !!
Here is the solution ,
For Space Between Search TextBox and Search Courses Button
go to course\lib.php
Search for the line -"$output .= "<input type=\"text\" size=20 name=\"search\" value=\"$value\">";" and add some spacer image or according to the space required .
For Size of Turneditingon button
Go to lib/weblib.php
Search for the line
"<input type=\"submit\" value=\"$string\" /> add a new class here say "trunon"
"<input type=\"submit\" class=\"turnon\" value=\"$string\" /> and define the properties in styles.php
.turnon{width:210px;} etc .