CSS for .entry> .adjective-suffixes:before and after

Dictionary App Builder
1

Hello,

I’ve been able to do some customization on CSS as per our needs until now, but I’m stuck with this one.

We need to add “{+” before .entry> .adjective-suffixes and “}” after it, but DAP is not assuming the CSS code added on the modifications tab.

I’ve tested to add some CSS also to .entry> .adjective-suffixes but it is also ignored.

The same for .entry> .allomorphs .allomorph> .form> span:first-child:before and after.

Any idea on what could be wrong?

We would like to replicate the webonary version:
https://www.webonary.org/pular?s=ɓale&search=Rechercher&key=fuf-GN&tax=&search_options_set=1&match_whole_words=1&lang=en

Thank you very much,
David

2

Can you show me what you have added and tried? A copy of the CSS is the simplest way.

3

Hello Ian,

You are super fast :pray:t3:

Here you have it:

.entry> .adjective-suffixes:before{
content: ‘{+’;
}

.entry> .adjective-suffixes:after{
content: ‘}’;
}

.entry> .allomorphs .allomorph> .form> span:first-child:before{
content: ‘(’;
}

.entry> .allomorphs .allomorph> .form> span:first-child: after{
content: ‘)’;
}

Thank you
David

4

Is that exactly what you have? Because I see typographic quotes in there, but I believe they are supposed to be straight quotes, i.e. content: ‘{+’; should actually be content: '{+';

Also, have you had success with CSS modifications before? Because at one point in time the CSS overrides didn’t get transferred from FLEx to DAB. Maybe it would be good to specify where you are making those CSS modifications.

5

Hello jheat,

Thanks for helping with this. Your various posts regarding CSS were a big help to me at the beginning.

You are right, we need to use the straight quotes and that’s what I’m using. That’s a common error sometimes when we get too sleepy :slight_smile:

Just for clarification, I’m only in charge of the Android app.
So on each update, I receive Flex exported lexicon files and do the update. We are using different CSS versions for webonary and for the Android app. Usually, I don’t need to add new custom CSS code. I did the huge work at the beginning.

So, on each update, after importing the lexicon files, I just copy the CSS from the old APPDEF file, and paste it on the new one. I need to do this as the CSS for single entry gets overwritten after importing new lexicon files (don’t understand why as I don’t see it on the lexicon CSS file). These method works very well. I’m always able to keep our precious custom formatting for single entry and I can see the code also on DAP Styles Modifications tab.

This time, I need to add custom CSS code, as the vocabulary manager added two new fields to the lexicon (adjective-suffixes and allomorphs). But all CSS code applied to these classes is ignored. I’ve also tried to change the text color and it’s also ignored.

I hope I’ll be able to find a solution for it.

Best regards,

6

I’ve found a way that works :slight_smile:

Added the CSS code manually into the APPDEF file on the section of the imported styles.

 <styles>
    <style name=".entry&gt; .adjective-suffixes:before" category="imported">
      <style-decl property="content" value="&apos; {+ &apos;"/>
    </style>
    <style name=".entry&gt; .adjective-suffixes:after" category="imported">
      <style-decl property="content" value="&apos;} &apos;"/>
    </style>
    <style name=".entry&gt; .allomorphs .allomorph&gt; .form&gt; span:first-child:before" category="imported">
      <style-decl property="content" value="&apos;(&apos;"/>
    </style>
    <style name=".entry&gt; .allomorphs .allomorph&gt; .form&gt; span:last-child:after" category="imported">
      <style-decl property="content" value="&apos;)&apos;"/>
    </style>

After adding the code into the file, I’ll open DAP and I’ll find the code on the Styles Imported Styles tab. I was able to modify the content here.

I would love to understand why the code doesn’t work if added on the Modifications tab.

7

Are you using the CSS tab to enter the property and value? I have not seen anything not work in that area before.

The > after .entry says that the element with the class adjective-suffix is an immediate child of the element with the entry class. If that is working, then that must be the case.

I’d like to see a snipper of an entry. I assume this is a reversal. Then I can test your entry problem.

8

Hello McQuay,

Just for clarification, this issue happens using the XHTML version.

I’ve tried to add a new CSS code, and had the same issue again. After some time, I remembered to check what was the issue I had in the past, and I was glad to find this post.

This time I was trying to add just the .scientificname class with the font style italic. If I added this using the Modifications tab, it was completely ignored.
I added it directly on the APPDEF file with category imported, and it works. The code shows on the Imported Styles tab then. It must be a bug, as it’s my second time to have the same issue.

I would like also to know if there’s some way to use the ProjectCssOverride file? Because each time I get the lexicon files, I need to manually copy the custom css code from the older APPDEF file and put it on the new file.
I would like to have a more professional way to deal with custom CSS code.

Thank you very much for the help

9

Got it!

The tab Modifications it’s for single entries styles only. If we need to modify the definition styles, the workaround is to insert the code on the APPDEF file with category=“imported”. This way we get the style to show on the Imported Styles and we can edit it there.

Any alternative to this method?

10

@David_Duarte I am not on the support team any more.

If you want to modify the .scientificname then do a search in Imported Styles and modify it there. Then don’t forget to save. Often the CSS from Flex over specifies the selectors, so make sure you get the one you want to target. And maybe you want to target more than one place, if your dictionary is root based.

I modified .scientificname, saved, exited, and came back in, and the property I added was still there.

I can’t reproduce losing a property I set.

There are very few times you need to edit the .appdef file. If you are targeting a lesser used HTML element, DAB may save it as a class (with a dot in front) and not an element. That is a time that editing the .appdef is needed.

But good, you know your XML rules, and can do that without breaking the .appdef file. Not an average user skill.

11

Hello McQuay,

Too bed that we can’t count with you precious experience anymore :disappointed_relieved:. Thank you for answering to this anyway​:pray:t4:

Actually, I don’t have any issue to get some CSS modification saved on the Imported styles tab. Just that the class .scientificname was not there at all. That’s why I needed to manually add it to the .appdef file in order to get it on the tab, and then to be able to get the style applied on the dictionary app.

I understand that’s a very complex app done for volunteers by volunteers, so what we have it’s already amazing, and we just need to find the way to do what we need, as almost everything is possible with this tool.

I wish you all the best for you life.
David