Posted by rickarde on November 24, 2010 at 1:38am
Hej
Någon som har erfarenhet av och lyckats fixa ett snyggt INPUT-fält av typen text?
Gillar inte standardknapparna och standardinmatningsfälten - och jag skulle vilja göra mer än bara styla med bg-color och border, dvs använda en background-image som den synliga delen vid ett inmatningsfält...
Har testat med submitknappar och det funkar bra, och till viss del lyckats med att använda följande för en INPUT (type=text):
#contact-mail-page #edit-name{
border: 1px solid #263A62;
padding: 5px;
font-family: Tahoma, sans-serif;
border: solid 0px #fff;
background-image: url( 'images/buttons/txtinput_w393.png' );
background-repeat: no-repeat;
background-position: center top;
}Även testat med
background-image: transparent url( 'images/buttons/txtinput_w393.png' ) no-repeat center top;och liknande varianter, men något vill sig inbte riktigt. Genom användningen av transparent kan jag få standardbakgrundsfärgen att försvinna, men jag ser aldrig min png-bild trots att Firebug visar följande:
#contact-mail-page #edit-name {
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:fixed;
background-color:transparent;
background-image:url("images/buttons/btSearch.png");
background-position:center top;
background-repeat:repeat-x;
border-bottom-color:#85B1DE;
border-bottom-style:solid;
border-bottom-width:0;
border-left-color-ltr-source:physical;
border-left-color-rtl-source:physical;
border-left-color-value:#85B1DE;
border-left-style-ltr-source:physical;
border-left-style-rtl-source:physical;
border-left-style-value:solid;
border-left-width-ltr-source:physical;
border-left-width-rtl-source:physical;
border-left-width-value:0;
border-right-color-ltr-source:physical;
border-right-color-rtl-source:physical;
border-right-color-value:#85B1DE;
border-right-style-ltr-source:physical;
border-right-style-rtl-source:physical;
border-right-style-value:solid;
border-right-width-ltr-source:physical;
border-right-width-rtl-source:physical;
border-right-width-value:0;
border-top-color:#85B1DE;
border-top-style:solid;
border-top-width:0;
display:block;
font-family:Arial,Sans-Serif;
font-size:13px;
height:24px;
margin-bottom:5px;
overflow-x:hidden;
overflow-y:hidden;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
width:413px;
}
style.css?o (rad 638)
Ärvd frånbody.lightbox-processed
body {
color:#DDDDDD;
font-family:Tahoma,Arial,sans-serif;
font-size:12px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;Beträffande bilden så är den bara ett test där en bild jag vet funkar för sökknappen används ist för den som egentligen ska användas.
Någon med bra tips?
/R
Comments
Kolla på detta
Du kan lägga till element runt input fälten genom din template.php fil:
function themename_form_element($element, $value) {
// This is also used in the installer, pre-database setup.
$t = get_t();
$output = '<div class="form-item"';
if (!empty($element['#id'])) {
$output .= ' id="'. $element['#id'] .'-wrapper"';
}
$output .= ">\n";
$required = !empty($element['#required']) ? '<span class="form-required" title="'. $t('This field is required.') .'">*</span>' : '';
if (!empty($element['#title'])) {
$title = $element['#title'];
if (!empty($element['#id'])) {
$output .= ' <label for="'. $element['#id'] .'">'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
}
else {
$output .= ' <label>'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
}
}
if($element['#type']=="textarea")
{
// ADD A CONTAINER DIV WITH A CLASS BASED UPON ELEMENT TYPE
$output .= '<div class="textareaWrap">';
$output .= '<div class="textareaTop"></div>';
$output .= '<div class="textareaMiddle"> ' . $value . '</div>';
$output .= '<div class="textareaBottom"></div>';
$output .= '</div>';
}
elseif($element['#type']=="textfield")
{
// ADD A CONTAINER DIV WITH A CLASS BASED UPON ELEMENT TYPE
$output .= '<div class="textInputWrap">';
$output .= '<div class="textInputTop"></div>';
$output .= '<div class="textInputMiddle"> ' . $value . '</div>';
$output .= '<div class="textInputBottom"></div>';
$output .= '</div>';
}
elseif($element['#type']=="password")
{
// ADD A CONTAINER DIV WITH A CLASS BASED UPON ELEMENT TYPE
$output .= '<div class="textInputWrap">';
$output .= '<div class="textInputTop"></div>';
$output .= '<div class="textInputMiddle"> ' . $value . '</div>';
$output .= '<div class="textInputBottom"></div>';
$output .= '</div>';
}
else
{
// ADD A CONTAINER DIV WITH A CLASS BASED UPON ELEMENT TYPE
$output .= "<div class = 'round-" . $element['#type'] . "'> " . $value . "</div>\n";
}
if (!empty($element['#description'])) {
$output .= '<div class="description"><div class="descTop"></div><div class="descContent">'. $element['#description'] .'</div><div class="descBottom"></div></div>';
}
$output .= '<div class="clear-fix"></div></div>';
return $output;
}
Som du ser så brukar jag alltid lägga "divar" runt min fomrulärelement så att jag kan styla dem snygga.
MARTIN SKÖLD
Web developer
073 - 50 66 521
www.twitter.com/martinskld
www.facebook.com/martin.skold
se.linkedin.com/in/martinskold
WILSON CREATIVE
Bredbandet 1
392 30 Kalmar
http://www.wilsoncreative.se
0480 - 36 37 70
Template.php
Hej o tack för tipset
Nu använder jag ett tema som saknar template.php (finns bara page.tpl.php & node.tpl.php) så vilken template.php använder drupal då aktuellt tema saknar just den php-sidan? Eller kan jag lägga din kod i ngn av de två tpl.php-filerna som mitt tema innehöll?
Är som sagt rätt färsk inom Drupal och php så det kan nog bli en och annan fråga som kanske borde vara uppenbar...
/R
skapa template.php
De är bara till att skapa den filen...
i temats mapp skapar du bara en fil som heter template.php
/M
MARTIN SKÖLD
Web developer
073 - 50 66 521
www.twitter.com/martinskld
www.facebook.com/martin.skold
se.linkedin.com/in/martinskold
WILSON CREATIVE
Bredbandet 1
392 30 Kalmar
http://www.wilsoncreative.se
0480 - 36 37 70
Fil skapad och det funkar
... så jag vill bara skicka ett fördröjt "tack för tipsen", har bara lite kvar att fixa med olika klasser/id:n så att dessa bakgrundsbilder inte dyker upp på ställen jag inte vill ha dom...
Hls
/R