amin.poorsaeed

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

15 پست در این موضوع

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

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

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش html و css آموزش لاراول آموزش cPanel آموزش php آموزش سئو وردپرس آموزش امنیت وردپرس آموزش وردپرس آموزش فرم ساز RSform آموزش سئو جوملا آموزش فروشگاه ساز Hikashop آموزش فروشگاه ساز ویرچومارت آموزش طراحی سایت آگهی تبلیغاتی آموزش امنیت جوملا آموزش طراحی سایت فروش فایل آموزش طراحی قالب ریسپانسیو با Helix آموزش جوملا 3 آموزش ساخت ربات دکمه ی شیشه ای آموزش ساخت ربات همکاری در فروش آموزش ساخت ربات جذب ممبر آموزش ساخت ربات ضد اسپم آموزش ساخت ربات پیوست فایل سورس ربات مدیر گروه | ربات مدیر گروه همسریابی

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

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

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

#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

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

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

Share this post


Link to post
Share on other sites

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

eejraelk3ig22s3lichf_thumb.png

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

uum6tudf4r8rbb8dreqb_thumb.png

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

با سلام

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

شما برای 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;

}

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

Share this post


Link to post
Share on other sites

احتیاج نیست به تمام آبجکت هات کلاس یا آی دی بدی شاید تو سایت از یک ماژول استفاده کنی که اسم هر کدام از اینپوت هاش یک جیز باشه اون موقع هم 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;
}

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری