M2M - poradnik jak zmienic style

9
Jak zmienić style CSS w widgetach Money2Money?

Transcript of M2M - poradnik jak zmienic style

Page 1: M2M - poradnik jak zmienic style

Jak zmienić style CSS w widgetach Money2Money?

Page 2: M2M - poradnik jak zmienic style

2

01Ostylowanie widgetu zestawień

www.money2money.com.pl

.combination_box .box { ... }

.combination_box .blok { ... }

.combination_box .box, .combination_box .box h2 { ... }

.combination_box .ul-2 li a { ... }

.combination_box .ul-1 li { ... }

.combination_box .imp_link1 { ... }

Page 3: M2M - poradnik jak zmienic style

3

01Ostylowanie widgetu zestawień

www.money2money.com.pl

Aby zmienić domyślny wygląd zestawień należy wygenerować kod z zaznacze-niem „Wyłącz style CSS”.

Page 4: M2M - poradnik jak zmienic style

01Ostylowanie widgetu zestawień

www.money2money.com.pl

4

Następnie kopiujemy kod i wklejamy go na stronę. W celu ustawienia wyglądu kliknij w link „Pobierz domyślny kod CSS”. Otworzy się okienko z kodem, który należy skopiować.

Skopiowany kod należy wstawić u siebie na stronie pomiędzy znacznikami <style> lub dodać do zewnętrznego pliku css. Oczywiście kod ten możesz dostosować do własnych potrzeb.

Page 5: M2M - poradnik jak zmienic style

5

02Domyślne style CSS

.combination_box .box,

.combination_box .box .h2 { zoom:1}

.combination_box .box ul,

.combination_box .box li { list-style: none;}

.combination_box .box img { border:0;}

