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.