Unified Sidebar Image Display

[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

[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

[dodge]

Danke!

Wie sollte es auch anders sein, es funzt

Danke danke danke!

Oskar

[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.

[garvinhicking]

Hi dashboy!

Yes, you can achieve that via unique CSS selectors, because each sidebar is encapsulated in a unique DIV.

Best regards,
Garvin

[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.

[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.

[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

[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.

[garvinhicking]

Hi dashboy!

Of course there isn't. You simply add it!

Regards,
Garvin

[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!

[garvinhicking]

Hi!

You're welcome. Have fun!

Regards,
Garvin