Jump to content
Sign in to follow this  
Sourena

PlatformPro and RTL

Recommended Posts

Sourena

I created an rtl.css in the theme PlatformPro, added this style to it:

ul.item-list div.item-avatar {
	  float:right;
	}

but it did not work. The members page still shows the avatars floated to the left. Then I added this style to "Custom Code" under the theme's Settings and saved it. But it did not have any effect on the theme either. What do I do incorrectly? The page is here: http://goftogoo.org/members/


alefba.us

Web Development & Design for Right-to-Left languages

Share this post


Link to post
Share on other sites
cmunns

Are you sure that rtl.css is the bit of CSS being loaded? Also, try adding body to the front of the selector. Update coming soon for dynamic (custom) css loading hierarchy

Share this post


Link to post
Share on other sites
Sourena

I created an RTL child theme for this framework. There are two places that I still have problem with. The first one is the Twitter bar. How can I move the background logo to the right? Here is the style:

#twitterbar .content .tbubble {
	background:url("../images/twitter-balloon.png") no-repeat scroll 0 12px transparent;
	color:#888888;
	font-style:italic;
	padding:12px 25px;
	}
The next issue is the Callout button. How can I move it to the left? Here is a screenshot for both issues: Screenshot-callout.png The other issue is the comment image. Again the image is in the background:
h3#comments-title {
	background:url("../images/icon-comment.png") no-repeat scroll 0 3px transparent;
	padding-left:22px;
	}

and here is the screenshot: Screenshot-comments.png I could not find a way to move it to the right.


alefba.us

Web Development & Design for Right-to-Left languages

Share this post


Link to post
Share on other sites
cmunns

You would change the background property to something like this `background:url("../images/twitter-balloon.png") no-repeat scroll center right transparent`

Share this post


Link to post
Share on other sites
Sourena

In theory what you suggest here should work and it works on FireBug correctly. But when I add the actual code to the CSS it does not. The background disappears. Here is the code

#twitterbar .content .tbubble {
	background:url("../images/twitter-balloon.png") no-repeat scroll right center transparent;
	font-style:italic;
	padding:12px 25px;
	}

Apply it to your site and see how the background disappears.


alefba.us

Web Development & Design for Right-to-Left languages

Share this post


Link to post
Share on other sites
Andrew

if it works in firebug; then usually you need to apply more specificity to get it working right. try adding `#page` out front of the rule

Share this post


Link to post
Share on other sites
Sourena

I don't understand where I need to place it. Would you write the code here?


alefba.us

Web Development & Design for Right-to-Left languages

Share this post


Link to post
Share on other sites
cmunns

This works in FireBug for me: ` #twitterbar .content .tbubble { background:url("../images/twitter-balloon.png") no-repeat scroll right center transparent; color:#888888; font-style:italic; padding:12px 25px; } ` If the image disappears all together that is strange, you have a link to the site you're using it on (not with SocialPress)

Share this post


Link to post
Share on other sites
Sourena

Yes. Here is a sample post: http://kermeketab.com/news/kopoli The background disappears. I copy-pasted the code you suggested to "Custom Code" in PlatformPro settings and saved it. Unfortunately it does not work as you see in the page.


alefba.us

Web Development & Design for Right-to-Left languages

Share this post


Link to post
Share on other sites
Sourena

Would you please help me with this? These backgrounds do not appear on the right.


alefba.us

Web Development & Design for Right-to-Left languages

Share this post


Link to post
Share on other sites
bryan-hadaway

` #comments h3#comments-title { background: url("../images/icon-comment.png") no-repeat scroll 560px 3px transparent; padding-left: 22px; padding-right: 25px; } #page-main #twitterbar .content .tbubble{background:url("../images/twitter-balloon.png") no-repeat scroll 940px 12px transparent} ` Thanks, Bryan

Share this post


Link to post
Share on other sites
Sourena

Again, it disappears instead of showing up on the right, Bryan.


alefba.us

Web Development & Design for Right-to-Left languages

Share this post


Link to post
Share on other sites
bryan-hadaway

That's odd... it's working for me in Firefox. What browser is the problem happening in for you? Thanks, Bryan

Share this post


Link to post
Share on other sites
Sourena

All browsers. Can I create an account in my website and give you access to it? I think that helps a lot if you have access to an RTL website directly and see it there on different platforms and different browsers.


alefba.us

Web Development & Design for Right-to-Left languages

Share this post


Link to post
Share on other sites
cmunns

did you try adding more specificity like bryan attempted with his code? For example: ` body #twitterbar .content .tbubble { background:url("../images/twitter-balloon.png") no-repeat scroll } ` I checked your site and it looked like pro.css selector was still being used. If the code above does not work then email us with account info.

Share this post


Link to post
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

Sign in to follow this  

×