CSS Transform Rotate

  • 1
  • Question
  • Updated 2 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members.

Hi,

I'm trying to simply rotate a placeholder that has a text widget 90 degrees. I tried rotating the text itself using the html editor to add custom css, but it doesn't seem to understand what transform-origin of top left is.

I tried to add css style to template itself on the #ph0 element. This does not show up in the editor but works in preview. I guess very hard to design something that doesn't preview correctly and overlaps real content.

Is there another way to do this?
Photo of microalps

microalps

  • 132 Points 100 badge 2x thumb

Posted 2 years ago

  • 1
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Hi there,

This is a job best referred to the creator of the content, or we can ask our Creative team to review and if they can be of service, they will provide a quote to resolve the issues. Did you want me to ask the Creative team to review and provide a quote?

Thanks!

Photo of microalps

microalps

  • 132 Points 100 badge 2x thumb
As Darius has noted below, he experiences the same behavior with the RV Editor. Is this something your technical team can review or advise if they intend on revamping?
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Hi there,

As Darius states below, even the world gold standard html compiler Dreamweaver cannot provide you with an accurate 'design view', therefore I'm not sure this is something we would be able to fix in our Editor. 

Were you able to use Darius' recommendation of editing in a separate tool and then using Preview to see if it works as expected?
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
I must say, I personally do not see is as an issue. It is not that RV does not want to do that, it is the limitation of 'visual editor' because basically it is is the same HTML code instructions for browsers somewhat visualized (totally useless IMO, designed to help a bit people who cannot 'see the code'). I guess what RV could do is to replace 'visual editor' with 'live view' (same HTML instructions processed by the browser), but in that case any editing capabilities would be lost at the expense of accurate representation. With that said I can see a lot of people complaining for not being able to select/drag&drop placeholders.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
microalps,

That is pretty easy to do in the RV editor. Every placeholder is <div>; therefore, in editor add <style> brackets and apply styles for that placeholder as you would be normally doing for <div>.

I have played with that before: http://preview.risevision.com/?type=presentation&id=76c2e828-3c85-4ee6-a246-96585a61be78&sho...

in this case placeholders have the following properties:

<style type="text/css">
#Price {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
}
</style>
(Edited)
Photo of microalps

microalps

  • 132 Points 100 badge 2x thumb
Does this work in the editor? I did exactly this, but it shows it not rotated in the editor.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
microcalps, this does not appear correctly in the RV editor (this is different topic; I personally do not even use RV editor view as it is useless, I use preview in the browser only for that). If it looks fine in preview, then is should be OK on the display as well. Just to be sure before posting, I pushed that presentation to the display and it showed up OK.
(Edited)
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
also, I see you complaining about the editor, but it really does not affect the work if you use the editor view just for the reference and preview your work in the browser (2nd monitor comes very handy in this case). In addition, you cant blame RV for that as the world gold standard html compiler Dreamweaver also cannot provide you with the accurate 'design view.' You still need to use browser in order to get an idea what your content would look like in the browser. Personally, I use graphic design software to 'sketch' the content first: put the placeholders (divs) in the places (get the numbers, never eyeball), prepare the graphics. Then in the RV editor I simply put the placeholders where they are needed and content to them. After that I use 'Preview' option and make revisions based on that. Again, that 'design view' in the editor is good only for the quick reference, but not for the accurate work... well. it also helps to select the needed placeholder quicker then going through the list of placeholders on the side.
Photo of microalps

microalps

  • 132 Points 100 badge 2x thumb
Thanks for the confirmation of the behavior!