Right to Left text on galleries and pictures caption

mgitelis · February 15, 2015

Hello,

I'm using hebrew in my site.
Is there any way to make the text on all my galleries and pictures start from Right to Left?

Thank you

Moshi

Lille Ulven · February 15, 2015

Usually it seems you would set the text-direction in your html-tag on top of your site, but this you cannot change with a smugmug page.
What could work - even though it might not be the strict to the book of rules approach is:
- set up a CSS for your entire page
- define rules for all your text-tags (p, h1-h6) which all include the following:

direction: rtl !important; unicode-bidi: bidi-override !important;

so it would look like this:

p {
  direction: rtl !important; 
  unicode-bidi: bidi-override !important;
}

h1 {
  direction: rtl !important; 
  unicode-bidi: bidi-override !important;
}

and well continued for the other elements.

This might work.
But you would have to apply this rule to every single element that contains text, including all the smugmug-elements like: .sm-gallery-description or .sm-tile-info

It looks like a lot of work but it seems doable from what I have seen in a little test-run.

Good luck.

Lille Ulven

mgitelis · February 16, 2015

Lille Ulven wrote: »
Usually it seems you would set the text-direction in your html-tag on top of your site, but this you cannot change with a smugmug page.
What could work - even though it might not be the strict to the book of rules approach is:
- set up a CSS for your entire page
- define rules for all your text-tags (p, h1-h6) which all include the following:
direction: rtl !important; unicode-bidi: bidi-override !important;
so it would look like this:
p {
  direction: rtl !important; 
  unicode-bidi: bidi-override !important;
}

h1 {
  direction: rtl !important; 
  unicode-bidi: bidi-override !important;
}
and well continued for the other elements.

This might work.
But you would have to apply this rule to every single element that contains text, including all the smugmug-elements like: .sm-gallery-description or .sm-tile-info

It looks like a lot of work but it seems doable from what I have seen in a little test-run.

Good luck.

Lille Ulven

Hi,

Thank you for you reply,
I didn't understand where exactly to put the code.

Moshi

Lille Ulven · February 16, 2015

Hi,

You're welcome. Let me see if I can come up with a better explanation of where to put the code then

You choose:
from the top menu above your site when you're logged in: Customize -> Content and Design
On your right side you'll now be able to change the content, theme, background and layout - on top of this right-side menu select "Entire Site" so that your CSS-code will be valid on all Pages, Galleries, Folders ... of your website.
Then from the Tab called "Content" you choose HTML & CSS -> CSS and move that CSS block onto your page into an highlighted area.
A dark grayish window opens with the header "CSS" and a subtitle "CSS in this block affects the entire page" into that block below that subtitle you'll have to put the code that I gave you and add some more to make it work for buttons (so far they are not having English texts on), menus and what ever else includes text in your page.
And while you're entering these code lines you'll already notice changes in the display of your website - and actually the CSS-box too, which now also will become written from right to left - which for English text looks pretty funny

Let me know if you need more information to get it done and I'll do my best to provide you with it.

Good luck

Lille Ulven

mgitelis · February 17, 2015

Hi again,

I did what you suggested. I did see that the text on the css box shifted from Left to Riht.
But, still, in my galleries, it's LTR.
anyting else i shouldhavedone.
by the way, my site is: mgitelis.com

thank you

moshi

Lille Ulven · February 17, 2015

Hi.

You'll have to do it for all these (among others):

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
direction: rtl !important; 
  unicode-bidi: bidi-override !important;
}

- Actually after a first test in Firefox (use the Web-Developer -> Tools to make changes to your code without saving it on your page right away) it looks good with these, considering from a left-to-right point of perspective the sentence seems to follow the "." and not the other way round ;-)
But you might then want to change the headline of your Contact form... Contact in english written from right to left looks a little strange

Hope this helps

Best regards

Lille Ulven

mgitelis · February 18, 2015

hi,

I've put that code in the entire site section and the whole site went to RTL but not the text.
and... when i get into the costumize area everything is one upon the other, i can't do anything else.

moshi

Lille Ulven · February 18, 2015

