 Runde Ecken |
Anika90
unregistriert
 |
|
Hallo liebe Leute,
Ich würde gern in meinem Forum runde Ecken haben.
Ich würde euch gern ien Beispiel zeigen, wo ich dsa schon gesehen habe, aber irgendwie haben die sich gerade versteckt XD
Aber vielleicht hat dsa schon einmal jemand von euhc gesehen?
Das einzige was ich weiß ist, dass das irgendwie im CSS eingetragen werden muss.
Ach und jaaa habe schon per Google geschaut, aber irgendwie bin ich zu blöd um das zu verstehen.
Vielen lieben Dank für eure Hilfe!
|
|
26.04.13 10:31 |
|
|
Anika90
unregistriert
|
|
Hallo Pigsel,
Ich brauch diese runden "Ecken" für die Forenränder. Die Buttons sind mir schon klar, dass man da nur ne Grafik machen kann, aber ich wie gesagt ichbrauch die für die Forenränder.
|
|
|
26.04.13 10:48 |
|
|
Anika90
unregistriert
|
|
Danke Schrimm,
Werde ich auch mal probieren^^
|
|
|
27.04.13 19:25 |
|
|
|
|
Die einfachste Möglichkeit dafür ist, der Tabelle einen Style zu geben, und diesen im ACP im Designpack zu definieren. Beispiel:
.style1 {
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari, Chrome */
-khtml-border-radius:10px; /* Konqueror */
border-radius:10px; /* CSS3 */
behavior:url(border-radius.htc);
}
(der Wert 10px kann natürlich beliebig angepasst werden)
Dabei muß für den IE ein Extradokument im Root hoch geladen werden (Siehe Anhang)
Zu beachten ist aber, das bei ausgeschalteten Javascript die Ecken im IE dennoch eckig sind, nicht abgerundet.
|
|
|
27.04.13 22:22 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Pigsel
Mitglied
Dabei seit: 05.09.11
Beiträge: 774
Fähigkeiten: WBB Lite 1 Fortgeschritten
Forenversion: Lite 1.0
|
|
DANKE!
das werd ich gleich mal reinfummeln und sehen wie es wirkt 
Edit:
hab die Class im ACP angelegt für den Style habe in der index.tpl die
<table class="style1" ....... > eingerichtet
Ergebnis die border bringt einen vermutlichen radius - vermutlich deshalb, weil die Tabellenspalte dann wohl auch den "style1" erfahren muss
der hintergrund in den Tabellenzellen bleibt stur rechteck aber die border drumrum bildet einen zu ahnenden Radius
zudem haben tabletitel und tablecat Grafiken drin die noch auf rechteck ausgelegt waren
CSS-Fenster ACP
| Zitat: |
BODY { SCROLLBAR-BASE-COLOR: #F78B1B; SCROLLBAR-ARROW-COLOR: #FFF7DA; background: url(http://forum/images/banner.jpg) fixed; }
SELECT {
FONT-SIZE: 14px;
FONT-FAMILY: Tahoma,Helvetica;
COLOR: #000000;
BACKGROUND-COLOR: #EDEDED;
}
TEXTAREA {
FONT-SIZE: 14px;
FONT-FAMILY: Tahoma,Helvetica;
COLOR: #000000;
BACKGROUND-COLOR: #EDEDED;
}
.style1 {
-moz-border-radius:35px; /* Firefox */
-webkit-border-radius:35px; /* Safari, Chrome */
-khtml-border-radius:35px; /* Konqueror */
border-radius:35px; /* CSS3 */
behavior:url(border-radius.htc);
}
.input {
FONT-SIZE: 14px;
FONT-FAMILY: Tahoma,Helvetica;
COLOR: #000000;
BACKGROUND-COLOR: #EDEDED;
border-radius: 35px;
border-top-width : 1px;
border-right-width : 1px;
border-bottom-width : 1px;
border-left-width : 1px;
text-indent : 2px;
}
.topnavi {
padding-right: 5px;
padding-bottom: 18px;
padding-left: 5px;
}
.admin_comment {font-size : 12px; font-weight: bold;color: #FF0000; line-height: 14pt;}
#bg A:link, #bg A:visited, #bg A:active { COLOR: #000000; TEXT-DECORATION: underline; }
#bg A:hover { COLOR: #F6C52A; TEXT-DECORATION: none; }
#tablea A:link, #tablea A:visited, #tablea A:active { COLOR: #000000; TEXT-DECORATION: underline; }
#tablea A:hover { COLOR: #F6C52A; TEXT-DECORATION: none; }
#tableb A:link, #tableb A:visited, #tableb A:active { COLOR: #000000; TEXT-DECORATION: underline; }
#tableb A:hover { COLOR: #F6C52A; TEXT-DECORATION: none; }
#tablecat A:link, #tablecat A:visited, #tablecat A:active { COLOR: #FFFFFF; TEXT-DECORATION: underline; }
#tablecat A:hover { COLOR: #F6C52A; TEXT-DECORATION: none; }
#tablecat { background-image: url(http://forum/images/cellpic.gif); }
#tabletitle A:link, #tabletitle A:visited, #tabletitle A:active { COLOR: #FFFFFF; TEXT-DECORATION: none; }
#tabletitle A:hover { COLOR: #F6C52A; TEXT-DECORATION: underline; }
#tabletitle { background-image: url(http://forum/images/cellpic1.gif); } |
Code im Template(Auszug index.tpl)
| Zitat: |
<body id="bg">
$header
$lauftext
$welcome
$index_userwaitting
</table><br>
$ankuendigungoutput
$nullposthinweis
$quicklogin
<table class="style1" cellpadding=4 cellspacing=1 border=0 width="{tableinwidth}" bgcolor="{tableinbordercolor}">
$index_useronline
$index_wwhd
$index_showevents
$birthday
$nextbirthday
$index_stats
</table>
$shoutbox
$top5threadstats
$index_topposter
<table class="style1" cellpadding=4 cellspacing=1 border=0 width="{tableinwidth}" bgcolor="{tableinbordercolor}">
<tr bgcolor="{tabletitlecolor}" id="tabletitle">
<td><smallfont> </font></td>
<td width="70%"><smallfont color="{fontcolorsecond}"><b>Foren</b></font></td>
<td align="center"><smallfont color="{fontcolorsecond}"><b>Beiträge</b></font></td>
<td align="center"><smallfont color="{fontcolorsecond}"><b>Themen</b></font></td>
<td align="center" width="30%" nowrap><smallfont color="{fontcolorsecond}"><b>Letzter Beitrag</b></font></td>
</tr>
$boardbit
</table> |
ich hab das nach gesehen ... die - class="input" - in "shoutbox_input.tpl von der DevilsBox"
| Zitat: |
| <input type="text" name="message" size="40" class="input"> <input name="absenden" type="submit" value="OK"> |
funktioniert einwandfrei - was mit der class "input" verknüpft ist reagiert direkt (da hatte ich das "border-radius 35px;") einfach zu testzwecken mal mit drangeschrieben im ACP .. funktioniert wie gesagt
oder muss das - class="style1" - dann vlt. auch in den verknüpften Templates dazu? das werd ich mal als nächstes checken muss ja irgendwie funktionieren
__________________
Ein Leben ohne CodeBug's ist ein Leben im Paradies
Dieser Beitrag wurde 3 mal editiert, zum letzten Mal von Pigsel: 28.04.13 12:05.
|
|
|
28.04.13 11:02 |
E-Mail
Finden
Als Freund hinzufügen
|
|
|
|
Am sinnvollsten ist es, wenn man UM eine bestehende Tabelle einfach eine neue, abgerundete umzubaut. Ein Beispiel: Das User-CP in der Memberlist.tpl
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
|
<table cellpadding="{$style['tableincellpadding']}" cellspacing="{$style['tableincellspacing']}" border="{$style['tableinborder']}" style="width:{$style['tableinwidth']}" class="tableinborder">
<tr>
<td class="tablea"><table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr class="tablea_fc">
<td align="left"><span class="smallfont"><b><a href="index.php{$SID_ARG_1ST}">$master_board_name</a> » {$lang->items['LANG_GLOBAL_MEMBERSLIST']}</b></span></td>
<td align="right"><span class="smallfont"><b>$usercbar</b></span></td>
</tr>
</table></td>
</tr>
</table><br />
|
|
Das ist der ursprüngliche Code
Nun legt man einfach um diese Tabelle eine neue, abgerundete:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
|
<table style="width:{$style['tableinwidth']}" cellspacing="5" class="style3" align="center"><tr><td class="style4">
<table cellpadding="{$style['tableincellpadding']}" cellspacing="{$style['tableincellspacing']}" border="{$style['tableinborder']}" style="width:100%" class="tableinborder">
<tr>
<td class="tablea"><table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr class="tablea_fc">
<td align="left"><span class="smallfont"><b><a href="index.php{$SID_ARG_1ST}">$master_board_name</a> » {$lang->items['LANG_GLOBAL_MEMBERSLIST']}</b></span></td>
<td align="right"><span class="smallfont"><b>$usercbar</b></span></td>
</tr>
</table></td>
</tr>
</table>
</td></tr></table>
<br />
|
|
Dabei ist zu beachten, das der ursprünglichen Tabelle nun 100% Breite zugeordnet werden müßen, denn sonst wäre sie ja kleiner als die neue, die umzu ist .... also in der alten Tabellen {$style['tableinwidth']} in 100% ändern.
Nun die Styles dazu noch im ACP definieren, hier also style3 und style4
.style3 {
border: 1px solid #000000;
background-color: #414141;
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Safari, Chrome */
-khtml-border-radius:10px; /* Konqueror */
border-radius:10px; /* CSS3 */
behavior:url(border-radius.htc);
}
.style4 {
border: 1px solid #333333;
background-color: #000000;
text-align: center;
background-image: url('images/edel_grey/edelgrey02.png');
}
Das ergibt dann die Ansicht im Bildanhang.
Die Äußere Tabelle ist nun Rund, die darin befindliche eckig. Willst Du das ein vollständiger Bogen außen und innen da ist, müßtest Du entweder der Zelle einen Borderradius zuteilen, oder der darunter befindlichen Tabelle.
|
|
|
28.04.13 14:26 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Anika90
unregistriert
|
|
okay, das werde ich auch mal ausprobieren.
VIELEN lieben dank für die Hilfe Edelsteinhöhle
|
|
|
29.04.13 17:30 |
|
|
|
