Jump to content

עיצוב תבנית ברירת מחדל ימין שמאל - rtl css manual

pina0

By pina0
in עִבְרִית [Hebrew]

 Share

Recommended Posts

pina0 Newbie

pina0

Posted
Posted (edited)

לאחר שעות, שלא לומר ימים : -), של התעסקות מתוך רצון ללמוד קצת - הבנתי שאולי כדאי לתעד את השינוים

כיוון שמדובר על קוד פתוח שעל ערכיו כולי תקווה שאין צורך לבהר חשבתי לפתוח פוסט שיהיה בעצם מדריך מתגלגל בעברית ולתועלת הקהילה בארץ

יש כמה דרכים שאיני מתמצא בכולם ופה אני מתיחס ליצירת קובץ עיצוב לימין שמאל וכמובן כזה שהשינויים שביצענו בו הם אלה שיוצגו

 

עברית מותקנת ומלא אלמנטים מוצגים משמאל לימין. בעצם מהרגע שבלוח הניהול השפה העברית הוגדרה מימין לשמאל הכל נראה אחרת כולל תמונות הסלייד שנעלמות. אז מה עושים? ראשית יש ליצור קובץ עיצוב נוסף

לחצו כאן להכוונה

 

ע"מ לקבל "שליטה" על הקובץ שזה עתה יצרנו הדרך האלגנטית

שמצאתי היא זו (תודה לאופק אך כיוון שהשאיפה היא לעברית - אז להלן הקוד שוב) ומדויק יותר. בנתיב המובא קיים הקובץ שנערוך

themes/default/header.tpl

 

 

 

 

אחרי הקוד הבא (שנמצא בשורה 55

{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}

 

 

 

 

יש להוסיף

{foreach from=$languages key=k item=language name="languages"}
 {if $language.iso_code == $lang_iso}
{if $language.is_rtl == 1}
  <link href="{$css_dir}rtl.css" rel="stylesheet" type="text/css" media="{$media}" />
{/if}
 {/if}
{/foreach}

 

 

 

אני מניח שבמידה והחנות תשודרג יהיה צורך לערוך קובץ זה מחדש

הערה - הנתיב הוא לתבנית ברירת המחדל*

מעכשיו כל הגדרה שנכניס לקובץ

rtl.css

היא זו שתוצג וכל הקודים בהמשך מכוונים לקובץ הנ"ל

 

דף הבית החזרת הצגת הסלייד

.bx-window {direction:ltr;
}

 

 

ישור מוצרים בדף הבית מתחת לסלייד - מוצרים חדשים

.products_block li {
float: right;
}

 

 

ישור כותרת למרבית הבלוקים

 .block .title_block, .block h4 {
text-align:right;
}

 

 

ישור בלוק מוצרים נצפים כולל כותרת

 #new-products_block_right p.title_block, #new-products_block_right h4 {
text-align: right;
}

 

 

 

ישור התקדמות בסל הקניות

ul.step li {
float:right;
}

 

 

 

 

ישור לשוניות מידע, מאפינים וכו' במוצרים

ul.idTabs li {
float: right;
}

 

החסרון כרגע הוא בעיקר עם החצים. בתגובה נפרדת אעלה את האימגים הפוכים לאחר שארכז את כל הנתיבים הרלוונטים לכל אחד מהם

אצלי רוב הדברים נראים בסדר יחסית. בטח יתווספו עוד הגדרות בהמשך

תהנו ושבת שלום

Edited by pina0 (see edit history)
  • Like 1
Link to comment
Share on other sites
zwaissman Newbie

zwaissman

Posted
Posted

לאחר שעות, שלא לומר ימים : -), של התעסקות מתוך רצון ללמוד קצת - הבנתי שאולי כדאי לתעד את השינוים

כיוון שמדובר על קוד פתוח שעל ערכיו כולי תקווה שאין צורך לבהר חשבתי לפתוח פוסט שיהיה בעצם מדריך מתגלגל בעברית ולתועלת הקהילה בארץ

יש כמה דרכים שאיני מתמצא בכולם ופה אני מתיחס ליצירת קובץ עיצוב לימין שמאל וכמובן כזה שהשינויים שביצענו בו הם אלה שיוצגו

 

