PDA

Zobacz pełną wersję : [CSS3] Css dla opery w popularnym szablonie "Ja Purity II".



Hektorrr
15-08-2010, 13:31
Witam,
Przeglądałem wiele poradników w sieci jak dodać osobny arkusz stylu dla opery, ie, chrome. Korzystam z paru fajnych i przydatnych rzeczy jak -moz-linear-gradient i odpowiedników na webkit i ie. Strony ładują się zdecydowanie szybciej i są bardzo leciutkie. Opera jednak nie wykorzystuje gradientów i paru innych efektów.

Proszę o instrukcję jak dodać dodatkowy arkusz, gdyż ja tego po prostu nie potrafię :( Nie wiem gdzie wkleić kod php [if Opera] (i czy aby na pewno tak powinno to wyglądać), nie wiem czy należy dodać coś jeszcze.

Szukałem najpierw na joomlart.com skąd pochodzi szablon aczkolwiek nie udzielono mi pomocy :zly:

a_m
15-08-2010, 13:37
jeśli używasz ja purity2 zajrzyj w źródełko strony za pomocą kilku przeglądarek i porównaj klasy body w każdej z nich

Hektorrr
15-08-2010, 13:42
Wskaże mi to położenie pliku template.css i ewentualnie ie.css. Znam ich lokalizację. Ja chce dodać nowy dla opery którego nie ma.

a_m
15-08-2010, 13:45
kolego, porównaj klasy "body" w kilku przeglądarkach, to wszystko; jeśli nie modyfikowałeś szablonu klasa body w operze ma klasę OPE; już wiesz jak pisać style dla opery?

Hektorrr
15-08-2010, 14:54
Porównałem! wcześniej tego nie zauważyłem :( Masz oczywiście rację!
Tylko nadal nie wiem co z tym zrobić...

a_m
15-08-2010, 15:07
co tylko chcesz, wpisz w jakimś arkuszu css np .OPE p{font-size: 30px;} .OPE a{display: none;}, zobacz co się zadzieje w operze i miłej zabawy

Hektorrr
15-08-2010, 16:32
Dziękuje za pomoc :)

---------- Post dodany o 14:32 ---------- Poprzedni post był o 13:40 ----------

Jednak nadal mi nie wychodzi :blink:
Przykładowo mając kod:

.article-tools {
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.00, #CCCCCC));
-moz-box-shadow:1px 1px 2px #999999;
-webkit-box-shadow: 1px 1px 2px #999999;
box-shadow: 1px 1px 2px #999999;
-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);


background:-moz-linear-gradient(center top , #FFFFFF, #CCCCCC) repeat scroll 0 0 transparent;
border:1px solid #CCCCCC;
margin:0 auto;
padding:10px;
text-align:left;

} Chciałbym dla opery przykładowo dać w tle tylko czarny kolor. Jak to zrobić?
.article-tools OPE {kod} i .OPE article-tools {kod} nie działają :zagubiony:

a_m
15-08-2010, 16:48
napisz poprawnie te polecenia; css3 zapowiada się fajnie, ale bez podstaw - sam widzisz - ani rusz

Hektorrr
15-08-2010, 17:15
kod wygląda choćby tak:

background: none repeat scroll 0 0 #F0F5FF;
I nie działa :/

a_m
15-08-2010, 17:17
.article-tools OPE {kod} i .OPE article-tools {kod} napisałem Ci, że nieporawnie to sformułowałeś

Hektorrr
15-08-2010, 17:29
co tylko chcesz, wpisz w jakimś arkuszu css np .OPE p{font-size: 30px;} .OPE a{display: none;}, zobacz co się zadzieje w operze i miłej zabawy

.OPE article-tools{background: none repeat scroll 0 0 #F0F5FF; } też nie działa a wg schematu, który podałeś wyżej.

a_m
15-08-2010, 17:33
ależ męcząca rozmowa - nie działa - bo źle to polecenie napisałeś

Hektorrr
15-08-2010, 17:35
To proszę mi je napisać poprawnie napisane ;) I ja się nauczę i męcząca rozmowa już nie będzie taka męcząca :)

a_m
15-08-2010, 17:43
I ja się nauczę akurat; zabrakło Ci kropeczki przed article-tools, o ile article-tools to klasa

Hektorrr
15-08-2010, 17:50
Większy fragment kodu z template.css :

/* JOOMLA STYLE
--------------------------------------------------------- */
/* Layout Deco ---*/
.blog { }

.article_separator,
.leading_separator,
.row_separator,
.column_separator { display: none; }

.leading {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
padding-top: 10px;
}

.article_row { padding-bottom: 10px; padding-top: 10px; }

.article_column { }

.column_separator { padding: 0 25px; }

/* Meta ---*/
.article-tools {
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.00, #CCCCCC));
-moz-box-shadow:1px 1px 2px #999999;
-webkit-box-shadow: 1px 1px 2px #999999;
box-shadow: 1px 1px 2px #999999;
-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);


background:-moz-linear-gradient(center top , #FFFFFF, #CCCCCC) repeat scroll 0 0 transparent;
border:1px solid #CCCCCC;
margin:0 auto;
padding:10px;
text-align:left;

}

.article-meta { float: left; padding: 0; width: 70%; }

.article-section, .article-category { color: #999; }

---------- Post dodany o 15:48 ---------- Poprzedni post był o 15:47 ----------

Czy ja wiem czy to klasa :hmm: Raczej obiekt po prostu...

---------- Post dodany o 15:50 ---------- Poprzedni post był o 15:48 ----------

Faktycznie kropeczka pomogła ^^ Dziękuje bardzo!!

Hektorrr
20-08-2010, 16:32
Pracując dalej nad witryną dochodzę do momentu w którym muszę zmienić wygląd strony kiedy jest wyłączona.
Jest to szablon system a plik offline.css. Niestety nie mogę tutaj przypisać już żadnych klas, czy IE7 czy OPE, więc moje pytanie z początku tematu powraca, czyli: Jak dodać oddzielny plik .css dla opery i ie.

a_m
20-08-2010, 18:06
za pomocą samego css tego nie zrobisz, musisz do szablonu odpowiadającego za wyświetlanie "czegokolwiek" dodać odpowiednie skrypty rozpoznające przeglądarkę - jak w ja purity 2

Hektorrr
21-08-2010, 15:22
W ja purity 2 nie zlokalizowałem tego pliku o czym wspomniałem chyba w pierwszym poście. Czy mogę prosić o podpowiedź? ;) Pobawię się sam już nie będę prosił o gotowca :)

---------- Post dodany o 13:22 ---------- Poprzedni post był o 01:18 ----------

Do pliku templates/system/offline.php dopisałem zapożyczone z pliku /templates/ja_purity_ii/layouts/blocks/head.php :

<!--[if IE]>
<link rel="stylesheet" href="<?php echo $this->templateurl(); ?>/css/ie.css" type="text/css" />
<![endif]-->

<!--[if lt IE 7.0]>
<link rel="stylesheet" href="<?php echo $this->templateurl(); ?>/css/ie7minus.css" type="text/css" />
<style>
.main { width: expression(document.body.clientWidth < 770? "770px" : document.body.clientWidth > 1200? "1200px" : "auto"); }
</style>
<![endif]-->

<!--[if IE 7.0]>
<style>
.clearfix { display: inline-block; } /* IE7xhtml*/
</style>
<![endif]-->
Stworzyłem też plik ie7minus.css umieszczony w templates/system/css różniący się kolorem tła od oryginalnego i nie działa...