مشکل در راستچین کردن هدر

Meiti · شهریور 93

با سلام ، میخواستم بدونم چطور میتونم این عنوان سایت رو در header.php به سمت راست بیارم .


<div class="midhead">
<div class="container"><div class="row"><div class="col-md-12">
<div class="site-branding">
<?php if (get_theme_mod(FT_scope::tool()->optionsName . '_logo', '') != '') { ?>
<h1 class="site-title logo"><a class="mylogo" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><img relWidth="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxWidth', 0)); ?>" relHeight="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxHeight', 0)); ?>" id="ft_logo" src="<?php echo get_theme_mod(FT_scope::tool()->optionsName . '_logo', ''); ?>" alt="" /></a></h1>
<?php } else { ?>
<h1 class="site-title logo"><a id="blogname" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php } ?>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
<div class="topcart">
<?php if (class_exists('WooCommerce_Widget_DropdownCart')): ?>
<?php the_widget( 'WooCommerce_Widget_DropdownCart' ); ?>
<?php endif; ?>
</div>
</div></div></div>
</div> <!-- end-midhead -->

متاسفانه نمیتونم با col-md کار کنم و وقتی تگ align="right" رو قرار میدم title تا یه جای میاد سمت راست اما به گوشه ی صفحه منتقل نمیشه.

همچنین این کد منو هستش ، منو رو نیز میخوام راستچین کنم.


<div class="main-menu">
<div class="container"><div class="row">
<nav id="site-navigation" class="main-navigation" role="navigation">
	 <?php wp_nav_menu( array( 'theme_location' => 'primary','menu_id' => 'mti' ) ); ?>
</nav><!-- #site-navigation -->
<div class="search-button">
	 <i class="fa fa-search"></i>
</div>
</div></div>
</div> <!-- end-main-menu -->

ویرایش شده شهریور 93 توسط Meiti

فرحان · شهریور 93

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

Meiti · شهریور 93

ممنون ... اینم فایل استایل


@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);
@import url(http://fonts.googleapis.com/css?family=Lora:400italic);
/*--------------------------------------------------------------
1.0 Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
clear: both;
}
p {
margin-bottom: 1.5em;
}
b, strong {
font-weight: bold;
}
dfn, cite, em, i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 15px;
font-size: 1.5rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code, kbd, tt, var {
font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
white-space: normal;
}
abbr, acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark, ins {

text-decoration: none;
}
sup,
sub {
font-size: 75%;
height: 0;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
small {
font-size: 75%;
}
big {
font-size: 125%;
}
/*--------------------------------------------------------------
2.0 Elements
--------------------------------------------------------------*/
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul, ol {
margin: 0 0 1.5em 3em;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em;
}
dt {
font-weight: bold;
}
dd {
margin: 0 1.5em 1.5em 0;
}
img {
height: auto; /* Make sure images are scaled correctly. */
max-width: 100%; /* Adhere to container width. */
}
figure {
margin: 0;
}
table {
margin: 0 0 1.5em;
width: 100%;
}
th {
font-weight: bold;
}
/*--------------------------------------------------------------
3.0 NAVIGATIONS
--------------------------------------------------------------*/

.site-main .comment-navigation,
.site-main .paging-navigation,
.site-main .post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
.comment-navigation .nav-previous,
.paging-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.paging-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}
/*--------------------------------------------------------------
4.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar */
}
/*--------------------------------------------------------------
5.0 Alignments
--------------------------------------------------------------*/
.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin: 0 auto;
}
/*--------------------------------------------------------------
6.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
content: '';
display: table;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
clear: both;
}

/*--------------------------------------------------------------
7 Posts and pages
--------------------------------------------------------------*/
.sticky {
}
.hentry {
margin: 0 0 3em;
}
.byline,
.updated {
display: none;
}
.single .byline,
.group-blog .byline {
display: inline;
}
.page-content,
.entry-content,
.entry-summary {
margin: 1.5em 0 0;
}
.page-links {
clear: both;
margin: 0 0 1.5em;
}
/*--------------------------------------------------------------
8.0 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
display: none;
}
/*--------------------------------------------------------------
9.0 Comments
--------------------------------------------------------------*/
.comment-content a {
word-wrap: break-word;
}
.bypostauthor {
}
/*--------------------------------------------------------------
10.0 Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
display: none;
}
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
.infinity-end.neverending .site-footer {
display: block;
}
/*--------------------------------------------------------------
11.0 Media
--------------------------------------------------------------*/
.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
max-width: 100%;
}
/*--------------------------------------------------------------
12.0 Captions
--------------------------------------------------------------*/
.wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin: 0 auto;
}
.wp-caption-text {
text-align: center;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
/*--------------------------------------------------------------
13.0 Galleries
--------------------------------------------------------------*/
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-caption {}

style.css

ویرایش شده شهریور 93 توسط Meiti

فرحان · شهریور 93

سلام این کد رو در انتهای فایل استایل بزارید و نتیجه رو اطلاع بدید:


.site-branding{
float:right;
}

اگر نشد به جای site-branding از col-md-12 استفاده کنید

یا این که لینک آنلاین بدید.

موفق باشید.

Meiti · شهریور 93

نه این 2تا کد هم تاثیری نداشت .

http://www.villaforoush.com/

البته خودم این کد align = right رو در هدر اضافه کردم به همین شکل که الان میبینید کمی به سمت راست اومد. فکر میکنم با تغییر در col-md مشکلش حل شه اما نمیدونم به چه شکل


<h1 align="right" class="site-title logo"><a id="blogname" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>

ویرایش شده شهریور 93 توسط Meiti

فرحان · شهریور 93

در فایل استایل قالب در خط 51 کد زیر وجود داره :


#masthead .midhead .site-branding {
    float: left;
    width: 300px;
}

