New user registration is currently disabled due to spam abuse / Регистрация новых пользователей в настоящее время приостановлена из-за злоупотреблений спаммерами

Changing font in tabs and Ctrl-F search field

General discussion

Changing font in tabs and Ctrl-F search field

Postby Gobaith » Tue Jul 10, 2012 12:45 am

Hi,

Could someone please help me with the settings (if any) either for article-style.css or qt-style.css that would allow me to define fonts for tabs and the Ctrl-F search field.

Thanks in advance.
Gobaith
 
Posts: 13
Joined: Mon Jul 09, 2012 10:39 pm

Re: Changing font in tabs and Ctrl-F search field

Postby chulai » Wed Jul 11, 2012 12:36 pm

Not sure about Tabs but you can style other UI components for sure. Here there is some info: viewtopic.php?f=4&t=1335&hilit=%23translateLine
chulai
 
Posts: 464
Joined: Sat Jan 08, 2011 10:11 pm

Re: Changing font in tabs and Ctrl-F search field

Postby chulai » Wed Jul 11, 2012 12:59 pm

For the Ctrl+F search field you can add to your qt-style.css file something like:

Code: Select all
ArticleView #searchText[noResults="true"]
{
  background: black;
  color: red;
}

ArticleView #searchText
{
  background: red;
  color: blue;
}
chulai
 
Posts: 464
Joined: Sat Jan 08, 2011 10:11 pm

Re: Changing font in tabs and Ctrl-F search field

Postby chulai » Wed Jul 11, 2012 1:11 pm

To style tabs you can add to your qt-style.css file:

Code: Select all
MainWindow #centralWidget QTabBar::tab {
    border: 1px solid #C4C4C3;
    border-bottom-color: #C2C7CB;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 1px 3px;
    margin-left: 1px;
    margin-bottom: 4px;
}

MainWindow #centralWidget QTabBar::tab:selected {
    background-color: #f14040;
    border-bottom-style: none;
}


This will target main window tab. If you want all your tabs styled just remove #centralWidget from above code.

For more info: http://doc.qt.nokia.com/4.7/stylesheet- ... nd-qtabbar

Regards,
Chulai
chulai
 
Posts: 464
Joined: Sat Jan 08, 2011 10:11 pm

Re: Changing font in tabs and Ctrl-F search field

Postby Gobaith » Wed Jul 11, 2012 4:15 pm

Thank you so much, chulai, everything worked like a charm.

Do you also happen to know how to access fonts in:

  • the "Found in Dictionaries" window;
  • Right-click dictionary list; and
  • tooltips on mouse hover over buttons in the dictionary bar?
Gobaith
 
Posts: 13
Joined: Mon Jul 09, 2012 10:39 pm

Re: Changing font in tabs and Ctrl-F search field

Postby chulai » Wed Jul 11, 2012 5:54 pm

Gobaith wrote:Thank you so much, chulai, everything worked like a charm.

Do you also happen to know how to access fonts in:

  • the "Found in Dictionaries" window;
  • Right-click dictionary list; and
  • tooltips on mouse hover over buttons in the dictionary bar?


1)
Code: Select all
MainWindow #dictsPane #dictsList {
   background: yellow;
   color: blue;
}


2)
Code: Select all
ArticleView #searchFrame QMenu {background-color: red}
ArticleView QMenu {background-color: green}


3)
Code: Select all
MainWindow #dictionaryBar QToolTip {
   background: red;
   color:white;
   border-width:1px;
   border-style:dashed;
   border-radius:4px
}
chulai
 
Posts: 464
Joined: Sat Jan 08, 2011 10:11 pm

Re: Changing font in tabs and Ctrl-F search field

Postby Gobaith » Wed Jul 11, 2012 7:09 pm

Wow, that was fast! Thank you for taking the time, chulai. I really appreciate your help.
Gobaith
 
Posts: 13
Joined: Mon Jul 09, 2012 10:39 pm

Re: Changing font in tabs and Ctrl-F search field

Postby ajfudge » Mon May 06, 2013 4:34 pm

First of all, thank you Gobaith for asking those questions because I was wondering about them myself. And of course, thank you Chulai for providing assistance and further resource. I'd also like to extend my thanks to Treviste because I used his css templates. :)

So I'm kinda addicted with this whole customizing GoldenDict and it wasn't very difficult at all. However, as I am not a programmer, I don't know a lot about codings and stuff. So please, if by any chance you could help me with this, I'd be very grateful.

