Circle Menu formatieren, Icon größer, Circle Menu kleiner ??

[D3ltorohd]

Hallo Com,
ich bekomme folgendes einfach nicht hin. Ich habe ein Circle Menu, das wie folgt aussieht...

Code Auswählen Erweitern

<td>
    <div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="Buero_re"
data-get="pct"
data-get-on='["up","down","open","closed","0","10","20","30","40","50","60","70","80","90","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_window_2w"]'
data-colors='["grey","grey","yellow","green","green","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05"]'
></div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="stop" data-icon="fa-angle-stop"></div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="pct 0" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="pct 80" data-icon="">80</div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="pct 60" data-icon="">60</div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="pct 40" data-icon="">40</div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="pct 20" data-icon="">20</div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="pct 100" data-icon="fa-angle-up"></div></li>
</ul>
<!--<div data-type="label" class="top-narrow  darker small">Rolladen Links</div>-->
</div>
</td>

Leider ist das Icon recht klein. Ich habe dann versucht vorne ein class="tall" zu setzten,

Code Auswählen Erweitern

<td>
<div class="tall">
    <div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="Buero_li"

das macht das Icon schön groß, aber auch leider das Circle Menu, was dann in sich zusammen gequetscht ist. (Siehe Bild 2)

Ich hätte gern das große Icon von Bild 1 zusammen mit der Größe des Circle Menus von Bild 3, ist das irgendwie machbar ?

Und noch etwas kann ich ein Icon über ein Icon legen ? Sprich ich würde gerne in der Mitte die Pos des Rollos sehen, was ich momentan habe und die Actionen die der Rollo macht, also z.b. Pfeil nach oben wenn er hochfährt oder ein Pfeil nach unten wenn er runter fährt.

Falls ihr noch mehr Code braucht um das alles im ganzen zu sehen, bitte bescheid sagen.

Grüße

[setstate]

die bigger Class muss auch nur dort hin, wo das Icon größer sein soll. Also zum ersten <li> des Circlemenu, dem mittleren Icon, dann klappt es.

Code Auswählen Erweitern


      <li data-row="5" data-col="1" data-sizey="2" data-sizex="2">
        <header>BigCenter</header>
        <div class="center">
          <div data-type="circlemenu">
            <ul>
              <li>
                <div class="bigger compress" data-type="symbol" data-device="Buero_re" data-get="pct"
                  data-get-on='["up","down","open","closed","0","10","20","30","40","50","60","70","80","90","100"]'
                  data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_window_2w"]'
                  data-colors='["grey","grey","yellow","green","green","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05"]'>
                </div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="stop" data-icon="fa-angle-stop"></div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="pct 0" data-icon="fa-angle-down"></div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="pct 80" data-icon="">80</div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="pct 60" data-icon="">60</div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="pct 40" data-icon="">40</div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="pct 20" data-icon="">20</div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="pct 100" data-icon="fa-angle-up"></div>
              </li>
            </ul>
            <!--<div data-type="label" class="top-narrow  darker small">Rolladen Links</div>-->
          </div>
        </div>
      </li>


[D3ltorohd]

die bigger Class muss auch nur dort hin, wo das Icon größer sein soll. Also zum ersten <li> des Circlemenu, dem mittleren Icon, dann klappt es.

Code Auswählen Erweitern


      <li data-row="5" data-col="1" data-sizey="2" data-sizex="2">
        <header>BigCenter</header>
        <div class="center">
          <div data-type="circlemenu">
            <ul>
              <li>
                <div class="bigger compress" data-type="symbol" data-device="Buero_re" data-get="pct"
                  data-get-on='["up","down","open","closed","0","10","20","30","40","50","60","70","80","90","100"]'
                  data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_window_2w"]'
                  data-colors='["grey","grey","yellow","green","green","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05"]'>
                </div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="stop" data-icon="fa-angle-stop"></div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="pct 0" data-icon="fa-angle-down"></div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="pct 80" data-icon="">80</div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="pct 60" data-icon="">60</div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="pct 40" data-icon="">40</div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="pct 20" data-icon="">20</div>
              </li>
              <li>
                <div data-type="push" data-device="Buero_li" data-set-on="pct 100" data-icon="fa-angle-up"></div>
              </li>
            </ul>
            <!--<div data-type="label" class="top-narrow  darker small">Rolladen Links</div>-->
          </div>
        </div>
      </li>


Ich weiß nicht, irgendwas läuft da schief bei mir. So kommt es dann raus, das war auch bei einer meiner Versuche dabei, nur das mittlere Symbol zu vergrößern, aber dann ist das Menu nicht mehr mittig zum Symbol. Oder besser gesagt das Symbol ist dann nicht mehr mittig.

Code Auswählen Erweitern

<section>
<div class="big">Rolläden
</div>
<div style="display:inline-block;height:1px;width:80%;background-color:#0088CC;"></div>
<table>
<tr>
<td>
<!--<div class="tall">-->
    <div data-type="circlemenu" class="circlemenu">
<ul>
<li><div class="tall"
data-type="symbol"
data-device="Selina"
data-get="state"
data-get-on='["drive-up","drive-down","open","closed","pct-0","pct-10","pct-20","pct-30","pct-40","pct-50","pct-60","pct-70","pct-80","pct-90","pct-100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_window_2w"]'
data-colors='["red","red","grey","green","green","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05"]'
></div></li>
<li><div data-type="push" data-device="Selina" data-set-on="stop" data-icon="fa-angle-stop"></div></li>
<li><div data-type="push" data-device="Selina" data-set-on="pct 0" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="Selina" data-set-on="pct 80" data-icon="">80</div></li>
<li><div data-type="push" data-device="Selina" data-set-on="pct 60" data-icon="">60</div></li>
<li><div data-type="push" data-device="Selina" data-set-on="pct 40" data-icon="">40</div></li>
<li><div data-type="push" data-device="Selina" data-set-on="pct 20" data-icon="">20</div></li>
<li><div data-type="push" data-device="Selina" data-set-on="pct 100" data-icon="fa-angle-up"></div></li>
</ul>
</div>
</tr>
</table>
</section>

[setstate]

compress mit dazu, wie bei meinem Beispiel

[D3ltorohd]

compress mit dazu, wie bei meinem Beispiel

Ist nun mit drin, aber das gleiche Problem.

Code Auswählen Erweitern

<div data-type="circlemenu" class="circlemenu">
<ul>
<li><div class="tall compress"
data-type="symbol"
data-device="Selina"
data-get="state"
data-get-on='["drive-up","drive-down","open","closed","pct-0","pct-10","pct-20","pct-30","pct-40","pct-50","pct-60","pct-70","pct-80","pct-90","pct-100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_window_2w"]'
data-colors='["red","red","grey","green","green","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05"]'
></div></li>

[D3ltorohd]

Kann das an einem custom CSS liegen ?
Habe hier eine Variante von Ueberbeck.