CSS changes..topic.css

Find out <oXygen/> related news.
kumarmanish
Posts: 28

CSS changes..topic.css

Wed May 27, 2015 9:13 pm

Hi Team,

i want to disable all child element value in author mode on the GUI.i am editing topic.css file.
example: <category> categoryelement<data> dataelement</data> </category> text mode, but in author mode it is coming like categoryelementdataelement but i want categoryelement only on the GUI in author mode. please help me to resolve this problem.

Thanks in advance!!

Thanks,
Manish
Radu
Posts: 5096

Re: CSS changes..topic.css

Thu May 28, 2015 9:21 am

Hi Manish,

I'm sorry but I do not understand. Could you attach a small XML snippet containing the DITA content?
Also please tell me more about what you are trying to obtain, maybe post some screenshots.

Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Thu May 28, 2015 10:01 am

Hi Radu,

Thanks you for Reply.

In author mode of prolog section I want to display only direct child element not it's inner elements.

For example:

I have added one <category> element inside <prolog> with child element.

<category>categoryelement<data>DATA</data><cmdname>cmd</cmdname></category>

Authore mode of prolog section. should be shown only category element value like 'categoryelement' but in the prolog section it is showing like 'categoryelementDATAcmd', i don't want all the values in author mode of prolog section.

Thanks in Advance!

Thanks,
Manish
Radu
Posts: 5096

Re: CSS changes..topic.css

Thu May 28, 2015 10:45 am

Hi Manish,

You can probably add a CSS selector like:

Code: Select all

category > data,
category > cmdname{
    display:none !important;
}


Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Thu May 28, 2015 1:57 pm

Hi Radu,

Thank you so much.. its working fine.

Thanks,
Manish
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Thu May 28, 2015 2:46 pm

Hi Radu,

Thanks for you reply!!

when I am adding Nth <category> element with value in text mode of <prolog> section it is showing like
'Category: value1 Category: value2' in author mode of prolog section. but I want output like
'Category: value1 value2', I don't want category label should come again and again. could you please help me to resolve this problem.

For Example: In text mode:
<category>categoryelement1</category>
<category>categoryelement2</category>
.
.
<category>categoryelementN</category>
In Author mode output:
Category: categoryelement1
Category: categoryelement2
.
.
Category: categoryelementn
In Author mode output of prolog section I want like below:
Category: categoryelement1
categoryelement2
.
.
categoryelementn


Thanks in Advance!!!


Thanks,
Manish
Radu
Posts: 5096

Re: CSS changes..topic.css

Thu May 28, 2015 4:25 pm

Hi Manish,

Maybe you could do something like:

Code: Select all

category:first-child:before{
    content:"Categories: " !important;
}

category:before{
    content:"" !important;
}


In Oxygen 17.0 we have a new feature, if you right click in the Author editing mode in a certain element you can choose Inspect Styles to see all CSS styles which apply and from what CSS they are coming from:

http://www.oxygenxml.com/doc/ug-oxygen/#topics/debugging-css-stylesheets.html

Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Fri May 29, 2015 7:40 am

Hi Radu,

Thank you so so so much :)

its working fine.

Thanks,
Manish
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Fri May 29, 2015 1:17 pm

Hi Radu,


i am using oxy_textfield() function for editing the value in text box in author mode of prolog section. in oxy_textfield() function have one tooltip parameter is there. can i implement line break, and bold of character in the tooltip messages. if yes could you please give me answer.

for example:

oxy_textfield(
edit, '#text',
tooltip, 'hi this tooltip for source element.'
columns, 21);

when i am keeping tooltip is too long messages it is taking full of screen so that it is not looking good.

Thanks in Advance!!!

Thanks,
Manish
alex_jitianu
Posts: 600

Re: CSS changes..topic.css

Fri May 29, 2015 4:10 pm

Hello,

The best would be to use HTML content, like this:

Code: Select all

 oxy_textfield(
edit, "#text",
values, "first, second, third",
tooltip, '<html><p>TEST</p><p>TEST2</p></html>');