همونطور که میبینید مقدار float چپ هست باید راستش کنید : right . یا این که فایل جدیدی با نام rtl.css ایجاد کنید و همین کد رو توش بزارید.


#masthead .midhead .site-branding {
    float: right;
}

Meiti · شهریور 93

آقا من پلاگین رو نصب کردم ، قالب هم تغییر کرد اما مشکل هدر همچنان سر جاشه و با rtl کردن بلاگ هم هدر سرجاش هست ... بازم تاکیید میکنم که من فکر میکنم مشکل از col-md هستش ...

Meiti · شهریور 93

در فایل استایل قالب در خط 51 کد زیر وجود داره :
#masthead .midhead .site-branding {
float: left;
width: 300px;
}
همونطور که میبینید مقدار float چپ هست باید راستش کنید : right . یا این که فایل جدیدی با نام rtl.css ایجاد کنید و همین کد رو توش بزارید.
#masthead .midhead .site-branding {
float: right;
}

این کار رو هم انجام دادم اما متاسفانه نشد ! .... نهایتا تا همون مقداری که می بینید هدر به سمت راست میاد.

محمد امین · شهریور 93

آقا من پلاگین رو نصب کردم ، قالب هم تغییر کرد اما مشکل هدر همچنان سر جاشه و با rtl کردن بلاگ هم هدر سرجاش هست ... بازم تاکیید میکنم که من فکر میکنم مشکل از col-md هستش ...

دوست عزیز col-md میدونی چیه که میگی مشکل از اونه؟!

محض اطلاعت :

این یک از کلاسهای معروف بوت استرپ هست که از 1 تا 12 هستش و در ضمن اگر بوت استرپ قالبت زبان اصلی باشه چپ چیه ولی با عبارت !important می تونی به یکی از خاصیتهایی که در کلاس استایل عمومی ات میدی ارجهیت بدی و بگب مثلا اول اون اجر بشه . در ضمن تو کدهایی که گذاشتی col-md اصلا ندیدم!!! لطفا کل قالب رو بذار تا بچه های متخصص دانلود کنند و بتونند درست جوابت رو بدن اگر هم من وقت کردم خودم جوابت رو میدم

موفق باشی

یاعلی

Meiti · شهریور 93

http://www.fabthemes.com/cartel/

ashki0076 · شهریور 93

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

توی خط دوم رو این شکلی کنه


class="col-md-12-offset-1"

البته اون 1 آخر رو هر چی عوض کنید کل ستون رو جابجا می کنه

امتحان کنید احتمال زیاد جواب می ده

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

Meiti · شهریور 93

فکر می کنم با offset بتونی درست کنی البته اگر بر عکس عمل نکنه
توی خط دوم رو این شکلی کنه
class="col-md-12-offset-1"
البته اون 1 آخر رو هر چی عوض کنید کل ستون رو جابجا می کنه
امتحان کنید احتمال زیاد جواب می ده
اگر هم جواب نداد می تونید درستش کنید البته با یه روش خیلی پیچیده تر

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


    <h1 align="right" class="site-title logo"><a id="blogname" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>

خستم کرد واقعا فعلا حذفش کردم !

فرحان · مهر 93

سلام. ببینید حذف کردن یک پوسته راه حل نیست. بعضی از سمج ترین پوسته ها پوسته هایی هستن که از طریق فایل های php کدهای css رو دست کاری میکنن !! که اینها رو هم میشه مشکلشونو رفع کرد ( در مورد این پوسته مطمئن نیستم البته ) ولی راهی که بهتون میگم جواب دادنش تضمینی هست ، اگر جواب نداد هرچی خواستی بهم بگو.

برای حل مشکل با چنین قالب هایی ساده ترین راه این هست :

1- توی فولدر اصلی پوسته یک فایل ایجاد میکنی به نام rtl-style.css یا هر اسم دیگه ای و این کد رو بزارید توش :


#masthead .midhead .site-branding {
	 float: right;
}

بقیه ی کدهای مربوط به راست چین کردن هم باید توی همین فایل بزارید

بعد فایل header.php رو باز میکنی و بعد از تابع wp_head این کد رو میزاری :


<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/rtl-style.css" type="text/css" media="screen" />

البته توجه داشته باشید که استاندارد وردپرس این هست که شما فایل rtl درست کنید و کدهای مربوط به راست چین کردن رو توی اون بزارید ، اما بعضی طراحان به اشتباه با تعیین اولویت نادرست باعث میشن کد های خودشون (از طریق php یا فایل های css یا جاوا اسکریپت ) بعد از فایل style و فایل rtl اعمال بشه .

موفق باشید.

احسان · مهر 93

سلام

برای راست چین کردن در بوتسرپ فقط نیازه که به کلاس های هدر (یا هرجایی که نیاز به راست چین شدن داره) pull-right رو اضافه کنید

برای چپ چین کردن هم کافیه از کلاس pull-left استفاده کنید

ورود

مشکل در راستچین کردن هدر

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

Meiti 0

لینک به ارسال

فرحان 997

لینک به ارسال

Meiti 0

لینک به ارسال

فرحان 997

لینک به ارسال

Meiti 0

لینک به ارسال

فرحان 997

لینک به ارسال

Meiti 0

لینک به ارسال

Meiti 0

لینک به ارسال

محمد امین 49

لینک به ارسال

Meiti 0

لینک به ارسال

ashki0076 34

لینک به ارسال

Meiti 0

لینک به ارسال

فرحان 997

لینک به ارسال

احسان 13

لینک به ارسال

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

فهرست بخش ها

فعالیت ها