CSS Help

[B Kh]

I found this help page: https://www.webonary.org/help/tips-tricks/

However this instruction:

>  Go to the Webonary Dashboard. Click on “Appearance” – “Customize / Additional CSS” and add this

Doesn't seem possible as I can't see an  “Appearance”menu. Am I missing something?

[Webonary Website]

Can you tell us what you want to customise in the CSS? 

Thanks,

Peter

--
You received this message because you are subscribed to the Google Groups "Webonary-List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webonary-lis...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/webonary-list/aab25951-8ebc-489b-abae-9d39d7d3f2a0n%40googlegroups.com.

[B Kh]

To me, the individual entry page obscures the actual entry. The clear emphasis is on "Leave a Reply" and "Number of Entries". For a team developing the dictionary this may be important, but obviously for the actual user the entry is the most important. Here is the current:

And here is what I would prefer:

I don't expect you to change everything just for me. But the documentation seemed to indicate that custom css was a possibility.

FWIW, here is my quickly assembled css:

.wp-singular .mainheadword span a {
        font-size: 1.8rem!important;
        display: block;
    }
    #respond h3 {
        border: 1px none #ccc;
        font-size: 1rem;
        padding: 10px 7px;
        background-color: inherit;
        margin: 60px 5px 5px 0;
        color: #666;
        font-weight: inherit;
    }
    #respond {
        color: #666
    }
    #comment {
        background: inherit;
        height: 4rem;
    }
    input {
        background-color: inherit;
    }
    /*number of entries title*/
    #sidebar ul li h2 {
        color: inherit;
        padding: 0px;
        margin-top: 15rem;
        margin-bottom: 5px;
        font-size: 1.1em;
        font-weight: inherit;
        border: none;
        background-color: inherit;
    }
    .dictionary-stats {
        font-size: 80%
    }
    #sidebar ul li div {
        border: none 0px;
    }

[David Baines]

Hi Peter,

That's a good improvement, for the reasons that you explained. Great work!

All the best,

David

To view this discussion visit https://groups.google.com/d/msgid/webonary-list/8dd2d609-fd24-4f38-b288-52c3e2058279n%40googlegroups.com.

[B Kh]

I'm glad you liked it. I'm not really a design/css person.

As you can see I limited the headword size increase to just individual entries, however it wouldn't hurt to beef them up on the search results page too.

You can't see it in the screenshot, but I just pushed the stats to the bottom of the screen. I think they are important to have, but kind of irrelevant to the user. 

If I really had my way with things I would probably hide all of the commenting stuff behind an accordion or something. A regular user just doesn't need to see all that.

There is also a strange thing happening with the bulleted list (e.g. on this page: https://www.webonary.org/sinhala/g55c38017-db0d-4926-8bf2-86c6bddc5326/)

You can see that they go far into the margin when they should probably be indented as much in the other direction.

Oh, and I also noticed that on the search result page as well as individual entry, there is no indicator when something is a link/clickable other than the pointer changing to a finger. Web ancient standard is that links should be underlined and in blue. Of course that's kind of ugly, but some indicator would increase usability. At an absolute minimum there should be some hover effect, either adding a underline or making the underline disappear. 

For example, a user would have no idea that they could click on the word in the [compare: ] area here:

[Webonary Website]

Hello bkhpali,

Thank you for your suggestions, We see your point about the entry being obscured and will take a look at improving that section.
One thing you can do to highlight the entry and improve readability is to use colours. We usually use colours such as dark blue, dark green and dark red for different languages in the dictionary. Here is a dictionary which uses colours https://www.webonary.org/plautdietsch, but there are many others on webonary. You set the colours in FLEx in the Normal Style.

The additional CSS section is for minor tweaks of the CSS because some CSS applies to the whole site not just one page. We also need to balance allowing the sites to have an individual identity with consistancy of layout across the dictionaries. I have modified the CSS you provided and added it to your site. I removed the CSS to modify the right side because that also affects the Search page.

If you don't want comments at all they can be turned off. Then only the entry is on the left side. Let me know if you would like me to do this.

Kind regards,

Peter 

To view this discussion visit https://groups.google.com/d/msgid/webonary-list/8dd2d609-fd24-4f38-b288-52c3e2058279n%40googlegroups.com.