If you don't want styling but only different lines then you can break the line like this:

Code: Select all

 oxy_textfield(
edit, "#text",
values, "first, second, third",
tooltip, 'First line\A Second line');



Best regards,
Alex
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Mon Jun 01, 2015 10:02 am

Hi Alex,

Thank you so much :) .

Thanks,
Manish
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Mon Jun 01, 2015 10:40 am

Hi,

Thanks for your support!!

I want to display lables in author mode of prolog section whether i have added element or not in the text mode.

Example: when i will add this keyword element like '<keyword>keyword</keyword>'
then keyword label will display with text box but i want to display keyword lable forever either have added keyword element or not.

Thanks for Advance!!!

Thanks,
Manish
alex_jitianu
Posts: 600

Re: CSS changes..topic.css

Mon Jun 01, 2015 11:27 am

Hello Manish,

If the keyword eleemnt is not present you can't use a predefined text field form control to give a value for it. You could, of course, implement a custom form control with this behavior. If you are interested in this solution please let me know and I can provide further guidance. What you could do right now is this:
- if an element from prolog is missing a keyword element, present a button form control that when clicked inserts the keyword element. After the keyword is inserted you will automatically see the label and the text field.

The code from below illustrates this behavior for the author element. It uses the version 17.0 feature of defining the action to invoke directly in the CSS. If you are using a previous version of Oxygen you will have to define an author action inside the document type and refer it in the form control using the actionID property.

Code: Select all

*[class~="topic/prolog"]  author {
    content: oxy_button(
                action, oxy_action(
                            name, 'Insert Keyword',
                            description, 'Insert an element after the current one',
                            operation, 'ro.sync.ecss.extensions.commons.operations.InsertFragmentOperation',
                            arg-fragment, '<keyword></keyword>',
                            arg-insertLocation, '.',
                            arg-insertPosition, 'Inside as first child')
              );
}

*[class~="topic/prolog"]  author! keyword{
    content: ""
}


Best regards,
Alex
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Mon Jun 01, 2015 1:50 pm

Hi Team,

Thanks for your reply,

How to control the size and background color of the element value in author mode on the gui part of the prolog section.

ex:

Code: Select all

<source> sourceelement </source>


i want to control the size and background color of sourceelement in author mode of prolog section.

For tultip :

Code: Select all

oxy_textfield(
edit, "#text",
values, "first, second, third",
tooltip, '<html><p>TEST</p><p>TEST2</p></html>');

tooltip html code is not rendering. because i want to provide boldness on the tooltip value. this html complete code is showing in the tooltip in author mode of prolog section in 16.1.

Thanks in advance!!!

Thanks,
Manish
alex_jitianu
Posts: 600

Re: CSS changes..topic.css

Tue Jun 02, 2015 2:02 pm

Hello Manish,

A CSS rule should suffice:

Code: Select all

prolog source {
  font-size:20px;
  background-color:red;
}


As far as the tooltip is concerned, I'm not sure I understand what the problem is. The HTML from the tooltip is not rendered at all? Are you seeing the HTML tags instead of styling? My sample had no bold element but you control the styling by using different HTML elements, like this:

Code: Select all

oxy_textfield(
edit, "#text",
values, "first, second, third",
tooltip, '<html><b>TEST</b><i>TEST2</i></html>');



Best regards,
Alex
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Wed Jun 03, 2015 8:13 am

Hi,

Thanks for your reply!!!

whatever the input value i am giving in the text box that font i want to increase. i used above code it is working for the source labels in author mode of prolog section.

for example: in author mode of prolog section

Source: valuesource

I want to increase the font size of valuesource which is in a text box.

Thanks in Advance!!

Thanks,
Manish
alex_jitianu
Posts: 600

Re: CSS changes..topic.css

Wed Jun 03, 2015 9:00 am

Hi Manish,

You can set the font-size on the CSS rule and then tell the form control to inherit it. Like this:

Code: Select all

prolog source {
  font-size:20px;
  content:oxy_textfield(
    edit, "#text",
    values, "first, second, third",
    tooltip, '<html><b>TEST</b><i>TEST2</i></html>',
    fontInherit, true);
}


Best regards,
Alex
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Mon Jun 08, 2015 8:12 am

Hi,

Thanks for your reply!!!

I am using oxy_textfield function for editing the value in the text field in author mode of prolog section. Oxy_textfield have tooltip but in the tooltip I am getting some performance issue.

When I am clicking or hovering in the textbox it is not displaying tooltip on time, I have to wait 2 or 3 sec for tooltip. I want to increase the performance of the tooltip.

Any other way to implement tooltip in the textbox. So that I can achieve good performance.

Thanks for Advance!!!

Thanks,
Manish
Radu
Posts: 5096

Re: CSS changes..topic.css

Mon Jun 08, 2015 9:33 am

Hi Manish,

This is how tooltips work in any application, you need to hover over the element for 2-3 seconds in order to have the tooltip show on it. So I do not consider this a problem.

Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Wed Jun 10, 2015 10:17 am

Hi Team,

Thanks you for Reaply!!!

<image> element of author mode having some attribute like height, width .. etc. i want to control the height, width size of image in author mode directly in the textfield.

example : height: 100 100 value it should be in the text field.

Thank you in Advance!!!

Thanks,
Manish
Radu
Posts: 5096

Re: CSS changes..topic.css

Wed Jun 10, 2015 2:07 pm

Hi Manish,

You can see here details about the CSS text field form control:

http://www.oxygenxml.com/doc/ug-oxygen/#concepts/text-field-editor.html

For example you can do stuff like:

Code: Select all

image[width]:before {
    content: "Width: "
        oxy_textfield(
            edit, "@width",
            columns, 40);
    display:block;
}
image[height]:before {
    content: "Height: "
        oxy_textfield(
            edit, "@height",
            columns, 40);
    display:block;
}

image[width][height]:before {
    content: "Width: "
        oxy_textfield(
            edit, "@width",
            columns, 40) " Height: "
        oxy_textfield(
            edit, "@height",
            columns, 40);
      display:block;
}



Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Sun Jun 14, 2015 9:16 pm

Hi Team,

Thanks for your reply!!

I am getting one problem in <indexterm> element. i have implemented text box using oxy_textfield funtion for editing the value of indexterm element in the author mode but I am unable to add second level element of indexterm in author mode of prolog section. can you suggest me how i can resolve this problem.Nested indexterm I am able to add it.

Example:

Code: Select all

<indexterm> idexterm
               <indexterm> indextermchild1 </indexterm>
               <indexterm> indextermchild2 </indexterm>
            </indexterm>


Thanks in Advance!!!

Thanks,
Manish
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Mon Jun 15, 2015 2:32 pm

Hi Team,

In <Indexterm> element i am using "visibility:-oxy-collapse-text;" because of -oxy-collapse-text i am unable to add child elements in the author mode of prolog section. if i am not using visibility ("visibility:-oxy-collapse-text;") and whatever the text i am editing it is coming out of the text form controler as well.

Could you please suggest me what should i use in place of -oxy-collapse-text.

Thanks,
Manish
alex_jitianu
Posts: 600

Re: CSS changes..topic.css

Mon Jun 15, 2015 4:46 pm

Hello Manish,

You could use button form controls to allow the user to insert additional indexterm elements. Like this:

Code: Select all

indexterm:before {
    content: "\A " "Index: " oxy_textfield(
          edit, '#text',
          columns, 40)
!important;
}

indexterm:after {
    content: "\A " oxy_button(
    action, oxy_action(
          name, '+',
          description, 'Insert an element after the current one',
          operation, 'ro.sync.ecss.extensions.commons.operations.InsertFragmentOperation',
          arg-fragment, '<indexterm></indexterm>',
          arg-insertLocation, '.',
          arg-insertPosition, 'Inside as last child'
))
!important;
}

