رفتن به مطلب

تغییر در استایل


پست های پیشنهاد شده

با سلام و احترام .

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

سایت رو به رو رو ببینید لطفا : لینک

من میخواستم دو تا تغییر بدم در هیدر سایت :

1- منوی فوتر رو بیارم بالا ( بدون قسمت کپی رایت فوتر )

2- لوگو ، بنر و تاریخ رو ببرم وسط ، به جای گوشه ها

میخوام مثله عکس زیر بشه .

menu.png

خودم با دستور padding یه کارایی کردم ، ولی نشد و قالب در نمایش موبایل کاملا بهم ریخت . این قالب ریسپانسیوه و نمیخوام نمایش سایزهای مختلفش بهم بخوره .

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

لینک به ارسال

دنبال عبارت class="footer" توی فایل footer.php تون بگردید و کدهای مربوط ب اونو تو header.php قبل از بنر و ... پیست کنید.

برای المنت های بالا هم باید ازشون float رو وردارید و با text-align و margin وسط چینشون کنید

لینک به ارسال
ارسال شده در (ویرایش شده)
در 39 دقیقه قبل، majid1889 گفته است :

دنبال عبارت class="footer" توی فایل footer.php تون بگردید و کدهای مربوط ب اونو تو header.php قبل از بنر و ... پیست کنید.

 

اینکارو قبلا کرده بودم ولی کل سایت رو رنگی کرد ، وقتی ام که بردم در کدهای بالای لوگو قرار دادم ، کلا هیدر رو نابود کرد و همه چی بهم ریخت .

در 39 دقیقه قبل، majid1889 گفته است :

برای المنت های بالا هم باید ازشون float رو وردارید و با text-align و margin وسط چینشون کنید

اصلا در بخش کدهای کلاس لوگو و بنر ، float به کار برده نشده ، وقتی ام text-align و margin قرار دادم ، هیچ تغییری ایجاد نشد و حتی یک پیکسل هم جا به جا نشد . در آدرسی که گذاشتم میتونید خودتون کدهارو بررسی کنید و تست کنید .

آزمون و خطا زیاد انجام دادم ، ولی درست نشد ! ممنون میشم با بررسی دقیق تر آدرس آنلاین ، کدهای درست رو به بنده بدید که بتونم تغییرات رو اعمال کنم .

ویرایش شده توسط Kamali
لینک به ارسال
در 25 دقیقه قبل، Kamali گفته است :

اینکارو قبلا کرده بودم ولی کل سایت رو رنگی کرد ، وقتی ام که بردم در کدهای بالای لوگو قرار دادم ، کلا هیدر رو نابود کرد و همه چی بهم ریخت .

اصلا در بخش کدهای کلاس لوگو و بنر ، float به کار برده نشده ، وقتی ام text-align و margin قرار دادم ، هیچ تغییری ایجاد نشد و حتی یک پیکسل هم جا به جا نشد . در آدرسی که گذاشتم میتونید خودتون کدهارو بررسی کنید و تست کنید .

آزمون و خطا زیاد انجام دادم ، ولی درست نشد ! ممنون میشم با بررسی دقیق تر آدرس آنلاین ، کدهای درست رو به بنده بدید که بتونم تغییرات رو اعمال کنم .

المنت های هدرتون همشون float دارن

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

لینک به ارسال
در 39 دقیقه قبل، majid1889 گفته است :

المنت های هدرتون همشون float دارن

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

منظورتون این دو کلاسه ؟

.logo{
	overflow:hidden;
	width: 200px;
	height: 100px;
	background: url(images/logo.jpg) no-repeat right;
	position:relative;
	float:right;
	background-size: 100% 100%;
}
.banner{
	float:left;
	overflow:hidden;
}

بنده تغییراتی که گفتید رو انجام دادم ولی یه سری مشکلات داشت .

در کلاس لوگو ، همونطور که گفتید float:right رو حذف کردم ، بعلاوه اینکه text-align رو برابر center قرار دادم ، ولی هیچ تغییری نکرد و لوگو یک پیکسل هم جا به جا نشد .

 

ولی در کلاس بنر ، وقتی float:left رو حذف کردم و text-align رو برابر center قرار دادم ، بنر اومد وسط و زیر لوگو ، ولی متأسفانه رفت به قسمت منوها ( همونجاییکه کادر جستجو و ... هست )

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

لینک به ارسال

برای اولی باس از margin: 0 auto استفاده کنید

برای اینکه المنت ها هم قاطی نشن میتونید به header تون ارتفاع بدید ...

 

لینک به ارسال
در 27 دقیقه قبل، majid1889 گفته است :

برای اولی باس از margin: 0 auto استفاده کنید

برای اینکه المنت ها هم قاطی نشن میتونید به header تون ارتفاع بدید ...

 

