Meiti

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

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

با سلام ، میخواستم بدونم چطور میتونم این عنوان سایت رو در 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 -->

post-7233-0-99870500-1410987179_thumb.jp

post-7233-0-42360300-1410987186_thumb.jp

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

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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


@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

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

به اشتراک گذاری این پست


لینک به پست

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


.site-branding{
float:right;
}

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

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

موفق باشید.

1

به اشتراک گذاری این پست


لینک به پست

نه این 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>

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

به اشتراک گذاری این پست


لینک به پست

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


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

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


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

1

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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


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

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


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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

محض اطلاعت :

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

موفق باشی

یاعلی

1

به اشتراک گذاری این پست


لینک به پست

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

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


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

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

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

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

1

به اشتراک گذاری این پست


لینک به پست

فکر می کنم با 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>

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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 اعمال بشه .

موفق باشید.

0

به اشتراک گذاری این پست


لینک به پست

سلام

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

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

3

به اشتراک گذاری این پست


لینک به پست

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

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

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

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


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

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

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


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