עברית מותקנת ומלא אלמנטים מוצגים משמאל לימין. בעצם מהרגע שבלוח הניהול השפה העברית הוגדרה מימין לשמאל הכל נראה אחרת כולל תמונות הסלייד שנעלמות. אז מה עושים? ראשית יש ליצור קובץ עיצוב נוסף

לחצו כאן להכוונה

 

ע"מ לקבל "שליטה" על הקובץ שזה עתה יצרנו הדרך האלגנטית

שמצאתי היא זו (תודה לאופק אך כיוון שהשאיפה היא לעברית - אז להלן הקוד שוב) ומדויק יותר. בנתיב המובא קיים הקובץ שנערוך

themes/default/header.tpl

 

 

 

 

אחרי הקוד הבא (שנמצא בשורה 55

{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}

 

 

 

 

יש להוסיף

{foreach from=$languages key=k item=language name="languages"}
 {if $language.iso_code == $lang_iso}
{if $language.is_rtl == 1}
  <link href="{$css_dir}rtl.css" rel="stylesheet" type="text/css" media="{$media}" />
{/if}
 {/if}
{/foreach}

 

 

 

אני מניח שבמידה והחנות תשודרג יהיה צורך לערוך קובץ זה מחדש

הערה - הנתיב הוא לתבנית ברירת המחדל*

מעכשיו כל הגדרה שנכניס לקובץ

rtl.css

היא זו שתוצג וכל הקודים בהמשך מכוונים לקובץ הנ"ל

 

דף הבית החזרת הצגת הסלייד

.bx-window {direction:ltr;
}

 

 

ישור מוצרים בדף הבית מתחת לסלייד - מוצרים חדשים

.products_block li {
float: right;
}

 

 

ישור כותרת למרבית הבלוקים

 .block .title_block, .block h4 {
text-align:right;
}

 

 

ישור בלוק מוצרים נצפים כולל כותרת

 #new-products_block_right p.title_block, #new-products_block_right h4 {
text-align: right;
}

 

 

 

ישור התקדמות בסל הקניות

ul.step li {
float:right;
}

 

 

 

 

ישור לשוניות מידע, מאפינים וכו' במוצרים

ul.idTabs li {
float: right;
}

 

החסרון כרגע הוא בעיקר עם החצים. בתגובה נפרדת אעלה את האימגים הפוכים לאחר שארכז את כל הנתיבים הרלוונטים לכל אחד מהם

אצלי רוב הדברים נראים בסדר יחסית. בטח יתווספו עוד הגדרות בהמשך

תהנו ושבת שלום

 

 

שלום,

 

יהיה פשוט יותר להעלות את הקבצים המחודשים, ולהחליפם בישנים

ניסיתי את הדרך שלך אבל זה בלגן את המחיר ועוד

 

 

בגדול, למי שרוצה לשלוט בכיוונים של כל בלוק ובלוק

יש להגיע למשל לספריית המודולים הראשית

www.yoursite.com/module

 

ולהוסיף

 

DIVלתוך ה align="right"

 

לדוגמא

blocknewproducts.tpl נכנסים ל

ומשנים ל

 

 

<!-- MODULE Block new products -->

<div id="new-products_block_right" class="block products_block" align="right">

 

כמובן שאפשר עם למרכז

align="center"

Link to comment
Share on other sites
zwaissman Newbie

zwaissman

Posted
Posted

שלום,

 

יהיה פשוט יותר להעלות את הקבצים המחודשים, ולהחליפם בישנים

ניסיתי את הדרך שלך אבל זה בלגן את המחיר ועוד

 

 

בגדול, למי שרוצה לשלוט בכיוונים של כל בלוק ובלוק

יש להגיע למשל לספריית המודולים הראשית

www.yoursite.com/module

 

ולהוסיף

 

DIVלתוך ה align="right"

 

לדוגמא

blocknewproducts.tpl נכנסים ל

ומשנים ל

 

 

<!-- MODULE Block new products -->

<div id="new-products_block_right" class="block products_block" align="right">

 

כמובן שאפשר עם למרכז

align="center"

 

אשמח לדעת אם משהו יודע איזה קובץ אחראי לצורה שבא מופיע המחיר

כרגע זה:

 

1 550,00 ₪‎

 

ואני רוצה לשנות ל

1550.00 ₪‎

Link to comment
Share on other sites
pina0 Newbie

pina0

Posted
  • Author
Posted (edited)

שלום,

 