مرسی ، مشکل مکانشون حل شد و دوتایی اومدن وسط و همونطور که فرمودید با دستور height هم به هیدر ارتفاع دادم و مشکل اونم حل شد خداروشکر.

ولی متأسفانه ، در برخی رزولیشن ها و نمایش موبایل ، بنر و لوگو جاشون تغییر میکرد و در برخی نمایش ها هم کلا حذف میشدن . این مشکل رو چه جوری حل کنم ؟

لینک به ارسال
در در 12/30/2016 at 20:16، Kamali گفته است :

مرسی ، مشکل مکانشون حل شد و دوتایی اومدن وسط و همونطور که فرمودید با دستور height هم به هیدر ارتفاع دادم و مشکل اونم حل شد خداروشکر.

ولی متأسفانه ، در برخی رزولیشن ها و نمایش موبایل ، بنر و لوگو جاشون تغییر میکرد و در برخی نمایش ها هم کلا حذف میشدن . این مشکل رو چه جوری حل کنم ؟

خب اینو دیگه باید بهش استایل بدید. مثلا به این شکل برای رزولوشن های مختلف استایل تعریف کنید

@media only screen and (max-width : 480px)

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

ویرایش شده توسط logomaster
اشتباه تایپی
لینک به ارسال
در 1 ساعت قبل، logomaster گفته است :

خب اینو دیگه باید بهش استایل بدید. مثلا به این شکل برای رزولوشن های مختلف استایل تعریف کنید


@media only screen and (max-width : 480px)

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

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

میشه بفرمایید تکه کد :

overflow:hidden;

چیه و به چه کاری میاد ؟ و اینکه حذفش مشکلی واسه استایل قالب ایجاد میکنه یا خیر ؟

لینک به ارسال
در 31 دقیقه قبل، Kamali گفته است :

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

میشه بفرمایید تکه کد :


overflow:hidden;

چیه و به چه کاری میاد ؟ و اینکه حذفش مشکلی واسه استایل قالب ایجاد میکنه یا خیر ؟

درسته ، قالب شما ریسپانسیوه، اما برای اون کد بنر، استایلی تعریف نشده.

اون کد هم طبیعتا میتونه حذف کردنش بهم ریختگی ایجاد کنه، بستگی داره از کجا حذف کرده باشید این کدو. 

درست نمیدونم برا چیه این کد اما فک کنم برا مخفی کردن ادامه نوشته ست (از یه محدوده تعریف شده). اساتید بهتر میدونن :)

ویرایش شده توسط logomaster
لینک به ارسال
ارسال شده در (ویرایش شده)
در 1 ساعت قبل، logomaster گفته است :

درسته ، قالب شما ریسپانسیوه، اما برای اون کد بنر، استایلی تعریف نشده.

اون کد هم طبیعتا میتونه حذف کردنش بهم ریختگی ایجاد کنه، بستگی داره از کجا حذف کرده باشید این کدو. 

درست نمیدونم برا چیه این کد اما فک کنم برا مخفی کردن ادامه نوشته ست (از یه محدوده تعریف شده). اساتید بهتر میدونن :)

وقتی همون تکه کد رو از بخش کدهای ریسپانسیو هیدر حذف میکنم . بنر رو نمایش میده !

واسه قالب من ، 5 بخش رزولیشن واسه ریسپانسیو در نظر گرفته شده که در زیر قرار میدم . دوستان ، آیا همین تعداد رزولیشن استاندارده و کافیه و در تمام نمایشگرها به خوبی نمایش داده میشه قالب ؟ اگه باید تعداد رزولیشن ها بیشتر باشه ممنون میشم رزولیشن های پیشنهادیتون رو بگید تا اضافه کنم . ( میخوام قالب تو همه نمایشگرها و دستگاهها ، به خوبی نمایش داده بشه . )

@media only screen and (max-width : 1169px)

@media only screen and (min-width : 987px) and (max-width : 1169px)

@media only screen and (min-width : 768px) and (max-width : 986px)

@media only screen and (min-width : 480px) and (max-width : 767px)

@media only screen and (max-width : 479px)

 

ضمنا آقا مجید ظاهرا رفتن و در مورد انتقال منوی فوتر به هیدر ، دیگه هیچ کمکی نکردن . من هرکاری کردم نشد که نشد ! هر دفعه یه جای کار ایراد داشت . خواهشا کمک کنید که بتونم منوی فوتر رو هم بیارم در هیدر .

ویرایش شده توسط Kamali
لینک به ارسال

خب ببینید. من الان دیدم سایت رو اون المان ها (لوگو و بنر) اونجایی که مد نظرتون بود قرار نداشت.

یه فایل بسازید به اسم rtl.css (اگه این فایل رو ندارید) و کدهایی که اینجا قرار دادم رو داخلش بزارید و چک کنید ببینید بنر و لوگو در رزولوشن های مختلف خوبه یا نه