Hi
Can you send me a link where it does not work for the text? (And maybe write down here how it is supposed to look like for a word or two - I don't speak any rtl-written languages, so it's hard for me to see when things change and when they don't, but I might be able to figure it out tonight. Might also be depending on how you added your text. If I am right I saw from your about page yesterday that every p-tag got its own dir:"rtl" attribute.)

It will take a couple of hours though.

Lille Ulven

mgitelis · February 18, 2015

Hi Lille,

I've decided to let go and not try to make the site RTL, it's too much hustle.
Can I, insted, just, center the text in the gallery descriptions?

and another thing:

I have a sub menu, I want that the text there will be centered and I want to control the opacity of the background of the sub menu. Is that possible?

Thank you

Moshi

Lille Ulven · February 18, 2015

Hi Moshi.

OK.

If you mean for example the text below your thumbnails here should be centered: http://www.mgitelis.com/Arch1/Residential than most likely a

.sm-tile-title {
text-align: center !important;
}

should do that on either "entire page" level or for each gallery

For your sub-menus I would try this one on "entire page" level:

.yui3-menu{ 
text-align: center !important;
}

.sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator {
    opacity: 0.5 !important;
}

For a opacity value of 1 it should not be transparent at all and for a value of 0 you should be able to see right through - so you can just "play" with the numbers in between

Does that look like what you want?

You're welcome

By the way: a simple trick is to have one test folder with a gallery and a page inside which are not visible for anyone without the link to it. Than you can just play with the settings there on "this gallery-level" without changing all public galleries. And it does not hurt too much when things don't work out

Good luck

Lille Ulven

PS: I am on the MEZ timezone - so if you don't get a fast reply I am either at work or asleep

mgitelis · February 23, 2015

Thank you for all your help.

The text is centered now. the code for the opacity did change the opacity but, when i got into a gallery or folder the galleries thumbnails override the sub-menu.
and another thing:
I want to change the contact form:
1. I want to delete the headline
2. I want to change the text (email, message etc.) to hebrew and to make right to left (just there)

Thank you

Moshi

Lille Ulven · February 23, 2015

You're welcome.

Let me see what I can do for you when it comes to the contact form...

Add the following to your theme (under Theme - Advanced at the very bottom is a "link" to CSS click on that one and change the CSS it in there by adding the following):

/*Contact form hacks*/
/* Set the The Question text to your own wording */
.sm-contact-pro-form:before {
   content: "And now your message please:"; /*changed to your text of course :)*/
   direction: rtl !important; 
   unicode-bidi: bidi-override !important;
   /* you might want to change these position-parameters though:*/
   position: absolute;
   top: 215px;
   left: 200px;
}


/* Hack to hide the The Question  (hides the original "Message" text*/
.sm-contact-pro-form .sm-form-contents .sm-form-field-overhead:nth-child(4) label {
    visibility: hidden;
}

/*Changes the heading of the subject line*/
.sm-contact-pro-form .sm-form-contents .sm-form-field-overhead:nth-child(3) label{
   content:"Subject" !important;
   direction: rtl !important; 
   unicode-bidi: bidi-override !important;
}

/*changes the text of "your email-address"*/
.sm-contact-pro-form .sm-form-contents .sm-form-field-overhead:nth-child(2) label{
   content:"Your email-address" !important;
   direction: rtl !important; 
   unicode-bidi: bidi-override !important;
}

/* changes the text of "To:" */
.sm-contact-pro-form .sm-form-contents .sm-form-field-overhead:nth-child(1) label{
content:"To" !important;
direction: rtl !important; 
   unicode-bidi: bidi-override !important;
}

If you want to delete the entire "Contact"-headline without replacing it with any new text just leave the lines starting here:

.sm-contact-pro-form:before{

until and including the first "}" that should remove it completely.

Hope that helps you.

Nope - just tested it - you'll get the english text written in right to left but the text content won't change with this.
The furthest I have come so far was that I changed the "Message box" text and the subject text, but I cannot get all four headlines changed. ;-(

You might have more luck with building your own contact form with the help of a wofoo-form (or what ever that was called) - but I have no clue on how to do that, unfortunately.

Lille Ulven

mgitelis · February 25, 2015

I'll try it.
Thank you very much

Lille Ulven · February 25, 2015

You're welcome

Right to Left text on galleries and pictures caption

Comments