יהיה פשוט יותר להעלות את הקבצים המחודשים, ולהחליפם בישנים

ניסיתי את הדרך שלך אבל זה בלגן את המחיר ועוד

ראשית קבל את התנצלותי. באלגן זה הדבר האחרון שהייתי רוצה לעשות לך.

לעצם העניין - גם אצלי היה שינוי בתצוגת המחיר אבל עם ניקוי המטמון זה הסתדר

במידה ואצלך המצב שונה אז להלן הקוד (אם בכ"ז תעבוד בדרך שהפוסט הזה מציע

.content_prices {
   text-align: left;
}

מעבר לזה, כיוון שממילא כל הגדרות העיצוב האלו נמצאות בקובץ אחד - כל שעלייך לעשות זה למחוק את ההגדרות והעיצוב אמור להיות כפי שהיה לפני כן.

תודה על הטיפ בנוגע לקבצי

tpl

אבל יש לקחת בחשבון כי שינוי כזה מתאים לחנות שאין בה ריבוי שפות במידה ואחת מהן היא משמאל לימין

או שפיספסתי משהו

 

שבוע טוב ומבורך

Edited by pina0 (see edit history)
Link to comment
Share on other sites
zwaissman Newbie

zwaissman

Posted
Posted

היי

באיזה קובץ אני יכול לשנות את העיצוב של המחיר ??

 

להפטר מהפסיק ומהצורה שבה האלפיות מרוחקות מהמאיות

 

 

בכל מקרה העלתי מודול ל

Fackbook Fan Box חינמי

שכולם יכולים להשתמש

 

FaceBook FanPage Module

 

אם שמשהו יש את המודול ל

LOG IN

באמצעות

FACEBOOK

אשמח עם תשתפו

Link to comment
Share on other sites
zwaissman Newbie

zwaissman

Posted
Posted

Hi Yaniv,

 

Thanks for the info. I changed it from the BO

 

I am used to work and developed modules so I neglected the basic feature in Prestashop.

 

P.S from you other post, I noticed that you were trying to change products on HomePage.

 

I gave 2 days ago an update to the code, for the products to be randomized and each time visitor will see different products.

 

I gave a way a free module for facebook fan page ( already in Hebrew ) feel free to use it

 

Do you have a module for Facebook Login. ??

Link to comment
Share on other sites
  • 3 weeks later...
pina0 Newbie

pina0

Posted
  • Author
Posted (edited)

תפריט עליון - blocktopmenu

/**************************************/
/*** ESSENTIAL STYLES ***/
.sf-contener {
clear: both;
direction: rtl;[/right]

}
.sf-right {
 margin-left: 14px;
 float: left;
 width: 7px;
}
.sf-menu, .sf-menu * {
font-size: 13px;
font-weight:bold;
margin:   0;
padding:  0;
list-style:  none;
}
.sf-menu {
margin: 10px 0;
padding:0;
width:980px;/* 980 */
background:#383838 /*#13499e;*/
}
.sf-menu ul {
position:  absolute;
top:   -999em;
width:   10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width:   100%;
}
.sf-menu li:hover {
visibility:  inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float:   right;
position:  relative;
border-right: 1px solid #777;
}
.sf-menu a {
display:  block;
position:  relative;
color:#fff;
text-shadow:0 1px 0 #333;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
right:   0;
top:   34px; /* match top ul list item height */
z-index:  99;
width:auto
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top:   -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
right:   200px; /* match ul width */
top:   0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top:   -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
right:   200px; /* match ul width */
top:   0;
}
/*** DEMO SKIN ***/
.sf-menu {
float:  left;
margin-bottom: 1em;
}
.sf-menu a {
display:block;
margin-right:2px;
padding: 0 22px 0 20px;
line-height:34px;
border: 0;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
color:   #fff;
white-space:nowrap;
}
.sf-menu li li {
background: rgba(113, 113, 113, 0.9);
}
.sf-menu li li li {
background: rgba(113, 113, 113, 0.9);
}
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  background: #4E4E4E;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
background:  #4e4e4e;
outline:  0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right:  2.25em;
min-width:  1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position:  absolute;
display:  block;
right:   10px;
top:   1.05em; /* IE6 only */
width:   10px;
height:   10px;
text-indent:  -999em;
overflow:  hidden;
background:  url('../../../modules/blocktopmenu/img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
top: 11px;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
background: url('../../../modules/blocktopmenu/img/shadow.png') no-repeat bottom right;
padding: 0 0px 0px 0;
-moz-border-bottom-left-radius: 17px;
-moz-border-top-right-radius: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
li.sf-search {
 background: inherit;
 float: right;
 line-height: 25px;
}
li.sf-search input {
 -moz-border-radius: 0 5px 5px 0;
 padding: 3px 0;
 padding-left: 20px;
 margin: 6px 6px 0 0;
 background: #fff url('../../../modules/blocktopmenu/img/search.gif') no-repeat left center;
 border:1px solid #777
}
/* hack IE7 */
.sf-menu a, .sf-menu a:visited {height:34px !IE;}
.sf-menu li li {
width:200px;
background:#726f72 !IE;
}

 

והאימג מצ"ב

post-376226-0-97802900-1361964956_thumb.png

Edited by pina0 (see edit history)
Link to comment
Share on other sites
  • 4 weeks later...
magicfingers Newbie

magicfingers

Posted
Posted (edited)

אם אפשר תוספת קטנה גם ממני :

 

יישור המחיר ברוב הבלוקים של המוצרים - כך מופיע המחיר כראוי, גם אם הפורמט אירופאי.

 

#product_list li .content_price {
direction:ltr;
}

 

בצורה זו גם סימן הש"ח נמצא בצד שמאל ולא ימין של המחיר ...

Edited by magicfingers (see edit history)
Link to comment
Share on other sites
PsMax Newbie

PsMax

Posted
Posted

את קובץ ה rtl.css המערכת טוענת בכל מקרה אם השפה מוגדרת כ rtl

לא כדאי לשנות קבצי מקור...

גם תבנית מקור לא... אבל אפשר לייצר עותק כך זה לא ישתנה כשתעדכן את המערכת

Link to comment
Share on other sites
magicfingers Newbie

magicfingers

Posted
Posted (edited)

מצורף קובץ

RTL

שהכנתי - מטפל כמעט בכל היישורים, גם של תצוגת הכספים - מכיל את כל ההמלצות כאן ועוד כמה שמצאתי לבד.

לא מצאתי היכן ניתן לשנות את הכיתוב

"cart"

בעגלה המרחפת בראש העמוד והיכן מצוי הביטוי

INFORMATION

אותו אני רוצה לתרגם ל"מידע" שמופיע בצד שמאל למטה.

 

עובד עם גרסה 1.5.4

יש לשנות את שם הקובץ ל

rtl.css

ולשתול אותו ב

/themes/default/css

 

כמו כן לא לשכוח לשנות את קובץ ה

tpl

כפי שנכתב על ידי

pina0

בתחילת הפוסט הזה.

PrestaShopRtl3-4-2013.css

Edited by magicfingers (see edit history)
Link to comment
Share on other sites
  • 1 month later...
Antonpoll Newbie

Antonpoll

Posted
Posted (edited)

magicfingersתודה רבה ל

pina0תודה רבה ל

השתמשתי בהוראות שלכם וגם בקובץ הכול תקין.

 

הוספתי רק חלק של לוגו

כול הזמן קפץ לי לצד ימין מעל סל קניות.

 

#header_logo {
position: absolute;
left: 5px;
top: 30px;
z-index: 1;
}