.logo {
    float: none !important;
    margin: auto !important;
}
@media only screen and (max-width: 1169px) and (min-width: 987px)
.banner {
    float: none !important;
    margin: auto !important;
}
@media only screen and (max-width: 986px) and (min-width: 768px)
.banner {
    margin: auto !important;
    float: none !important;
}

لینک به ارسال
در 7 ساعت قبل، logomaster گفته است :

خب ببینید. من الان دیدم سایت رو اون المان ها (لوگو و بنر) اونجایی که مد نظرتون بود قرار نداشت.

یه فایل بسازید به اسم rtl.css (اگه این فایل رو ندارید) و کدهایی که اینجا قرار دادم رو داخلش بزارید و چک کنید ببینید بنر و لوگو در رزولوشن های مختلف خوبه یا نه

.logo {
    float: none !important;
    margin: auto !important;
}
@media only screen and (max-width: 1169px) and (min-width: 987px)
.banner {
    float: none !important;
    margin: auto !important;
}
@media only screen and (max-width: 986px) and (min-width: 768px)
.banner {
    margin: auto !important;
    float: none !important;
}

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

 

ضمنا شما در خصوص جا به جایی لینک فوتر و هیدر نمیتونید کمکم کنید ؟ واقعا گیر کردم ، هرکاری میکنم نمیشه .

لینک به ارسال
در 3 ساعت قبل، Kamali گفته است :

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

 

ضمنا شما در خصوص جا به جایی لینک فوتر و هیدر نمیتونید کمکم کنید ؟ واقعا گیر کردم ، هرکاری میکنم نمیشه .

ببینید، برای منوی فوتر من نیاز به دسترسی به هاست شما دارم. 

اون کدایی که با کمک مجید درست کردی رو دوباره برگردون به حالت قبل و بعد کدهایی که من دادم رو وارد کن، قطعا درست میشه و بنر در همه رزولوشن ها نمایش داده میشه در وسط

لینک به ارسال
در 8 ساعت قبل، logomaster گفته است :

ببینید، برای منوی فوتر من نیاز به دسترسی به هاست شما دارم. 

کدهایی که مربوط به اون بخش از هیدر و فوتر هست رو اینجا میزارم تا بتونید راحت تر کمک کنید .

کدهای منوی فوتر :

	<!--footer--><footer id="footer">
		<div class="footer">
			<ul class="menu_footer">
				<?php wp_nav_menu(array('container'=>'false','theme_location'=>'footer-menu','depth' => 1,'items_wrap' => '%3$s'));?>
			</ul>
			<div class="social">
				<a href="<?php echo ot_get_option('twitter_url', ''); ?>" class="page_twitter"></a>
				<a href="<?php echo ot_get_option('gplus_url', ''); ?>" class="page_googlep"></a>
				<a href="<?php echo ot_get_option('facebook_url', ''); ?>" class="page_facebook"></a>
				<a href="<?php echo ot_get_option('linkdin_url', ''); ?>" class="page_linkedin"></a>
			</div>
		</div>

 

کدهای هیدر :

</head>
<body>
	<!--header--><header id="header">
		<div class="header">
	<div class="logo" <?php $logo = ot_get_option("logo"); if($logo){ ?>style=<?php echo "\"background:url('".$logo."') no-repeat scroll center center transparent;\""; } ?>>
<?php if(is_home()){ ?><h1><?php } else { ?><h2><?php } ?><a href="<?php bloginfo('url'); ?>"><?php bloginfo('title'); ?></a><?php if(is_home()) {?></h1><?php } else {?></h2><?php }?>
	</div>