.combination_box .box { padding: 10px; font:400 14px Arial; border: 1px solid #ddd; margin-bottom: 1em; background: -moz-linear-gradient(top, rgba(234,234,234,0.65) 0%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,0.65)), color--stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColor-str='#a6eaeaea', endColorstr='#00ffffff',GradientType=0 );}

www.money2money.com.pl

.combination_box .blok { padding:0; margin-bottom: 10px; border-bottom: 1px solid #ccc;}

.combination_box .logotyp img { line-height:0; float:left; margin:0 10px 10px;}

.combination_box .h2 { padding:26px 0 0 0; font:700 16px Arial; margin: 0 0 12px; min-height: 53px; border-bottom: 1px solid #eee;}

.combination_box .ul-1 { clear: both; padding: 0; margin: 0 0 1em;}

.combination_box .ul-1 li { background: url(http://direct.money.pl/d/new_template/defaul-t/i/li_1.gif) 0 8px no-repeat; font: 400 12px/18px Arial; padding: 0 0 0 10px;}

.combination_box .ul-2 { clear:both; padding:0; margin:0 0 5px; }

.combination_box .ul-2 li { display: inline-block; margin-right: 10px;}

.combination_box .ul-2 li a { font: 700 12px/18px Arial; color: #fff; text-decoration: none; display: inline-block; background: #777; padding: 5px 15px; margin-bottom: 5px; border-radius: 2px;}

.combination_box .ul-2 li a:hover { background:#999;}

.combination_box .imp_link1 { float: left; text-decoration: none; color: #333; font:700 12px/18px Arial; margin-right: 10px;}

.combination_box br { clear:both; height:1px; line-height:0;}

.combination_box .m2m_combination_porownanie a { background: #777777; border-radius: 2px; color: #FFFFFF;

display: inline-block; font: 700 12px/18px Arial; margin-bottom: 5px; padding: 5px 15px; text-decoration: none; float: right;}

.combination_box .box1.pad20.chatBox { padding: 0 20px 1em;}

.combination_box .box1.pad20.chatBox img { width:100%;}

Page 6: M2M - poradnik jak zmienic style

02Domyślne style CSS

www.money2money.com.pl

6

.combination_box .box,

.combination_box .box .h2 { zoom:1}

.combination_box .box ul,

.combination_box .box li { list-style: none;}

.combination_box .box img { border:0;}

.combination_box .box { padding: 10px; font:400 14px Arial; border: 1px solid #ddd; margin-bottom: 1em; background: -moz-linear-gradient(top, rgba(234,234,234,0.65) 0%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,0.65)), color--stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColor-str='#a6eaeaea', endColorstr='#00ffffff',GradientType=0 );}

.combination_box .blok { padding:0; margin-bottom: 10px; border-bottom: 1px solid #ccc;}

.combination_box .logotyp img { line-height:0; float:left; margin:0 10px 10px;}

.combination_box .h2 { padding:26px 0 0 0; font:700 16px Arial; margin: 0 0 12px; min-height: 53px; border-bottom: 1px solid #eee;}

.combination_box .ul-1 { clear: both; padding: 0; margin: 0 0 1em;}

.combination_box .ul-1 li { background: url(http://direct.money.pl/d/new_template/defaul-t/i/li_1.gif) 0 8px no-repeat; font: 400 12px/18px Arial; padding: 0 0 0 10px;}

.combination_box .ul-2 { clear:both; padding:0; margin:0 0 5px; }

.combination_box .ul-2 li { display: inline-block; margin-right: 10px;}

.combination_box .ul-2 li a { font: 700 12px/18px Arial; color: #fff; text-decoration: none; display: inline-block; background: #777; padding: 5px 15px; margin-bottom: 5px; border-radius: 2px;}

.combination_box .ul-2 li a:hover { background:#999;}

.combination_box .imp_link1 { float: left; text-decoration: none; color: #333; font:700 12px/18px Arial; margin-right: 10px;}

.combination_box br { clear:both; height:1px; line-height:0;}

.combination_box .m2m_combination_porownanie a { background: #777777; border-radius: 2px; color: #FFFFFF;

display: inline-block; font: 700 12px/18px Arial; margin-bottom: 5px; padding: 5px 15px; text-decoration: none; float: right;}

.combination_box .box1.pad20.chatBox { padding: 0 20px 1em;}

.combination_box .box1.pad20.chatBox img { width:100%;}

Page 7: M2M - poradnik jak zmienic style

.combination_box .box,

.combination_box .box .h2 { zoom:1}

.combination_box .box ul,

.combination_box .box li { list-style: none;}

.combination_box .box img { border:0;}

.combination_box .box { padding: 10px; font:400 14px Arial; border: 1px solid #ddd; margin-bottom: 1em; background: -moz-linear-gradient(top, rgba(234,234,234,0.65) 0%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,0.65)), color--stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColor-str='#a6eaeaea', endColorstr='#00ffffff',GradientType=0 );}

.combination_box .blok { padding:0; margin-bottom: 10px; border-bottom: 1px solid #ccc;}

.combination_box .logotyp img { line-height:0; float:left; margin:0 10px 10px;}

.combination_box .h2 { padding:26px 0 0 0; font:700 16px Arial; margin: 0 0 12px; min-height: 53px; border-bottom: 1px solid #eee;}

.combination_box .ul-1 { clear: both; padding: 0; margin: 0 0 1em;}

.combination_box .ul-1 li { background: url(http://direct.money.pl/d/new_template/defaul-t/i/li_1.gif) 0 8px no-repeat; font: 400 12px/18px Arial; padding: 0 0 0 10px;}

.combination_box .ul-2 { clear:both; padding:0; margin:0 0 5px; }

02Domyślne style CSS

www.money2money.com.pl

.combination_box .ul-2 li { display: inline-block; margin-right: 10px;}

.combination_box .ul-2 li a { font: 700 12px/18px Arial; color: #fff; text-decoration: none; display: inline-block; background: #777; padding: 5px 15px; margin-bottom: 5px; border-radius: 2px;}

.combination_box .ul-2 li a:hover { background:#999;}

.combination_box .imp_link1 { float: left; text-decoration: none; color: #333; font:700 12px/18px Arial; margin-right: 10px;}

.combination_box br { clear:both; height:1px; line-height:0;}

.combination_box .m2m_combination_porownanie a { background: #777777; border-radius: 2px; color: #FFFFFF;

6

display: inline-block; font: 700 12px/18px Arial; margin-bottom: 5px; padding: 5px 15px; text-decoration: none; float: right;}

.combination_box .box1.pad20.chatBox { padding: 0 20px 1em;}

.combination_box .box1.pad20.chatBox img { width:100%;}

Page 8: M2M - poradnik jak zmienic style

.combination_box .box,

.combination_box .box .h2 { zoom:1}

.combination_box .box ul,

.combination_box .box li { list-style: none;}

.combination_box .box img { border:0;}

.combination_box .box { padding: 10px; font:400 14px Arial; border: 1px solid #ddd; margin-bottom: 1em; background: -moz-linear-gradient(top, rgba(234,234,234,0.65) 0%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,0.65)), color--stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColor-str='#a6eaeaea', endColorstr='#00ffffff',GradientType=0 );}

.combination_box .blok { padding:0; margin-bottom: 10px; border-bottom: 1px solid #ccc;}

.combination_box .logotyp img { line-height:0; float:left; margin:0 10px 10px;}

.combination_box .h2 { padding:26px 0 0 0; font:700 16px Arial; margin: 0 0 12px; min-height: 53px; border-bottom: 1px solid #eee;}

.combination_box .ul-1 { clear: both; padding: 0; margin: 0 0 1em;}

.combination_box .ul-1 li { background: url(http://direct.money.pl/d/new_template/defaul-t/i/li_1.gif) 0 8px no-repeat; font: 400 12px/18px Arial; padding: 0 0 0 10px;}

.combination_box .ul-2 { clear:both; padding:0; margin:0 0 5px; }

.combination_box .ul-2 li { display: inline-block; margin-right: 10px;}

.combination_box .ul-2 li a { font: 700 12px/18px Arial; color: #fff; text-decoration: none; display: inline-block; background: #777; padding: 5px 15px; margin-bottom: 5px; border-radius: 2px;}

.combination_box .ul-2 li a:hover { background:#999;}

.combination_box .imp_link1 { float: left; text-decoration: none; color: #333; font:700 12px/18px Arial; margin-right: 10px;}

.combination_box br { clear:both; height:1px; line-height:0;}

.combination_box .m2m_combination_porownanie a { background: #777777; border-radius: 2px; color: #FFFFFF;

02Domyślne style CSS

www.money2money.com.pl

display: inline-block; font: 700 12px/18px Arial; margin-bottom: 5px; padding: 5px 15px; text-decoration: none; float: right;}

.combination_box .box1.pad20.chatBox { padding: 0 20px 1em;}

.combination_box .box1.pad20.chatBox img { width:100%;}

6

Page 9: M2M - poradnik jak zmienic style

Zapraszamy do kontaktu: [email protected]

Masz wątpliwości? Pytania?