Edited by Antonpoll (see edit history)
Link to comment
Share on other sites
  • 1 month later...
zwaissman Newbie

zwaissman

Posted
Posted

שלום לכולם

 

אני בדר"כ משנה ישירות מהקוד. אני עובד על חנות חדשה וניסיתי את הדרך שלכם

 

העלתי את קובץ

RTL.CSS

ועדכנתי את

HEADER.TPL

 

אבל משום שאני לא עובד על

DEFAULT TEMPLATE

 

/themes/default/css

 

השינויים שלי היו על

/themes/MYTEMPLATE/css

 

הרוב נראה טוב אבל

when I am going to finalize my order

the cart summery looks funny

 

יש למשהו פתרון?

 

> Your shopping cart

SHOPPING-CART SUMMARY

  • 01Summary
  • 02Login
  • 03Address
  • 04Shipping
  • 05Payment

Your shopping cart contains: 2 products

Total products (tax excl.) ₪‎ 183.11 Total (tax excl.) ₪‎ 183.11 Total tax ₪‎ 0.00 Total ₪‎ 183.11

15-medium_default.jpg

ניסיון דוגמא איפוד

Color : Black, Disk space : 16GB

Ref.:demo_1

Unit price:₪‎ 166.39 ₪‎ 158.07

Qty:

 