<?php
$ads_banners = ot_get_option('banner_header', false);
if ( $ads_banners ) {
	$today_date = date("Y-m-d");
	$today_time = strtotime($today_date);
?>
	<div class="banner">
	<?php
	foreach($ads_banners as $banner

من میخوام منوی فوتر ، بالاتر از لوگو و ... ، دقیقا مثله عکسی که قرار دادم قرار بگیره . ( اگه جای درستش رو در قالب یک کد به بنده بگید تا بتونم با کدهای هیدر جایگزین کنم ممنون میشم . )

 

در 9 ساعت قبل، logomaster گفته است :

اون کدایی که با کمک مجید درست کردی رو دوباره برگردون به حالت قبل و بعد کدهایی که من دادم رو وارد کن، قطعا درست میشه و بنر در همه رزولوشن ها نمایش داده میشه در وسط

اینکارو کردم ، ولی بازم داخل دو رزولیشن ناپدید بود و علنا فرق خاصی نکرد !

لینک به ارسال
در 10 دقیقه قبل، Kamali گفته است :

اینکارو کردم ، ولی بازم داخل دو رزولیشن ناپدید بود و علنا فرق خاصی نکرد !

در مورد این , مطمئنن کدهایی که دادم درست بود. فقط نمیدونم این لینک که شما میگید درست شده با کمک مجید ولی من چیزی نمیبینم ینی چی دقیقا... 

خب به هر حال...

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

</head>
<body>
    <!--header--><header id="header">
        <div class="header">
        <ul class="menu_footer">
                <?php wp_nav_menu(array('container'=>'false','theme_location'=>'footer-menu','depth' => 1,'items_wrap' => '%3$s'));?>
            </ul>
            <div class="social">
                <a href="<?php echo ot_get_option('twitter_url', ''); ?>" class="page_twitter"></a>
                <a href="<?php echo ot_get_option('gplus_url', ''); ?>" class="page_googlep"></a>
                <a href="<?php echo ot_get_option('facebook_url', ''); ?>" class="page_facebook"></a>
                <a href="<?php echo ot_get_option('linkdin_url', ''); ?>" class="page_linkedin"></a>
            </div>
    <div class="logo" <?php $logo = ot_get_option("logo"); if($logo){ ?>style=<?php echo "\"background:url('".$logo."') no-repeat scroll center center transparent;\""; } ?>>
<?php if(is_home()){ ?><h1><?php } else { ?><h2><?php } ?><a href="<?php bloginfo('url'); ?>"><?php bloginfo('title'); ?></a><?php if(is_home()) {?></h1><?php } else {?></h2><?php }?>
    </div>
<?php
$ads_banners = ot_get_option('banner_header', false);
if ( $ads_banners ) {
    $today_date = date("Y-m-d");
    $today_time = strtotime($today_date);
?>
    <div class="banner">
    <?php
    foreach($ads_banners as $banner

لینک به ارسال
در 2 ساعت قبل، logomaster گفته است :

در مورد این , مطمئنن کدهایی که دادم درست بود. فقط نمیدونم این لینک که شما میگید درست شده با کمک مجید ولی من چیزی نمیبینم ینی چی دقیقا... 

خب به هر حال...

 

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

 

در 2 ساعت قبل، logomaster گفته است :

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

</head>
<body>
    <!--header--><header id="header">
        <div class="header">
        <ul class="menu_footer">
                <?php wp_nav_menu(array('container'=>'false','theme_location'=>'footer-menu','depth' => 1,'items_wrap' => '%3$s'));?>
            </ul>
            <div class="social">
                <a href="<?php echo ot_get_option('twitter_url', ''); ?>" class="page_twitter"></a>
                <a href="<?php echo ot_get_option('gplus_url', ''); ?>" class="page_googlep"></a>
                <a href="<?php echo ot_get_option('facebook_url', ''); ?>" class="page_facebook"></a>
                <a href="<?php echo ot_get_option('linkdin_url', ''); ?>" class="page_linkedin"></a>
            </div>
    <div class="logo" <?php $logo = ot_get_option("logo"); if($logo){ ?>style=<?php echo "\"background:url('".$logo."') no-repeat scroll center center transparent;\""; } ?>>
<?php if(is_home()){ ?><h1><?php } else { ?><h2><?php } ?><a href="<?php bloginfo('url'); ?>"><?php bloginfo('title'); ?></a><?php if(is_home()) {?></h1><?php } else {?></h2><?php }?>
    </div>
<?php
$ads_banners = ot_get_option('banner_header', false);
if ( $ads_banners ) {
    $today_date = date("Y-m-d");
    $today_time = strtotime($today_date);
?>
    <div class="banner">
    <?php
    foreach($ads_banners as $banner

مرسی . منو اومد بالا ، فقط دو تا مشکل داشت :

1- با هیدر تداخل ایجاد کرد ، طوریکه لوگو هم رفت وسط منو قرار گرفت .

2- از اونجاییکه استایل منوی فوتر جداست و استایل مجزا داره ، رنگ پس زمینه ی منو از بین رفته و سفید شده .

شد مثله اسکرین زیر :

menu1.png

نمیشه استایلش رو جدا کرد تا منو ، همون استایل منوی فوتر رو داشته باشه و هیدر هم استایل خودش رو داشته باشه و بشه مثله عکس اول تاپیک ؟

لینک به ارسال
در 20 دقیقه قبل، Kamali گفته است :

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

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

در مورد استایل منوی فوتر هم که اومده بالا , طبیعتا باید خودش همون استایل منوی فوتر رو داشت به خاطر اینکه شما آی دی و کلاس رو تغییر ندادید و فقط جابجاشون کردید از فوتر به هدر. 

خودتون استایل منوی فوتر که الان در هدره رو با inspect element بگیرید ببینید چیه استایلش.؟؟؟ 

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

ویرایش شده توسط logomaster
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...