Page 1 of 1
Unified Sidebar Image Display
Posted: Mon Aug 13, 2007 6:11 pm
by dodge
Hi,
hab das installiert und die Mediendatenbank als Quelle genommen!
Er zeigt auch alles wunderbar an, aber ich hätte die gerne zentriert in der Sidebar, nicht links, finde aber im php quellcode nicht die stelle wo ich das ändern kann!
kann einer helfen?
danke schonmal!
lg oskar
PS: hier seht ihr es unten rechts:
www.blog-of-love-and-reality.de
Re: Unified Sidebar Image Display
Posted: Mon Aug 13, 2007 9:14 pm
by garvinhicking
Hi!
Musst Du garnicht im PHP ändern, sondern in der style.css deines templates.
Am ende folgendes eintragen:
Code: Select all
.container_serendipity_plugin_imagesidebar .serendipitySideBarContent {
text-align: center;
margin: 0px auto;
}
Grüße,
Garvin
Posted: Mon Aug 13, 2007 10:37 pm
by dodge
Danke!
Wie sollte es auch anders sein, es funzt
Danke danke danke!
Oskar
Posted: Thu Aug 30, 2007 9:43 am
by dashboy
garvin,
I'd like to ask if I have 2 sidebars, using the above method will make both sidebars align to center. Is there anyway to ONLY make the right sidebar align to center but the left sidebar remain align to left?
Hope you can help me. Thanks.
Posted: Thu Aug 30, 2007 10:56 am
by garvinhicking
Hi dashboy!
Yes, you can achieve that via unique CSS selectors, because each sidebar is encapsulated in a unique DIV.
Best regards,
Garvin
Posted: Thu Aug 30, 2007 1:46 pm
by blog.brockha.us
Dashboy, if you give us your blogs url, we could be even more specific. Just in case you don't understand Garvins explanation.
Posted: Fri Sep 07, 2007 10:39 am
by dashboy
Hi guys, thanks for the responses.
I just wanted to make the pictures at the 'Unified Sidebar Image Display' to align center. I'm using Menalto Gallery btw.
I came into a standstill trying to modify the php file of the Unified Sidebar Image Display as my php knowledge is limited and I can't find the correct place to do it.
So, I thought of changing the style.css instead. I think I found the sidebar in the style.css. Is it as listed below?
Code: Select all
#serendipityRightSideBar {
width: 200px;
vertical-align: top;
padding-left: 0px;
margin-right: 0px;
}
#serendipityLeftSideBar {
width: 195px;
margin: 0 20px 0 0;
padding-right: 14px;
vertical-align: top;
}
I tried to use text-align but it doesn't work for the pictures. And there's no horizontal-align for css.
I checked further down in style.css and found this.
Code: Select all
/* Container for each item on the side bar */
.serendipitySideBarContent {
background-color: #f0f0e5;
-moz-border-radius: 0px 0px 9px 9px;
border: 1px solid #e0e0d0;
padding-right: 0px;
margin-left: 8px;
margin-right: -8px;
padding-left: 5px;
}
div.serendipitySideBarItem {
color: #666666;
font-family: 'Trebuchet MS', sans-serif;
font-size: x-small;
text-align: left;
margin-bottom: 15px;
line-height: normal;
padding: 3px;
margin-right: 0px;
margin-top: 0px;
}
But since this is not right or left side sidebar in particular, changing them will align both right and left sidebars.
Ohh... and my blog is situated at
http://www.dashken.net
Hope you guys can help me. Thanks in advance.
Posted: Mon Sep 10, 2007 10:42 am
by garvinhicking
Hi!
That was a good idea, but even better would be to just style the imagesidebar container:
Code: Select all
.container_serendipity_plugin_imagesidebar img {
margin: 0px auto;
display: block;
}
Regards,
Garvin
Posted: Tue Sep 11, 2007 12:09 pm
by dashboy
Hmm... but there is no container code in the style.css file. This will be long but I'll include what I have in the style.css.
Code: Select all
h4,h3,ul {
margin: 0;
}
.serendipitySideBarContent input {
width: 85%;
margin-left: 7px;
}
.serendipitySideBarContent input.textfield {
}
pre {
font-size: 11px;
}
#mainborder {
background-color: #ffffff;
-moz-border-radius: 9px 9px 9px 9px;
padding: 10px 12px 0 0px;
border: 1px solid #acab95;
width: 968px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
#mainpane {
font-size: 10px;
text-align: justify;
color: #444;
padding: 0px;
X-moz-border-radius: 9px 9px 9px 9px;
background-color: #fff;
}
td#content {
margin: 0 0 0 20px;
width: 528px;
background-color: #f0f0e5;
padding: 10px;
border: 1px solid #e0e0d0;
-moz-border-radius: 9px 9px 9px 9px;
}
#serendipityRightSideBar {
width: 200px;
vertical-align: top;
padding-left: 0px;
margin-right: 0px;
text-align: center;
}
#serendipityLeftSideBar {
width: 195px;
margin: 0 20px 0 0;
padding-right: 14px;
vertical-align: top;
}
body {
margin-top: 20px;
margin-bottom: 20px;
background-color: #0B3507;
}
code {
font-size: x-small;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
color: #114020
}
input, textarea {
font-size: x-small;
font-family: verdana, arial, helvetica, sans-serif;
}
th, td {
font-size: x-small;
}
p, td, th, div, span {
font-family: verdana, arial, helvetica, sans-serif;
}
#mainpane li {
list-style: none;
padding-left: 10px;
background: url(templates/joshua_nino3/img/bullet_rounded.gif) no-repeat 0 6px;
margin-left: -11px;
}
#header {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
-moz-border-radius: 9px 9px 9px 9px;
padding: 10px;
background-color: #fff;
width: 960px;
}
#serendipity_banner {
font-family: Arial, sans-serif;
margin: 0px;
padding-bottom: 10px;
padding-left: 26px;
border: 1px solid #e0e0d0;
height: 120px;
background-position: top right;
background-repeat: no-repeat;
background-image: url(templates/joshua_nino3/img/titlebg.jpg);
background-color: #4B512F;
text-align: left;
}
a.homelink1,
a.homelink1:hover,
a.homelink1:link,
a.homelink1:visited,
#serendipity_banner h1 {
color: #fff;
font-size: xx-large;
font-weight: normal;
padding-top: 5px;
margin: 0px;
text-decoration: none;
}
a.homelink2,
a.homelink2:hover,
a.homelink2:link,
a.homelink2:visited,
#serendipity_banner h2 {
color: #fff;
font-size: small;
font-weight: normal;
margin: 0px;
text-decoration: none;
}
.serendipity_title {
color: #4b512f;
font-size: small;
text-align: left;
font-weight: bold;
}
.serendipity_title a:link {
color: #4b512f;
text-decoration: none;
}
.serendipity_title a:visited {
color: #4b512f;
text-decoration: none;
}
.serendipity_title a:hover {
color: #4b512f;
text-decoration: none;
}
.serendipity_entry {
padding: 15px 15px 5px 0px;
color: #444;
font-size: 11px;
}
.serendipity_entry_body_folded,
.serendipity_entry_body_unfolded,
.serendipity_entry_extended {
/* Inner blocks of .serendipity_entry, can be used for further customization */
}
div.serendipity_Entry_Date {
padding-left: 15px;
width: auto;
}
.serendipity_date {
color: #666666;
font-family: 'Trebuchet MS', sans-serif;
font-size: small;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
padding-bottom: 2px;
background-position: bottom;
border-bottom: 1px solid #808080;
}
.serendipity_commentsTitle {
display: block;
width: 100%;
color: #666666;
font-size: small;
font-weight: bold;
margin-bottom: 5px;
}
div.serendipity_entryFooter {
color: #999999;
font-size: x-small;
border-top: 1px solid #e0e0e0;
text-align: center;
margin-bottom: 25px;
line-height: normal;
padding: 3px;
margin-top: 0.5em;
}
img.serendipity_entryIcon {
float: right;
border: 0px;
margin: 5px;
}
td.serendipity_commentsValue input,
td.serendipity_commentsValue select,
td.serendipity_commentsValue textarea {
width: 95%;
border: 1px solid #e0e0e0;
padding: 2px;
}
td.serendipity_commentsLabel {
font-size: x-small;
font-weight: bold;
vertical-align: top;
}
.serendipity_commentForm {
font-size: x-small;
color: #666666;
margin-bottom: 13px;
margin-right: 10px;
margin-left: 10px;
}
.serendipity_comment {
font-size: x-small;
margin-right: 10px;
margin-left: 10px;
color: #666666;
padding: 3px;
border-right: 1px dotted #BBB;
border-left: 1px dotted #BBB;
margin-bottom: 10px;
overflow: auto;
}
.serendipity_comment_source {
margin-top: 5px;
padding-left: 5px;
margin-bottom: 5px;
}
td.serendipity_admin {
padding: 10px;
}
a, a:link, a:visited, a:active {
color: #782a1b;
text-decoration: none;
}
a:hover {
color: #7998c6;
text-decoration: solid;
}
table.serendipity_calendar td {
font-size: x-small;
padding: 3px;
text-align: center;
}
table.serendipity_calendar a {
font-weight: bold;
text-decoration: underline;
}
table.serendipity_calendar a:hover {
text-decoration: none;
}
td.serendipity_weekDayName {
font-size: x-small;
font-weight: bold;
}
td.serendipity_calendarHeader a:link,
td.serendipity_calendarHeader a:visited,
td.serendipity_calendarHeader a:hover {
border: 0;
text-decoration: none;
}
div.serendipityPlug, div.serendipityPlug a {
font-size: 11px;
text-decoration: none;
border: 0px;
text-align: center;
}
/* Container for each item on the side bar */
.serendipitySideBarContent {
background-color: #f0f0e5;
-moz-border-radius: 0px 0px 9px 9px;
border: 1px solid #e0e0d0;
padding-right: 0px;
margin-left: 8px;
margin-right: -8px;
padding-left: 5px;
}
div.serendipitySideBarItem {
color: #666666;
font-family: 'Trebuchet MS', sans-serif;
font-size: x-small;
text-align: left;
margin-bottom: 15px;
line-height: normal;
padding: 3px;
margin-right: 0px;
margin-top: 0px;
}
/* title of an individual item */
.serendipitySideBarTitle {
background-color: #114020;
-moz-border-radius: 9px 9px 0px 0px;
color: #fff;
font-family: Arial, sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .2em;
padding: 3px;
margin-left: 8px;
margin-right: -8px;
margin-bottom: 5px;
margin-top: -4px;
}
.serendipityImageButton {
cursor: pointer;
}
td.serendipitySideBar {
font-size: x-small;
width: 200px;
padding: 10px;
}
div.serendipity_admin_title {
font-size: 22px;
font-weight: bold;
margin-bottom: 12px;
}
div.serendipity_admin_list_title {
font-size: 12px;
font-weight: bold;
margin-bottom: 8px;
}
td.serendipity_admin_list_item {
padding: 15px;
border: dashed 1px #000000;
}
.serendipity_entry p {
margin: 0px;
padding-bottom: 10px;
}
/** Embedded images with the s9y image manager **/
.serendipity_imageComment_center,
.serendipity_imageComment_left,
.serendipity_imageComment_right {
border: 1px solid black;
background-color: #EFEFEF;
margin: 3px;
}
.serendipity_imageComment_center {
margin: 0px;
}
.serendipity_imageComment_left {
float: left;
}
.serendipity_imageComment_right {
float: right;
}
.serendipity_imageComment_img,
.serendipity_imageComment_img img {
margin: 0px;
padding: 0px;
border: 0px;
text-align: center;
}
.serendipity_imageComment_txt {
margin: 0px;
padding: 3px;
clear: both;
font-size: xx-small;
text-align: center;
}
.serendipity_admin_list_item_even {
background-color: #ffffff;
}
.serendipity_admin_list_item_uneven {
background-color: #E0E0E0;
}
.serendipity_admin_filters {
border: 1px dashed;
font-size: 10px;
margin-bottom: 10px;
padding: 2px;
}
.serendipity_admin_filters_headline {
border-bottom: 1px solid;
}
.serendipity_admin_sortorder {
font-size: 10px;
text-align: center;
}
.serendipity_admin_sortorder input,
.serendipity_admin_sortorder select,
.serendipity_admin_filters input,
.serendipity_admin_filters select {
font-size: 10px;
}
.serendipity_center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.serendipity_entry_author_self {
}
.serendipity_comment_author_self {
}
select, input, textarea {
width: 90%;
margin: 5px 0;
border: 1px solid #bababa;
background-color: #f8f8f4;
color: #666;
}
select:focus, input:focus, textarea:focus {
border: 1px solid #d0d0d0;
color: #000;
background-color: #fff;
}
.captcha {
border: 1px solid #d0d0d0;
}
blockquote {
background-color: #f8f8f2;
border-left: 2px solid #c3c3b5;
border-right: 2px solid #c3c3b5;
border-bottom: 2px solid #c3c3b5;
border-top: 2px solid #c3c3b5;
padding: 1px;
-moz-border-radius: 0px 8px 8px 0px;
text-align: left;
}
.serendipity_freeTag {
margin-left: auto;
margin-right: 0px;
text-align: right;
font-size: 7pt;
display: block;
margin-top: 5px;
margin-bottom: 0px;
}
.serendipity_freeTag_related {
margin-left: 50px;
margin-right: 0px;
text-align: left;
font-size: 8pt;
display: block;
margin-top: 20px;
margin-bottom: 0px;
}
.serendipity_freetag_taglist {
margin: 10px;
border: 1px solid #6265F0;
padding: 5px;
background-color: #B5B8FF;
text-align: justify;
}
.serendipity_freeTag a {
font-size: 7pt;
text-decoration: none;
}
.serendipity_freeTag a:hover {
color: green;
text-decoration: underline;
}
img.serendipity_freeTag_xmlButton {
vertical-align: bottom;
display: inline;
border: 0px
}
Or should I just add the code you listed in your post? Thanks in advance.
Posted: Tue Sep 11, 2007 12:17 pm
by garvinhicking
Hi dashboy!
Of course there isn't. You simply add it!
Regards,
Garvin
Posted: Tue Sep 11, 2007 12:18 pm
by dashboy
Woot! I got it. I just added your code at the top of my style.css and the pictures is centered. Thank you very much garvinhicking. Appreciate your help.
Edit: Wow... your reply is too fast!!! Thanks again!
Posted: Tue Sep 11, 2007 1:54 pm
by garvinhicking
Hi!
You're welcome. Have fun!
Regards,
Garvin