Total:₪‎ 158.07 13-medium_default.jpg

BELKIN LEATHER FOLIO FOR IPOD NANO - BLACK / CHOCOLATE

 

Ref.:demo_6

Unit price:₪‎ 25.04

Qty:

 

Total:₪‎ 25.04

Link to comment
Share on other sites
yaniv14 Newbie

yaniv14

Posted
Posted (edited)

לפי מה שאתה מתאר מדובר על בעיית תרגום בלבד, כי ברגע שאתה מציג חלק באנגלית וחלק בעברית אז כל אחד מושך לצד שלו.

תתחיל בזה שתסיים את כל התרגומים החסרים.

 

סליחה, רק עכשיו שמתי לב לקישור, חסרים לך עדיין עיצוב ימין שמאל לחלק מהאתר (כמו בפוטר)

Edited by yaniv14 (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
אVי Newbie

אVי

Posted
Posted

שלום

 

עבד לי מצויין.

 

הכנתי קובץ CSS שהופך את ממשק הניהול משמאל לימין.

אך לא הצלחתי לגרום לו להיטען רק כאשר השפה היא עברית.

 

 

מישהו יכול לעזור לי עם התנאי שיקרא לCSS הזה רק אם השפה הנוכחית היא שפת RTL?

 

תודה

אVי

Link to comment
Share on other sites
  • 7 months later...
rel_dude Newbie

rel_dude

Posted
Posted

אמנם השרשור הזה ישן אבל רציתי להוסיף שבפיירפוקס יש שטח ריק גדול של גלילה ימינה שמופיע כתוצאה מהתיקונים הללו. כדי לטפל בזה יש לשנות את השדה
 

#page { text-align: right;direction:rtl;}

לזה

#page { text-align: right;direction:rtl;overflow:hidden;}
Link to comment
Share on other sites
Antonpoll Newbie

Antonpoll

Posted
Posted (edited)

שלום חברים


.אני רואה  שאתם כול זמן נתקעים  עם בעיות 


כול מה צריך לעשות זה לבנות קובץ


RTL


מאתחלה עד הסוף


כול מה שיש לכם ב


global.css


להתים לעברית בקובץ 


rtl.css


 או יש דרך אחרת... לתת למי שבאמת מבין 


פחות מחודש לקח לנו לבנות את זה - 


http://avarca.co.il/he/


 


גם רוסית גם עברית

Edited by Antonpoll (see edit history)
Link to comment
Share on other sites
  • 1 month later...
ipcomp1 Newbie

ipcomp1

Posted
Posted

 לחברה מהאתר


http://avarca.co.il/he/


 

אולי תתנו קצת טיפים למי שלא כל כך מבין ?

 


|שלום חברים"


.אני רואה  שאתם כול זמן נתקעים  עם בעיות 


כול מה צריך לעשות זה לבנות קובץ


RTL


מאתחלה עד הסוף


כול מה שיש לכם ב


global.css


להתים לעברית בקובץ 


rtl.css


 או יש דרך אחרת... לתת למי שבאמת מבין 


פחות מחודש לקח לנו לבנות את זה - 


http://avarca.co.il/he/"


 


גם רוסית גם עברית


 

Link to comment
Share on other sites
Antonpoll Newbie

Antonpoll

Posted
Posted (edited)

אין פו דברים מיוחדים

 

כל מודול צריך להירשם מחדש ב-RTL.CSS

 

לדוגמה: מיקום של לוגו באנגלית

#header_logo {
width: 205px;
height: 74px;
display: block;
position: absolute;
left: -2px;
top: 55px;
}

ואותו לוגו בעברית ב-RTL

#header_logo {
width: 205px;
height: 74px;
display: block;
position: absolute;
top: 55px;
right: -2px;
left: auto;
}

מה שינוי? 

רק מיקום. עם בלוקים אותו דבר... 

Hebrew
#left_column {
float: right;
width: 151px;
padding-top: 19px;
}

English
#left_column {
float: left;
width: 151px;
padding-top: 19px;
}

כול מילה כול פיפס קטן צריך לעבור ולסים אותו במקום שלו!

Edited by Antonpoll (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...