Here's a screenshot. Directions are below the photo.
Image
1 - I can't seem to change the color of the background of this search pane, although I was able to alter the color for selection. What have I been doing wrong here?
2 - Is it possible to change the icons? How? : :)
3 - Is it also possible to change the dictionary tab AND bar color?
4 - I was able to change the appearnce of the tab but I also want to change the color of the tab bar and I don't know how to do that. Help?
5 - How do we override the webpage headings with black fonts? There are also some dictionaries that I'd like to change some colors because they contain words and phrases that become unreadable with my dark background (like heading, Parts of Speech, Sentence Example, Related Words).
6 - How do we change GoldenDict's default red highlight color?
7 - And finally, how do we override Windows' blue highlight/hover/click color?

Thank you to anyone who could assist me.
ajfudge
 
Posts: 1
Joined: Mon May 06, 2013 1:54 pm

Re: Changing font in tabs and Ctrl-F search field

Postby chulai » Thu May 09, 2013 7:16 pm

In qt-style.css:

Code: Select all

/* 1) Search Pane background color */
MainWindow #searchPane #wordList
{
   background-color: red;
   color: blue;
}

/* 2) Change nav toolbar icons */
MainWindow #navToolbar #backButton
{
   background-color: coral;
   border-image: url(':/icons/programicon.png') no-repeat center;
}


MainWindow #navToolbar #forwardButton
{
   background-color: cyan;
}

MainWindow #navToolbar #scanPopupButton
{
   background-color: darkSalmon;
}

MainWindow #navToolbar #soundButton
{
   background-color: yellow;
}

MainWindow #navToolbar #zoomInButton, MainWindow #navToolbar #zoomOutButton,
MainWindow #navToolbar #zoomBaseButton, MainWindow #navToolbar #saveArticleButton,
MainWindow #navToolbar #printButton, MainWindow #navToolbar #menuButton
{
   background-color: greenYellow;
}

/* 3) Dictionary Bar background color */
MainWindow #dictionaryBar
{
   background-color: brown;
}

MainWindow #dictionaryBar QToolButton
{
   background-color: red;
}

MainWindow #dictionaryBar QToolButton:pressed, MainWindow #dictionaryBar QToolButton:hover,
MainWindow #dictionaryBar QToolButton:checked, MainWindow #dictionaryBar QToolButton::menu-indicator:pressed,
MainWindow #dictionaryBar QToolButton:flat, MainWindow #dictionaryBar QToolButton:default
{
   background-color: green;
}


/* 4) Tab and Tab Bar color */
MainWindow #centralWidget QTabBar::tab {
    background-color: orange;
}

MainWindow #centralWidget QTabBar::tab:selected {
    background-color: blue;
}

MainWindow #centralWidget QTabBar {
   background-color: green;
}

MainWindow #centralWidget {
   background-color: yellow;
}

/* 7) Results Navigation Pane selection color */
MainWindow #dictsPane #dictsList::item:selected
{
   background-color: green;
   color: yellow;
}

MainWindow #dictsPane #dictsList::item:hover
{
   background-color: orange;
   color: white;
}



In article-style.css:
Code: Select all
/* 5) Heading text format */
.mw-headline {
   background: violet;
   color: orange;
}

/* 6) Selection color */
::selection {
  background: green;
  color: yellow;
}


Notes:
2) A new icon can be set but the default icon is hardcoded in the application so still appear on top of the custom icon. Not sure if it's possible to change GoldenDict to define default icons in a CSS so users can override these values.
3) Not sure why, when the toolbar button is pressed/checked, the CSS is ignored. Maybe someone else can help here?
5) That depends on the dictionary format you want to target. In your screenshot it seems it's a Wikipedia entry, therefore the above style.
However, in GoldenDict go to File > Save article to save the results as HTML page. Open this in a text editor and review the html (or better use the inspect element tool in Chrome browser or similar). Then you will have to override one of the styles applied in the default CSS for articles embedded in GoldenDict program: https://github.com/goldendict/goldendic ... -style.css

You can also check more CSS options available in Qt: http://doc.qt.digia.com/4.7/stylesheet-examples.html

Hope that helps.
chulai
 
Posts: 464
Joined: Sat Jan 08, 2011 10:11 pm


Return to General

Who is online

Users browsing this forum: Google [Bot] and 3 guests