indexterm {
    visibility:-oxy-collapse-text;
}


Prior to version 17.0 these actions had to be defined in the document type and bound by actionId property.

Best regards,
Alex
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Tue Jun 16, 2015 8:53 am

Hi Alex,

Thank you for the Reply!!

When I am imlementing that code getting error below.

Code: Select all

[W3C CSS Validator (CSS3)] Context : indexterm:after in
property : content  error.action is not a valid argument
for function oxy_button : "\A " oxy_button(action,oxy
_action(name,'+',description,'Insert an element after the
current one',operation,'ro.sync.ecss.extensions.commons
.operations.InsertFragmentOperation',arg-fragment,'
<indexterm></indexterm>',arg-insertLocation,'.'
,arg-insertPosition,'Inside as last child'))
[W3C CSS Validator (CSS3)] Context : indexterm:after in
property : content  error.Unknown function: "oxy_action" : "
\A " oxy_button(action,oxy_action(name,'+',description,
'Insert an element after the current one',operation,'ro.sync.
ecss.extensions.commons.operations.InsertFragmentOperation',
arg-fragment,'<indexterm></indexterm>',arg-insertLocation,'.
',arg-insertPosition,'Inside as last child'))

Could you please help me to resolve this error.

Thanks,
Manish
alex_jitianu
Posts: 600

Re: CSS changes..topic.css

Tue Jun 16, 2015 9:13 am

Hello Manish,

In version 17.0 you can easily define an author action in the CSS but in version 16.1 you didn't have this support. The way to do it in version 16.1 is:
- edit the framework/document type and create an [url=http://oxygenxml.com/doc/versions/17.0/ug-editor/#topics/the-action-dialog.html#the-action-dialog]author action[/url]. This action must have the same configuration like I've explicitly wrote in the CSS in the above post (it must use the InsertFragmentOperation to insert an <indexterm/>). Let's say that the id of this action is insert.indexterm
- bound the action in the CSS like this:

Code: Select all

indexterm:after {
    content: "\A " oxy_button(
    actionID, 'insert.indexterm') !important;
}


Best regards,
Alex
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Tue Jun 16, 2015 9:42 am

Hi Alex,

Thanks for your reply!!

Sorry for the disturbing again and again.

I am using 16.1 but whatever the below you have post i am not getting what thing i have to do. Could you please explain more about this. how i can implement because i am new of the oxygen css.

Thanks,
Manish
alex_jitianu
Posts: 600

Re: CSS changes..topic.css

Tue Jun 16, 2015 10:48 am

Hi Manish,

I've sent you a sample framework on your email address. It should make things more clear.

Best regards,
Alex
kumarmanish
Posts: 28

Re: CSS changes..topic.css

Tue Jun 16, 2015 12:44 pm

Hi Radu,

i am using the balow code for keyword and othermeta element but it is not working.

keyword:first-child:before{
content:"Categories: " !important;
keyword:before{
content:"" !important;

Thanks,
Manish

Radu wrote:Hi Manish,

Maybe you could do something like:

Code: Select all

category:first-child:before{
    content:"Categories: " !important;
}

category:before{
    content:"" !important;
}


In Oxygen 17.0 we have a new feature, if you right click in the Author editing mode in a certain element you can choose Inspect Styles to see all CSS styles which apply and from what CSS they are coming from:

http://www.oxygenxml.com/doc/ug-oxygen/#topics/debugging-css-stylesheets.html

Regards,
Radu
Radu
Posts: 5096

Re: CSS changes..topic.css

Wed Jun 17, 2015 10:44 am

Hi Manish,

The CSS selectors:

Code: Select all

keyword:first-child:before{
content:"Categories: " !important;
}
keyword:before{
content:"" !important;
}


work for me as long as the <keyword> on which you want the Categories text to appear is the first child element in the parent element.

Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com

Return to “Announcements”

Who is online

Users browsing this forum: No registered users and 0 guests