Puppy Linux Discussion Forum Forum Index Puppy Linux Discussion Forum
Puppy HOME page : puppylinux.com
"THE" alternative forum : puppylinux.info
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

The time now is Tue 27 Jun 2017, 13:48
All times are UTC - 4
 Forum index » Advanced Topics » Additional Software (PETs, n' stuff) » Eye Candy
Theme (Gtk-2) features in detail, revisited.
Post new topic   Reply to topic View previous topic :: View next topic
Page 2 of 2 [22 Posts]   Goto page: Previous 1, 2
Author Message
torm


Joined: 07 Mar 2015
Posts: 89

PostPosted: Fri 21 Apr 2017, 12:26    Post subject:  

GtkCalendar details.

It is possible to theme GtkCalendar widget.
Also if a program uses some unique namespace, it can be accessed directly from
global gtkrc, aside from "class" level design of GtkCalendar.

Note that using different font or dpi will reshape the window to a different size.
For GtkCalendar widget it is okay to use any .ttf font that is installed on the system.
The example style has all the detail comments.


Code:
style "gtk_calendar_example"
{
   xthickness = 8            # border width
   ythickness = 8            # border height
   font_name = "Fjalla One 9"   # TTF fontname, number 9 stands for fontsize

   fg[NORMAL] = "#FFFFFF"      # month, year -text
   bg[NORMAL] = "#434343"      # month, year, arrow -backg. ; leading/next-month dates-text ; window border
   bg[PRELIGHT] = "#434343"   # arrow -backg., with mouse-over
   bg[ACTIVE] = "#434343"      # arrow -backg., clicking

   text[NORMAL] = "#CCCCCC"   # dates -text
   base[NORMAL] = "#000000"   # dates -backg.
   text[SELECTED] = "#FFFFFF"   # weekday-names, clicked-date -text
   base[SELECTED] = "#26282E"   # weekday-names, clicked-date -backg.
   text[ACTIVE] = "#FFFFFF"   # may appear... for weekday-names
   base[ACTIVE] = "#000000"   #               if clicking outside of calendar area

 engine "pixmap"
 {
   image
   {
   function   = SHADOW      # outer border
   detail      = "calendar"
   recolorable   = FALSE
   shadow      = IN
   file      = "cb_1.png"
   border      = { 8, 8, 8, 8} # notice border width/height above..
   stretch      = TRUE
   }
   image
   {
   function   = SHADOW      # month, year border
   detail      = "calendar"
   recolorable   = FALSE
   shadow      = OUT
   file      = "cb_2.png"
   border      = { 3, 3, 3, 3} # to bring inner borders together..
   stretch      = TRUE
   }
   image
   {
   function   = FOCUS         # clicked date border, must be transparent on the inside
   detail      = "calendar-day"
   file      = "cf_1.png"
   border      = { 2, 2, 2, 2}
   stretch      = TRUE
   }
   image
   {
   function   = ARROW         # arrow size is 8x8 pixel for this theme
   detail      = "calendar"
   state      = NORMAL      # states are: normal and prelight ( same for active/selected )
   file      = "arn.png"
   border      = { 1, 1, 1, 1}
   stretch      = TRUE
   arrow_direction   = RIGHT
   }
   image
   {
   function   = ARROW
   detail      = "calendar"
   state      = NORMAL
   file      = "aln.png"
   border      = { 1, 1, 1, 1}
   stretch      = TRUE
   arrow_direction   = LEFT
   }
   image
   {
   function   = ARROW
   detail      = "calendar"
   state      = PRELIGHT
   file      = "arp.png"
   border      = { 1, 1, 1, 1}
   stretch      = TRUE
   arrow_direction   = RIGHT
   }
   image
   {
   function   = ARROW
   detail      = "calendar"
   state      = PRELIGHT
   file      = "alp.png"
   border      = { 1, 1, 1, 1}
   stretch      = TRUE
   arrow_direction   = LEFT
   }
 }
}
class "GtkCalendar" style "gtk_calendar_example"




Screenshot shows gsimplecal with different themes, appearing on BMPanel2 click above clock.
gtkcalendar-examples.png
 Description   
 Filesize   36.35 KB
 Viewed   149 Time(s)

gtkcalendar-examples.png

Back to top
View user's profile Send private message 
torm


Joined: 07 Mar 2015
Posts: 89

PostPosted: Fri 21 Apr 2017, 12:35    Post subject:  

Below is a .pet package of gsimplecal-v2.1 precompiled for tahrpup605(32bit) with Gtk-2
and configured settings to look/act the same as on screenshot.
Executable is modified to have direct theme support from global gtkrc, so it
can have any look possible -without altering any other widget or application that
uses GtkCalendar widget.
gsimplecal will install to "my-applications/bin" folder, documentation like
README and example sub-theme.rc will go in "my-documents" folder, under "gsimplecal_plus".
Setting to current locale should be automatic (including week-start-day, etc. ) .
If selected font does not support locale glyphs, edit sub-theme.rc to use some
other font that does.
Double-clicking on calendar dates-area will bring up "Osmo" and close calendar.
To use with BMPanel2 add to bmpanel2rc ( in /root/.config/bmpanel2/.. ) a simple line:
clock_prog gsimplecal
For JWM change in /root/.jwmrc-tray from: <Clock format="%H:%M">PupClockset</Clock>
to: <Clock format="%H:%M">gsimplecal</Clock>

Please read the manual for more options.
When in doupt, use gsimplecal version provided in PPM of your flavor of PuppyLinuxOS.


-------------
CHANGELOG for gsimplecal mod.
-------------

MainWindow.cpp as line 101 added:
Code:
    gtk_widget_set_name(widget, "gsimplecal");


Calendar.cpp as line 37 added:
Code:
    gtk_widget_set_name(widget, "gsimplecalendar");


-------------
When compiling it from source, try:
./configure --enable-gtk2

------------------------------------------------

Mainwindow widget will appear if "show_timezones" is set to "1" and so there can be
a different look for font/color/bg of that item.
I don't think the clock label will update...

------------------------------------------------

Configuration file should be installed as /root/.config/gsimplecal/config

clock_format =%A %x
-notice extra whitespace after "%A" ?
-typing in terminal:
date --help
..will list all possible formats to use
-typing in terminal:
man gsimplecal
..should open the gsimplecal manual for more details

------------------------------------------------

To use included calendar sub-theme, copy the "calendar" folder to whatever theme in
/usr/share/themes/whatever-theme-name/gtk-2.0/..
then open the gtkrc of that theme and add at the top:
include "calendar/sub-theme.rc"
..and re-select the theme.

Note.
When editing the look of calendar, changes may appear without the need to restart
the gtk2 theme in the middle of process, just restart the calendar for that.
When done, don't forget to re-select the gtk2 theme Wink


PS.
Fjalla One.ttf and TekoRegular.ttf fonts are included in "fonts.pet" package in one of
previous posts.
gsimplecal.pet
Description 
pet

 Download 
Filename  gsimplecal.pet 
Filesize  21.3 KB 
Downloaded  10 Time(s) 
Back to top
View user's profile Send private message 
torm


Joined: 07 Mar 2015
Posts: 89

PostPosted: Wed 17 May 2017, 11:07    Post subject:  

Alternative Gtk2-based calendar.
Made for BMPanel2/IceWM, while it can be used for some other desktop.

Features:
- bare minimal GtkCalendar, shows current month with today marked
- independent rc-file, so looks just the same with any Gtk2 theme
- double-click on date to start external script
( "calendar_clicked" in /root/my-applications/bin/ folder, starts Osmo by default )
- configured to close on focus-out, or click on upper pixmap area.


Install.
.pet package has precompiled binary for TahrPup605(32bit)
Source, makefile and README are included, no special dependencies.
Font is provided.
NB! You may need to reload window manager or panel ( etc. ) after
editing configuration files for changes to take effect.


Roadmap:
calendar_clicked, cal-runner scripts go to /root/my-applications/bin/ folder,
/root/my-applications/calendar-folder is for theme, binary and data,
Baumans-Regular.ttf font to usual /usr/share/fonts/default/TTF folder.


Notes.
README file may give some hints on use, please read it.
Feel free to suggest better code, designs
or name for the calendar.
Smile
calendar-01.pet
Description  Gtk2 calendar, theme and font
pet

 Download 
Filename  calendar-01.pet 
Filesize  47.13 KB 
Downloaded  7 Time(s) 
screenshot_calendar_00.png
 Description   month/weekday names and weekend will follow locale settings
 Filesize   51.69 KB
 Viewed   91 Time(s)

screenshot_calendar_00.png

Back to top
View user's profile Send private message 
zigbert


Joined: 29 Mar 2006
Posts: 6436
Location: Valåmoen, Norway

PostPosted: Wed 17 May 2017, 16:47    Post subject:  

Thank you for sharing all your knowledge. This thread is getting really good.
I need time to go through all this to learn gtk-theming deeper.

Sigmund

_________________
Stardust resources
Back to top
View user's profile Send private message Visit poster's website 
torm


Joined: 07 Mar 2015
Posts: 89

PostPosted: Fri 02 Jun 2017, 10:13    Post subject:  

Sometimes it helps to know where to hit in Gtk2. Smile
Back to top
View user's profile Send private message 
torm


Joined: 07 Mar 2015
Posts: 89

PostPosted: Fri 02 Jun 2017, 10:18    Post subject:  

Audacious mediaplayer (ver-3.8.2) and Gtk2.

Some notes on Gtk2 skins and icons.
Gtk2 look can be changed runtime, both the ordinary and the "skin" look.
Skinned window is just GtkFixed, I think.. Wink

Here's a full "default settings and locations" skin.hints list.
Locations are set for upper-left corner of skin detail.

------------------------------------------
Code:

# Hints for skin detail locations.

[skin]
# player window size in pixels.
mainwinWidth = 275
mainwinHeight = 116

# true=1 and false=0
mainwinMenurowVisible = 1
mainwinStreaminfoVisible = 1
mainwinOthertextIsStatus = 0

# does not support locale specific glyphs, use TTF fonts instead.. from settings.
# size in pixels
textboxBitmapFontWidth = 5
textboxBitmapFontHeight = 6

# scrolled filename text
mainwinTextX = 112
mainwinTextY = 27
# width in pixels
mainwinTextWidth = 153
# is visible? true=1 and false=0
mainwinTextVisible = 1

# visualisation graphics in main window
mainwinVisX = 24
mainwinVisY = 43
mainwinVisVisible = 1

# info about KHz, Kb-PS and stereo/mono details
mainwinInfobarX = 112
mainwinInfobarY = 43
mainwinOthertextVisible = 0

# location of min/sec counter numbers ( ..also minus and empty )
mainwinNumber0X = 36
mainwinNumber0Y = 26
mainwinNumber1X = 48
mainwinNumber1Y = 26
mainwinNumber2X = 60
mainwinNumber2Y = 26
mainwinNumber3X = 78
mainwinNumber3Y = 26
mainwinNumber4X = 90
mainwinNumber4Y = 26

# play/pause/stop interactive indicator icon
mainwinPlaystatusX = 24
mainwinPlaystatusY = 28

# volume slider
mainwinVolumeX = 107
mainwinVolumeY = 57

# balance slider
mainwinBalanceX = 177
mainwinBalanceY = 57

# position(progress) slider/indicator
mainwinPositionX = 16
mainwinPositionY = 72

# "Previous" button
mainwinPreviousX = 16
mainwinPreviousY = 88

# "Play" button
mainwinPlayX = 39
mainwinPlay_y = 88

# "Pause" button
mainwinPauseX = 62
mainwinPause_y = 88

# "Stop" button
mainwinStopX = 85
mainwinStop_y = 88

# "Next" button
mainwinNextX = 108
mainwinNext_y = 88

# "Eject" button
mainwinEjectX = 136
mainwinEject_y = 89

# "Equalizer Window Open/Close" button
mainwinEqbuttonX = 219
mainwinEqbuttonY = 58

# "PlayList Window Open/Close" button
mainwinPlbuttonX = 242
mainwinPlbuttonY = 58

# "Shuffle" button
mainwinShuffleX = 164
mainwinShuffleY = 89

# "Repeat" button
mainwinRepeatX = 210
mainwinRepeatY = 89

# "About" button... as "main.png" area?
mainwinAboutX = 247
mainwinAboutY = 83


# window-manager "replacement" buttons
mainwinMinimizeX = 244
mainwinMinimizeY = 3
#
mainwinShadeX = 254
mainwinShadeY = 3
#
mainwinCloseX = 264
mainwinCloseY = 3


------------------------------------------



pledit.txt parsing ( default playlist colors )
------------------
Code:

[Text]
Normal=#2499ff
Current=#ffeeff
NormalBG=#0a120a
SelectedBG=#0a124a


------------------------------------------


viscolor.txt parsing ( default visualisation colors )

Code:
  9,  34,  53
 10,  18,  26
  0,  54, 108
  0,  58, 116
  0,  62, 124
  0,  66, 132
  0,  70, 140
  0,  74, 148
  0,  78, 156
  0,  82, 164
  0,  86, 172
  0,  92, 184
  0,  98, 196
  0, 104, 208
  0, 110, 220
  0, 116, 232
  0, 122, 244
  0, 128, 255
  0, 128, 255
  0, 104, 208
  0,  80, 160
  0,  56, 112
  0,  32,  64
200, 200, 200



------------------------------------------


region.txt parsing (skinned windows in shaped window mode)
------------------

I don't think there is a "default" setting for it, while it may be to some interest..
A bit of a trial-and-error suggestion here, so please take it with a grain of salt Smile
The window can be also shaped for top area only, as shown for example 2 below.

window names are:
[Normal] is skinned mainwindow in "normal" state
[windowshade] is skinned mainwindow in "shaded (14 pixel stripe-look)" state
[equalizer] is skinned equalizerwindow in "normal" state
[equalizerws] is skinned equalizerwindow in "shaded (14 pixel stripe-look)" state

------------------
Code:
# all four corners rounded
[Normal]
NumPoints=4,4,4,4,4
PointList=5,0 270,0 270,116 5,116 3,1 272,1 272,115 3,115 2,2 273,2 273,114 2,114 1,3 274,3 274,113 1,113 0,5 275,5 275,111 0,111

------------------

------------------
Code:
# only top area rounded
[Normal]
NumPoints=4,4,4,4,4
PointList=5,0 270,0 270,116 5,116 3,1 272,1 272,116 3,116 2,2 273,2 273,116 2,116 1,3 274,3 274,116 1,116 0,5 275,5 275,116 0,116


------------------------------------------
Back to top
View user's profile Send private message 
torm


Joined: 07 Mar 2015
Posts: 89

PostPosted: Fri 02 Jun 2017, 10:26    Post subject:  

Audacious mediaplayer (ver-3.8.2) and Gtk2, continued.
Missing icons for (not skinned)mainwindow and tray-menu.
------------------

It will only apply for PuppyLinuxOS versions that do not have a "full" icon-theme preinstalled.
As far as TahrPup605 is one of them and I don't have any interest to install some 100MB+
icon-theme, here's what I did:
1. What icons are missing in "stock" and "hicolor" sets?
2. What icons should I add/replace for more "solid" look?
3. Make icon-theme for toolbar(24x24) and menus(16x16) with only needed items.
4. Apply the icon-theme. ( and stock+hicolor will still work as "fallback" )


If current Gtk2 theme does not change the toolbar-icon-size or menu, then it should be 24x24
and menu-icon-size be 16x16.
------
Audacious has the following icons on toolbar:
--
audacious -audacious.png ( also a desktop and tray icon ) [48x48/apps]
edit-find -used also elsewhere, could look better [24x24/actions]
document-open -used also elsewhere, could look better [24x24/actions]
list-add -used also elsewhere, could look better [24x24/actions]
media-skip-backward - ! missing, don't use ltr/rtl variants [24x24/stock/media]
media-skip-forward - ! missing, don't use ltr/rtl variants [24x24/stock/media]
media-playback-start - ! missing, don't use ltr/rtl variants [24x24/stock/media]
media-playback-pause -used also elsewhere, could look better [24x24/stock/media]
media-playback-stop -used also elsewhere, could look better [24x24/stock/media]
media-record -used also elsewhere, could look better [24x24/stock/media]
-
-
media-playlist-repeat - ! missing [24x24/stock/media]
media-playlist-shuffle - ! missing [24x24/stock/media]
-
audio-volume-low -used also elsewhere, could look better [24x24/status]
audio-volume-medium -used also elsewhere, could look better [24x24/status]
audio-volume-high -used also elsewhere, could look better [24x24/status]
audio-volume-muted -used also elsewhere, could look better [24x24/status]
------


For TRAY-menu there can be 16x16 icons:
--
document-open -used also elsewhere, could look better [16x16/actions]
media-skip-backward - ! missing, don't use ltr/rtl variants [16x16/stock/media]
media-playback-start - ! missing, don't use ltr/rtl variants [16x16/stock/media]
media-playback-pause -used also elsewhere, could look better [16x16/stock/media]
media-playback-stop -used also elsewhere, could look better [16x16/stock/media]
media-skip-forward - ! missing, don't use ltr/rtl variants [16x16/stock/media]
-
preferences-system - ! missing, used also elsewhere [16x16/categories]
application-exit -used also elsewhere, could look better [16x16/actions]
------


For FILE-menu the above tray-icons will work, and few more will be needed, can be 16x16 icons:
--
go-jump - ! missing, used also elsewhere [16x16/actions]
insert-text - ! missing, used also elsewhere [16x16/actions]
audio-x-generic - ! missing, used also elsewhere? [16x16/actions]
multimedia-volume-control- ! missing, used also elsewhere? [16x16/actions]
------


So it is time to make a icon-theme.
In /usr/share/icons/ made a folder with a name "missing_it" and inside that folder a file
named "index.theme" with the following content:

------
Code:
[Icon Theme]
Name=missing_it
Comment=missing_it
Directories=16x16/actions,16x16/categories,16x16/stock/media,24x24/actions,24x24/status,24x24/stock/media,48x48/apps

[16x16/actions]
Size=16
Context=Actions
Type=Threshold

[16x16/categories]
Size=16
Context=Categories
Type=Threshold

[16x16/stock/media]
Size=16
Context=Stock
Type=Threshold

[24x24/actions]
Size=24
Context=Actions
Type=Threshold

[24x24/status]
Size=24
Context=Stock
Type=Threshold

[24x24/stock/media]
Size=24
Context=Stock
Type=Threshold

[48x48/apps]
Size=48
Context=Apps
Type=Threshold

------

...that counts the folders this icon-theme has.
Then made folders and add missing icons to them.
------


Apply the icon-theme.
For that open /root/.gtkrc.mine ( a hidden file ) and change the content to:
------
Code:
gtk-icon-theme-name="missing_it"

------
..then restart X for changes to take effect.

--
As an aternative one could add:
gtk-icon-theme-name="missing_it"
..to the beginning ( before any "style" ) in gtkrc of favorite Gtk2 theme, or
use bright-colored icons for dark Gtk2-theme / and dark icons for brighter Gtk2 theme..
so it stands out better and changes according to theme.
And leave /root/.gtkrc.mine to whatever it currently is ( "ROX" by default? ) .
--

Same method can be used to add/replace any other icons.
If there is only few icons that needs to be added ( not replaced ) -just drop them to
/usr/share/icons/hicolor/.. in correct folder, and restart X.

I hope it is of some use.. Smile
Audacious_with_Faenza_icons.png
 Description   Audacious with small set of Faenza icons..
 Filesize   64.84 KB
 Viewed   37 Time(s)

Audacious_with_Faenza_icons.png

Back to top
View user's profile Send private message 
Display posts from previous:   Sort by:   
Page 2 of 2 [22 Posts]   Goto page: Previous 1, 2
Post new topic   Reply to topic View previous topic :: View next topic
 Forum index » Advanced Topics » Additional Software (PETs, n' stuff) » Eye Candy
Jump to:  

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum


Powered by phpBB © 2001, 2005 phpBB Group
[ Time: 0.1450s ][ Queries: 15 (0.0153s) ][ GZIP on ]