Forum portalu Fan-Strefa.pl
Dla webmastera => Pomoc => Wątek zaczęty przez: Stysia w 18 Sierpień 2011, 19:19:19
-
Właśnie na moja strone dodałam ostatnio dodane zdjęcia do galerii. Niestaty w slidebarze, nie ma tła... co sie dzieje? jak moge dodać tło?
mój kod w CSS:
a strona ninjadiary.com
+ jak moge zrobić aby na stronie było wyswietlanych wiecej ostatnio dodanych zdjec?
body {
background: #f1eae8;
}
.topbar {
text-align: center;
text-transform: uppercase;
color: #ffffff;
font-family: tahoma;
letter-spacing: 0pt;
font-size: 12px;
}
.topbar a, .topbar a:visited, .topbar a:active {
color: #ffffff;
text-decoration: none;
padding-left: 5pt;
padding-right: 5pt;
}
.topbar a:hover {
color: #ffffff;
text-decoration: underline;
padding-left: 5pt;
padding-right: 5pt;
}
.footerbar {
text-align: center;
text-transform: none;
color: #f1eae8;
font-family: trebuchet MS;
font-size: 8pt;
}
.footerbar a, .footerbar a:active, .footerbar a:visited {
color: #f1eae8;
text-decoration: none;
}
.footerbar a:hover {
color: #f1eae8;
text-decoration: underline;
}
.contentwhiteblock_headerimage {
background: #fbf6f5;
padding: 5pt;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #e4d9d6;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #e4d9d6;
}
.contentwhiteblock {
background: #fbf6f5;
padding: 10pt;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #e4d9d6;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #e4d9d6;
}
.header-heading {
display: inline;
text-valign: top;
}
.header-heading-one {
display: inline;
color: #c09694;
font-family: trebuchet MS;
font-size: 8pt;
text-transform: lowercase;
}
.header-heading-two {
display: inline;
color: #e7d1ce;
font-family: trebuchet MS;
font-size: 8pt;
text-transform: lowercase;
font-style: italic;
}
.header-heading-text {
color: #bfb6b6;
font-family: trebuchet MS;
font-size: 8pt;
text-transform: lowercase;
}
.eliteaffs {
text-align: center;
padding: 10pt;
}
.eliteaffs a img {
padding: 10pt;
border-style: solid;
border-width: 1px;
border-color: #efe4e1;
}
.eliteaffs a:hover img {
border-style: solid;
border-width: 1px;
border-color: #bc908d;
}
.sidebarheader {
padding: 5pt;
padding-left: 10pt;
background : #efe4e1;
color: #bc908d;
font-family: trebuchet MS;
font-size: 12pt;
text-transform: none;
}
.sidebarcontent {
padding: 5pt;
padding-left: 5pt;
color: #696464;
font-family: trebuchet MS;
font-size: 8pt;
line-height: 16pt;
text-transform: none;
}
.sidebarcontent a img {
padding: 10pt;
border-style: solid;
border-width: 1px;
border-color: #efe4e1;
}
.sidebarcontent a:hover img {
border-style: solid;
border-width: 1px;
border-color: #bc908d;
}
.sidebarcontent a {
color: #696464;
text-decoration: none;
}
.sidebarcontent a:hover {
color: #696464;
text-decoration: underline;
}
.mainpageheader {
padding: 5pt;
padding-left: 10pt;
background : #efe4e1;
color: #bc908d;
font-family: trebuchet MS;
font-size: 12pt;
text-transform: none;
height: 25pt;
}
.mainpagecontent {
padding: 5pt;
padding-left: 5pt;
color: #696464;
font-family: trebuchet MS;
font-size: 8pt;
line-height: 16pt;
text-transform: none;
}
.mainpagecontent a, .mainpagecontent a:active, .mainpagecontent a:visited {
color: #696464;
text-decoration: none;
}
.mainpagecontent a:hover {
color: #696464;
text-decoration: underline;
}
.mainpagecontent img {
padding: 0px;
border:5px solid #ede7e5;
background-color:#ff0;
margin-top: 10pt;
margin-bottom: 10pt;
margin-left: 1pt;
margin-right: 1pt;
text-align: center;
}
.mainpagecontent a img, .mainpagecontent a:active img, .mainpagecontent a:visited img {
padding: 0px;
border:5px solid #ede7e5;
background-color:#ff0;
margin-top: 10pt;
margin-bottom: 10pt;
margin-left: 1pt;
margin-right: 1pt;
text-align: center;
}
.mainpagecontent a:hover img {
border:5px solid #e4ddda;
background-color:#ff0;
text-align: center;
}
img {
border-width: 0pt;
}
a img {
border-width: 0pt;
}
a:hover img {
border-width: 0pt;
}
.dateauthorpost {
display: inline;
text-align: right;
padding-right: 10pt;
color: #dbcac6;
font-family: trebuchet MS;
font-size: 8pt;
float: right;
}
.mainheader {
display: inline;
float: left;
text-align: left;
}
.comments {
display: inline;
float: left;
padding: 10pt;
padding-left: 15pt;
padding-right: 15pt;
margin-top: 20pt;
background: #ece6e4;
text-align: center;
font-family: trebuchet MS;
font-size: 8pt;
color: #696464;
}
.comments a, .comments a:visited, .comments a:active {
color: #696464;
text-decoration: none;
}
.comments a:hover {
color: #696464;
text-decoration: underline;
}
.cats {
display: inline;
float: right;
padding: 10pt;
margin-top: 20pt;
border-right: solid 2pt #b5aca5;
text-align: right;
font-family: tahoma;
font-size: 8pt;
text-transform: uppercase;
color: #b5aca5;
}
.cats a, .cats a:active, .cats a:visited {
color: #b5aca5;
text-decoration: none;
}
.cats a:hover {
color: #b5aca5;
text-decoration: underline;
}
.onecomment {
border: solid 1pt #e7e0de;
padding: 5pt;
background: #f4ecea;
color: #696464;
font-family: trebuchet MS;
font-size: 8pt;
line-height: 16pt;
text-transform: none;
margin-bottom: 6pt;
margin-top: 5pt;
}
.projects-block a {
display: inline;
padding: 2pt;
background: #e0d9d6;
color: #696464;
font-family: trebuchet MS;
font-size: 8pt;
}
.projects-block a:hover{
display: inline;
padding: 2pt;
background: #e0d9d6;
color: #696464;
font-family: trebuchet MS;
font-size: 8pt;
}
.cpmfetchclass img
{
width: 50px;
border: 1px solid #e0d9d6;
}
.cpmfetchclass a:hover img
{
width: 50px;
border: 0px solid #696464;
}
-
Tu dodaj tło:
.sidebarcontent
-
Tu dodaj tło:
.sidebarcontent
to nic nie dało ;/
-
Może div'a masz niedomkniętego?
-
W slidebarze mam cos takiego: <!--sidebarwidgetloop--><tr>
<td class="cpmfetchclass" valign="top">
<div class="sidebarheader">Ostatnie zdjęcia w galerii</div>
<div class="sidebarcontent">
<?php
include "./gallery/cpmfetch/cpmfetch.php";
$objCpm = new cpm("./gallery/cpmfetch/cpmfetch_config.php");
$objCpm->cpm_viewLastAddedMedia(1,4);
$objCpm->cpm_close();
?>
</div>
</td><!--sidebarcontent-->
</div>
-
<!--sidebarwidgetloop-->
<tr>
<td class="cpmfetchclass" valign="top">
<div class="sidebarheader">Ostatnie zdjęcia w galerii</div>
<div class="sidebarcontent">
<?php
include "./gallery/cpmfetch/cpmfetch.php";
$objCpm = new cpm("./gallery/cpmfetch/cpmfetch_config.php");
$objCpm->cpm_viewLastAddedMedia(1,4);
$objCpm->cpm_close();
?>
</div>
</td>
<!--sidebarcontent-->
</div>
- moim zdaniem div oznaczony kolorem fioletowym nie ma rozpoczęcia, no chyba że <!--sidebarwidgetloop--> to jest rozpoczęcie div'a - ale jakoś mi nie pasuje
- dlaczego znacznik <tr> nie ma zamknięcia na dole? // no chyba, że jest to początek kodu i </tr> znajduje się gdzieś dalej w kodzie, którego tu nie podałaś - ale to z kolei nie pasuje mi z brakiem rozpoczęcia tego div'a o którym wspomniałem powyżej.
-
ok! :)
Poradziłam sobie kod powinien wyglądać tak:
<!--sidebarwidgetloop--><tr>
<td class="contentwhiteblock" valign="top">
<div class="sidebarheader">Ostatnio dodane zdjęcia</div>
<div class="sidebarcontent">
<div class="cpmfetchclass">
<?php
include "./gallery/cpmfetch/cpmfetch.php";
$objCpm = new cpm("./gallery/cpmfetch/cpmfetch_config.php");
$objCpm->cpm_viewLastAddedMedia(1,4);
$objCpm->cpm_close();
?>
</div>
</td><!--sidebarcontent-->
</div>
</td>
<!--/sidebarwidgetloop--></tr>
I mam pytanie które juz zadawałam xD jak zrobić aly miniaturki były kwadratowe oraz zeby było ich wiecej? : p
-
Żeby ustalić konkretna liczbę miniaturek i wersów, w których maja być wyświetlane - zmieniasz liczby, które masz umieszczone w nawiasie
$objCpm->cpm_viewLastAddedMedia(1,4);
To oznacza, że masz jeden wers w którym znajdują się cztery zdjęcia.
Co do zmiany wyglądy to ktoś kiedyś już na forum pisał.
Okay :P
Wystarczy wkleic ponizszy kod do style.css:
.recentimages a img, .recentimages a img:visited {
width:42px;
height:37px;
background-color: #687474;
border-top: 0px solid #687474;
border-left: 1px solid #687474;
border-right: 0px solid #687474;
border-bottom: 1px solid #687474;
padding: 2px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.recentimages a img:hover {
width:42px;
height:37px;
background-color: #647373;
border-top: 0px solid #647373;
border-left: 1px solid #647373;
border-right: 0px solid #647373;
border-bottom: 1px solid #647373;
padding: 2px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
opacity:.70;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
}
i potem w tej ramce gdzie maja sie foty wyswietlac wstawic w <td> class="recentimages" :P
Wymiary mozna oczywiscie sobie zmienic. Btw podziekowania dla Belii z pattison-robert.net za pomoc z tym :)
U Ciebie miniaturki są umieszczone w <div class="cpmfetchclass">, więc wystarczy że w powyższych stylach zmienisz z:
.recentimages a img, .recentimages a img:visited na .cpmfetchclass a img, .recentimages a img:visited
oraz
.recentimages a img:hover zmieniasz na .cpmfetchclass a img:hover Wysokość i szerokość miniaturek możesz dostosować w stylach w powyższym kodzie :D
-
No oki... widziałąm to włąsnie.. ale to nic nie daje... zdjęcia są włąśnie jeszcze większe ;p