سوال در مورد زیباسازی و دادن استایل به input ها و text box ها

[amin.poorsaeed 26]

سلام دوستان بنده می خوام text box ها و input های کل سایتم رو از طرح default ویندوز در بیارم و زیبا کنم ، برای اون کار باید چیکار کنم ؟

اگه کسی استایلی داره با راهنمایی بگه خواهش

[شاهین سمیع عادل 10]

یک مقدار بیشتر توضیح میدهید ؟

می خواهید حالت دیفالت تکست باکس و اینپوت باکس سایت را به تصاویری همانند ویندوز تغییر دهید ؟

عکس هایی که می خواهید تغییر دهید را باید در آن سایز ببرید و با دستورات سی اس اس به آن پس زمینه عکس بدهید مثلا برای اینپوت باکس لاگین از دستور زیر باید استفاده کنید

#form-login #form-login-username .inputbox{
background-color:transparent;
border:none;
width:153px;
height:22px;
background-image:url(../images/login.png);
background-repeat:no-repeat;
text-align:center;
}

در اینجا ما تصویر login.png را پس زمینه اینپوت باکس لاگین پیش فرض جوملا قرار داده ایم با طول و عرض های 153 و 22 که هر جوری خودتان خواستید باید عوضش کنید .

در کل بستگی به نوع ماژول هایی که استفاده می کنید دارد . کد

 .inputbox 

برایشان یکی است اما کدهای

form-login #form-login-username

که قبل از آن قرار دارد برای ماژول های مختلف متفاوت است .

پیشنهاد می کنم روی دستورات سی اس اس کار کنید . اگر یکی دوروز سی اس اس کار کنید همه اینها را خودتان می توانید انجام دهید .

[amin.poorsaeed 26]

شاهین جان من کلا می خوام input ها و textbox های سایتم رو از طرح دیفالت ویندوز در بیارم و به طرحی که دوست دارم عوض کنم ، به این عکس توجه کنین من فقط نمی خوام که بخش لاگین اینجور بشه بیشتر مد نظر من بخش نظرات هستش که می خوام استایلش عوض شه ، عکس اول حالت پیشفرض هست و عکس دوم حالتی هست که من می خوام بشه

مثل عکس زیر بشه

[amin.poorsaeed 26]

دوستان چی شد پس ؟

[شاهین سمیع عادل 10]

در پس زمینه تکست باکسی که قرار است تغییر اندازه پیدا کند به سختی می توان عکس قرار داد و این کار یک مقداز زمان بر است . متأسفانه من فرصتش را نداشتم و دوستان دیگر ظاهرا مشغول بودند . شما می توانید این کد را به انتهای فایل template.css قالب خودتان اضافه کنید بسیاری از مواردی که می خواستید اعمال می شود :

#comments-form input , #comments-form textarea{
background-color:#f4f4f4;
border:#dcdcdc solid 2px;
}

[نیما حبیب خدا 19]

امین جان استایل دادن به input ها راحته . فقط دقت کن که باید بهشون کلاس بدی .. توی css هم باید با input.class شروع کنی و بکگراند تعریف کنی و بردر و بقیه موارد معمولی. مثل سایز و مثل این موارد .

یادت باشه برای textarea هم باید جدا بنویسی..

و یک چیز دیگه ... توی تکست آریا ، پایین سمت چپ شکا یک فلش جای اون سه خط اضافه کردی .. عزیزم اون سه خط که باعث باز شدن و بزرگتر شدن تکست آریا میشه مربوط به مرورگر میشه و باید با کهای جاوا و استفاده از کلاینت ها تغییرش بدی .. نمیتونی توی سی اس اس کاری کنی براش .

و نکته آخر که چک باکس ها هم نمیتونی استایل بدی .. برای هر مرورگر باید کلاینت جاوا اسکریپت تعریف کنی تا درست بشه و کار خیلی دشواریست .. فقط میتونی فیلدها رو با سی اس اس استایل بدی . مشکلی بود در خدمتیم

[امیر طالبی 80]

با سلام

امین جان یک نمونه براتون نوشتم برات لینک دانلود میزارم امیدوارم منظورت رو فهمیده باشم و این نمونه بدردت بخوره

[aligoli 12]

امیر طالبی : رمز فایل ؟

[امیر طالبی 80]

شرمنده فراموش کردم : p30template.com

[amin.poorsaeed 26]

از نظر همتون ممنونم نیما جان من چک باکس ها رو نمی خوام تغییر بدم چون قالب سایتم چک باکس هاش خوبه فقط همین input و text area هارو می خوام تغییر بدم ، اون قسمت رو هم برا تغییر دادنش یه پلاگین jquery پیدا کردم به اسم jqtransform با اون میشه اینکارو کرد ولی سخته ، حالا اونو بیخیال شیم ، فقط بکشون عوض بشه من راضی هستم راستی آقای امیر طالبی این رمز فایل چیه ؟ اگر اشکالی نداره بگو

[amin.poorsaeed 26]

داداش رمز رو اشتباه دادی ها ؟ باز نمی شه

[امیر طالبی 80]

رمزش اوکی هست مشکلی نداره p30template.com مجدد چک کردم شاید تایپتون روی فارسی هست

[امیر طالبی 80]

شما برای text box تون یک کلاس تعریف کنید به عنوان نمونه :

<input class="tb7" name="tb7" size="40" type="text">

سپس در فایل css کد زیر را وارد میکنید ( توجه کنید به فایل bg.jpg چون تصویر input را تشکیل میده)

.tb7 {

width: 221px;

background: transparent url('images/bg.jpg') no-repeat;

color : #747862;

height:20px;

border:0;

padding:4px 8px;

margin-bottom:0px;

text-align:right;

}

مشکلی بود در خدمتیم

[amin.poorsaeed 26]

نه داداش رو فارسی نبود ) من با caps lock میزدم ، سوتی هست دیگه !!!

[maniaf69 11]

احتیاج نیست به تمام آبجکت هات کلاس یا آی دی بدی شاید تو سایت از یک ماژول استفاده کنی که اسم هر کدام از اینپوت هاش یک جیز باشه اون موقع هم CSS نویسی زیاد میشه هم زمان زیادی برای لود صفحه طول میکشه

بجای این کار میتونی اسم اون رو بده مثلا input که شامل تمام input ها میشه یعنی توی صفحه هر چی داشته باشی یک جور استایل میگیره

یک نمونه کد برات قرار دادم نگاه کن متوجه میشی

موفق باشی

input,textarea,select
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background:#FFF none repeat scroll 0 0;
border:1px solid #BBB;
font-size:11px;
margin:5px 5px 5px 0;
padding:5px 5px 5px 5px;
font-family:Tahoma, Geneva, sans-serif;
}