سوال از نحوه رنگی کردن بخش انتخاب موضوعات (یا همان submit)

[نورنما 13]

باسلام

 

چطور میشه  بخش انتخاب موضوعات (یا همان submit) رو رنگی کرد

 

بطوری که موضوعات قابل انتخاب دارای رنگ مجزی وبخصوص باشند

 

تا کاربر تازه وارد درتشخیص موضوعات قابل کلیک سردرگم نشه ! 

 

مثلا تو همین قالب سایت این انجمن همهشون سفید رنگه بااینکه فلش درکنارمطالب هست ولی همین سفیدی باعث ابهام میشه 

 

* ضمنا بعد از کلیک روی دکمه انتخاب موضوع  صفحه (https://IPSFarsi.com/forums/submit/)  باز میشه ،

 

خب بجای قرار دادن دکمه بعلاوه (+) درصفحه ،

 

چطورمیشه این جعبه که رویش نوشته (انتخاب کنید) را به صفحه اول بیاریم و دربالای صفحه اول قرار دهیم ؟

[نورنما 13]

سلام کسی روشی برای این مسئله بالا سراغ نداره؟

[MrAmir 47]

کلاسی که این قسمت باهاش ساخته شده یکی هست و اگه بهش در css رنگ بدید تمام این موضوعات رنگشون تغییر میکنه

مگر اینکه به هر موضوع یک کلاس جداگانه بدید که بتونید رنگ بک گراندشون رو در css تغییر بدید که توصیه نمیکنم این قسمت رو دستکاری کنید 

[نورنما 13]

در 7 ساعت قبل، MrAmir گفته است :

کلاسی که این قسمت باهاش ساخته شده یکی هست و اگه بهش در css رنگ بدید تمام این موضوعات رنگشون تغییر میکنه

مگر اینکه به هر موضوع یک کلاس جداگانه بدید که بتونید رنگ بک گراندشون رو در css تغییر بدید که توصیه نمیکنم این قسمت رو دستکاری کنید 

متشکرم از جوابتون ولی محل کدهاش و کلاسش رو میتونید بگید تا یه چکی بکنم 

ضمنا میخواستم عرض منوی کشویی رو بیشتر بکنم ،محل کدهاش کجاست ؟

باتشکر 

[MrAmir 47]

در در 26 بهمن 1396 در 03:09، نورنما گفته است :

متشکرم از جوابتون ولی محل کدهاش و کلاسش رو میتونید بگید تا یه چکی بکنم 

ضمنا میخواستم عرض منوی کشویی رو بیشتر بکنم ،محل کدهاش کجاست ؟

باتشکر 

این قسمت به کل دستکاری توش اشتباهه , چون شما اگر کلاس جدید به این لیست بدید , باید کلا یک لیست جدید ایجاد کنید 

در این صورت دیگه موضوع یا تالار جدیدی به انجمن اضافه کنید به این قسمت اضافه نمیشه ! 

توصیه من به شما اینه که کلا با استفاده از برنامه Page یک صفحه جدید در انجمن ایجاد کنید , لیست دلخواه خودتون رو با رنگ یا شخصی سازی دلخواه اضافه کنید

هم لیست خودتون موجود باشه هم لیست دیفالت انجمن , در مورد کد هاش کلی باید جستجو کرد ولی میتونید با inspect مرورگر کد ها و کلاس های این قسمت رو پیدا و در فایل های IPS جستجو کنید

[mz123 1]

دوست عزیز بک گراند مورد نظر خودتون را به کد زیر اضافه نمایید و در فایل custom.css اضافه کنید.

li .ipsSelectTree_itemDisabled {yourbackground}

با این کار عناصر که قابل انتخاب نیستند رنگشون تغییر میکنه.

[نورنما 13]

در در 29 بهمن 1396 در 11:05، mz123 گفته است :

دوست عزیز بک گراند مورد نظر خودتون را به کد زیر اضافه نمایید و در فایل custom.css اضافه کنید.

li .ipsSelectTree_itemDisabled {yourbackground}

با این کار عناصر که قابل انتخاب نیستند رنگشون تغییر میکنه.

متشکر از راهنماییتون 

خیلی از مشکل وسوالاتم دراین مورد حل شد 

مثلا دراین صفحه (http://yoursite.com/forum/index.php?/submit/)

باتغییر این کد میشه عرض این منوی کشویی رو تمام صفحه کرد :

.ipsSelectTree {
	
	max-width: 1350px;
}

 

 

 

با راهنمایی شما کدهاشو هم در بخش forms => node   پیدا کردم و کدهای Cms اون هم در forms.css هست  که در پایین برای اونایی که بعدها بهش نیاز داشتند در زیر اضافه کردم   :

 

* سوال دیگه اینکه : کدامیک از این گزینه ها بیانگر محتوای متنهای درختواره  select tree هست ؟ که بشه ازش برای نمایش درختواره موضوعات درجاهای دیگه هم استفاده کردودرختواره رو مثلا بصورت pages وصفحه یا بصورت لیست ونه منوی کشویی نمایش داد؟ 

(خب این موضوع خیلی مهمه چون توی انجمنهای علمی وتخصصی که موضوعات الی ماشاء الله جزئی و شاخه شاخه شده و شاخه های فرعی خیلی زیاد هست لازمه که توی یک صفحه ای مجزا همه موضوعات سایت بصورت لیست وهمینطورنموداری برای کاربران نمایش داده بشه تا کاربران بدانند داخل انجمن ازچه موضوعاتی صحبت شده وامکان انتخاب موضوعشان نیزتسهیل شود!)

/* SELECT TREE */
.ipsSelectTree {
	min-height: 32px;
	border: 1px solid #b3b3b3;
	width: 100%;
	max-width: 350px;
	border-radius: 3px;
	padding: 7px 25px 5px 7px;
	position: relative;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(242,242,242,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
	cursor: pointer;
	margin-bottom: 5px;
}

html[dir="rtl"] .ipsSelectTree {
	padding: 7px 7px 5px 25px;
}
	
	.ipsSelectTree.ipsSelectTree_disabled, .ipsSelectTree.ipsSelectTree_disabled .ipsSelectTree_expand {
		opacity: 0.6;
		pointer-events: none;
	}

	.ipsSelectTree_active.ipsSelectTree_bottom {
		border-bottom: 0;
		border-radius: 3px 3px 0 0;
		border-color: rgba(82, 168, 236, 0.8);
	}
	.ipsSelectTree_active.ipsSelectTree_top {
		border-top: 0;
		border-radius: 0 0 3px 3px;
		border-color: rgba(82, 168, 236, 0.8);
	}

	.ipsSelectTree_expand {
		position: absolute;
		top: -1px;
		bottom: -1px;
		line-height: 32px;
		border-radius: 0 3px 3px 0;
		width: 26px;
		text-align: center;
		color: #333;
	}
	html[dir="ltr"] .ipsSelectTree_expand {
		right: -1px;
	}
	html[dir="rtl"] .ipsSelectTree_expand {
		left: -1px;
	}
		
	.ipsSelectTree [data-role="tokenList"] li {
		line-height: 1;
	}
	html[dir="ltr"] .ipsSelectTree [data-role="tokenList"] li {
		margin-right: 5px;
	}
	html[dir="rtl"] .ipsSelectTree [data-role="tokenList"] li {
		margin-left: 5px;
	}

		.ipsSelectTree [data-role="tokenList"] .cToken {
			background: #385e8a;
			color: #fff;
			margin-bottom: 4px;
		}

.ipsSelectTree_nodes {
	position: absolute;
	top: 100%;
	max-width: 500px;
	border: 1px solid rgba(82, 168, 236, 0.8);
	padding: 7px;
	background: rgb(242,242,242);
}
.ipsSelectTree_nodes.ipsSelectTree_bottom {
	border-top: 0;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	margin: -4px 0 0 0;
}
.ipsSelectTree_nodes.ipsSelectTree_top {
	border-bottom: 0;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
	margin: 0 0 -4px 0;
}

html[dir="rtl"] .ipsSelectTree_nodes {
	margin: -4px -1px 0 0;
}
	
	.ipsSelectTree_nodes [data-role="nodeList"] {
		background: #fff;
		border: 1px solid rgba(0,0,0,0.1);
		max-height: 300px;
		overflow: auto;
	}

		.ipsSelectTree_nodes [data-role="nodeList"] li {
			position: relative;
			border-bottom: 1px solid rgba(0,0,0,0.05);
		}	

			.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item {
				padding: 7px 25px 7px 22px;
			}
			html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item {
				padding: 7px 22px 7px 25px;
			}

				.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item.ipsSelectTree_withChildren {
					padding: 7px 4px;
				}

				.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):hover {
					background: #ebf4f9;
				}

					.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ).ipsSelectTree_selected:hover {
						background: #333333;
					}

			.ipsSelectTree_nodes [data-role="nodeList"] li [data-role="childWrapper"] {
				border-top: 1px solid rgba(0,0,0,0.05);
			}
			html[dir="ltr"] .ipsSelectTree_nodes [data-role="nodeList"] li [data-role="childWrapper"] {
				margin-left: 15px;
				border-left: 1px dotted rgba(0,0,0,0.2);
			}
			html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li [data-role="childWrapper"] {
				margin-right: 15px;
				border-right: 1px dotted rgba(0,0,0,0.2);
			}

			.ipsSelectTree_nodes [data-role="nodeList"] li:last-child {
				border: 0;
			}

			.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_toggle {
				width: 16px;
				height: 19px;
				display: inline-block;
				color: inherit;
				position: relative;
				vertical-align: middle;
				float: left;
			}
			html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_toggle {
				float: right;
			}

				.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_toggle + [data-role="nodeTitle"] {
					display: block;
				}
				html[dir="ltr"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_toggle + [data-role="nodeTitle"] {
					margin-left: 20px;
				}
				html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_toggle + [data-role="nodeTitle"] {
					margin-right: 20px;
				}

				.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item > .ipsSelectTree_toggle:before {
					text-align: center;
					font-size: 11px;
					display: block;
					width: 20px;
					height: 19px;
					position: absolute;
					top: 0;
					content: '\f04b';
					font-family: 'FontAwesome';
				}
				html[dir="ltr"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item > .ipsSelectTree_toggle:before {
					left: 0;
				}
				html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item > .ipsSelectTree_toggle:before {
					right: 0;
				}

					.ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item.ipsSelectTree_itemOpen > .ipsSelectTree_toggle:before {
						{prefix="transform" value="rotate(90deg)"}
					}
					html[dir="ltr"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item.ipsSelectTree_itemOpen > .ipsSelectTree_toggle:before {
						left: -2px;
					}
					html[dir="rtl"] .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item.ipsSelectTree_itemOpen > .ipsSelectTree_toggle:before {
						right: -2px;
					}

		.ipsSelectTree_nodes [data-role="nodeList"] .ipsTabs li {
			border-bottom: 0;
		}

.ipsSelectTree_selected {
	background: #474747;
	color: #fff;
}
	
	.ipsSelectTree_selected:after {
		content: '\f00c';
		font-family: 'FontAwesome';
		position: absolute;
		top: 7px;
		color: #fff;
	}
	html[dir="ltr"] .ipsSelectTree_selected:after {
		right: 7px;
	}
	html[dir="rtl"] .ipsSelectTree_selected:after {
		left: 7px;
	}

.ipsSelectTree_itemDisabled > [data-role="nodeTitle"] {
	color: #a6a6a6;
	cursor: default;
}

.ipsSelectTree_placeholder {
	color: #909090;
}

.ipsSelectTree_search {
	margin-top: 7px;
	position: relative;
}

	.ipsApp .ipsSelectTree_search input {
		border: 1px solid rgba(0,0,0,0.3);
		font-size: 12px;
	}
	html[dir="ltr"] .ipsApp .ipsSelectTree_search input {
		padding-left: 26px;
	}
	html[dir="rtl"] .ipsApp .ipsSelectTree_search input {
		padding-right: 26px;
	}

	.ipsSelectTree_search:after {
		content: '\f002';
		font-family: "FontAwesome";
		position: absolute;
		top: 7px;
	}
	html[dir="ltr"] .ipsSelectTree_search:after {
		left: 7px;
	}
	html[dir="rtl"] .ipsSelectTree_search:after {
		right: 7px;
	}

 

[محمد قاسمی 1055]

درود.

تمامی کدهایی که گذاشته اید برای نمایش Three در قسمت های دیگر می باشند و می توانید از این کلاس ها در دصفحات دلخواه استفاده کنید.

[نورنما 13]

در ۱ ساعت قبل، محمد قاسمی گفته است :

درود.

تمامی کدهایی که گذاشته اید برای نمایش Three در قسمت های دیگر می باشند و می توانید از این کلاس ها در دصفحات دلخواه استفاده کنید.

سلام 

من میخوام اونو  بصورت لیست در page ونه منوی کشویی  نمایش بدهم ، واسه اینکار یه راهنمایی میکنید چطور انجامش بدهم؟

[محمد قاسمی 1055]

کدهای مربوط به نمایس لیست را درون custom.css وارد کنید و کلاس های جدید را با کلاس های قبلی برای نمایش دادن لیست وار فهرست، جایگزین کنید.