From Fedora Project Wiki
No edit summary
(Use year template)
 
(14 intermediate revisions by 5 users not shown)
Line 39: Line 39:
Image:Artwork_ThemingOverview_01f7.png|Fedora 7
Image:Artwork_ThemingOverview_01f7.png|Fedora 7
Image:Artwork_ThemingOverview_01f8.png|Fedora 8
Image:Artwork_ThemingOverview_01f8.png|Fedora 8
Image:Artwork_F9Themes_Waves_Round3Final_waves-syslinux1-preview.png|Fedora 9
Image:Screen_Prompt_640x480_color_test.png|Fedora 10
</gallery>
</gallery>


Line 71: Line 73:
| '''Colors:''' || No color limitations.
| '''Colors:''' || No color limitations.
|-
|-
| '''NOTE:''' || Image01 should include the following Copyright text: ''Copyright (C) 2003 - 2006 Red Hat, Inc. and others. All rights reserved.''
| '''NOTE:''' || Image01 should include the following Copyright text: ''Copyright (C) 2003 - {{CURRENTYEAR}} Red Hat, Inc. and others. All rights reserved.''
|-
|-
| ||
| ||
Line 124: Line 126:
Image:Artwork_ThemingOverview_03f7.png|Fedora 7
Image:Artwork_ThemingOverview_03f7.png|Fedora 7
Image:Artwork_ThemingOverview_03f8.png|Fedora 8
Image:Artwork_ThemingOverview_03f8.png|Fedora 8
Image:Solar_Anaconda_splash_progress_mockup.png|Fedora 10
</gallery>
</gallery>
|}
|}
Line 165: Line 169:
Image:Artwork_ThemingOverview_06f7.png|Fedora 7
Image:Artwork_ThemingOverview_06f7.png|Fedora 7
Image:Artwork_ThemingOverview_06f8.png|Fedora 8
Image:Artwork_ThemingOverview_06f8.png|Fedora 8
Image:Artwork_F9Themes_Waves_Round3Final_waves-firstboot.png|Fedora 9
Image:WelcomeScreenMockup.png|Fedora 10
</gallery>
</gallery>
|-
|-
Line 199: Line 205:
Image:Artwork_ThemingOverview_04fc5.png|Fedora Core 5
Image:Artwork_ThemingOverview_04fc5.png|Fedora Core 5
Image:Artwork_ThemingOverview_04fc6.png|Fedora Core 6
Image:Artwork_ThemingOverview_04fc6.png|Fedora Core 6
Image:Artwork_F9Themes_Waves_Round3Final_waves-grub.png|Fedora 9
Image:GRUB_F10_Solar-preview.png|Fedora 10
</gallery>
</gallery>
|}
|}


=== RHGB (Red Hat Graphical Boot) ===
=== Plymouth ===
Plymouth is a replacement to RHGB which starts even earlier (before / is mounted) but reather than using Xorg it uses the frame buffer device to show graphics while the system is booting. Different boot splash screens are available though numerous plugins, which in fedora are distributed separately from the base (plymouth-plugin-*). If the kernel console mode is set to a graphical vga mode (add vga=0x318 to the kernel line), the default graphical plugin is used. If the system starts in text mode or the graphical plugin failed to initialise, the text mode plugin is used. The text mode plugin could allow ansi art to be shown on the page with the bottom line holding the progress bar. There are two graphical plugins already present. The "fade-in" plugin uses fades the distribution logo in and out in the centre of the screen, and the "spinfinity" plugin shows the logo with a swirling animation composed of a series of png images ([http://katzj.livejournal.com/432586.html screencast] is available).


Shown to the users every time they boot their machine up. The user may be staring at this for a while depending on how slow startup is, so make this pretty. :)
Because plymouth is run before / is mounted, it needs all files it will be using to be included in the initial ram-disk (initrd). This includes the executable files, images and any libraries used. The system currently links against just one library, libpng, which allows the reading of PNG images. The system can boot using one of many vga resolutions and including a PNG image for each possible resolution will mean the ramdisk not to becomes rather big (which is a bad thing for boot times). Although library


[[Image:Artwork_ThemingOverview_||<^ |18>  [[Image:Artwork_ThemingOverview_05RHGBa.png]  <BR> 1. Graphic "Hide Detail" Mode <BR><BR><BR><BR><BR><BR> [[Image:Artwork_ThemingOverview_05RHGBb.png]  <BR> 2. Text "Show Detail" Mode ||<^ style="color: #636363;">  Description: || Shown as the machine starts up...users can toggle between <BR> 1. Graphic "Hide Detail" mode and <BR> 2. Text "Show Detail" mode ||
Essentially any animation is possible with the restrictions of space on the ram disk and CPU usage during the boot. The user may be staring at this for a while depending on how slow startup is, so make this pretty. :)  
{| border="1"
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01]  File Name + Extension: || /usr/share/rhgb/main-logo.png
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01]  Package: || fedora-logos / redhat-logos
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01]  Size: || The current image is 320x396 pixels and gets scaled to a height of screen_height/2.
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01]  Colors: || No color limitations.
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[image02]  File Name + Extension: || /usr/share/rhgb/system-logo.png
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[image02]  Package: || fedora-logos / redhat-logos
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[image02]  Size: ||  The current image is 183x45 pixels and gets scaled to a height of 0.075*screen_height.
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[image02]  Colors: || No color limitations.
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[color01 & color02]  File Name + Extension: || splash.c
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[color01 & color02]  Package: || RHGB
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[color01 & color02]  Specs: || Provide HEX numbers for these colors.  The colors of the rhgb screen are hardcoded in splash.c.
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[T]  File Name + Extension: || /usr/share/rhgb/throbber-anim.png
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[T]  Package: || RHGB
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[T]  Size: ||  The current throbber is a 288x24 pixels image, with the height of a small icon (24 pixels) and the width equal to the sum of the animted frames horizontally positioned next to each other (currently 12 frames).
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[T]  Colors: || No color limitations.
|-
|<^> '''NOTE:''' || The background color02 set for this section will be the same screen color during firstboot.  Make sure color02 works with the graphic used in firstboot.
|}
[[Image:Artwork_ThemingOverview_||<-2> FC5: [[Image:Artwork_ThemingOverview_05fc5a.png,width=120,height=90]  FC6: [[Image:Artwork_ThemingOverview_05fc6a.png,width=120,height=90]  F7: [[Image:Artwork_ThemingOverview_05f7a.png,width=120,height=90]  F8: [[Image:Artwork_ThemingOverview_05f8a.png,width=120,height=90]  <BR> FC5: [[Image:Artwork_ThemingOverview_05fc5b.png,width=120,height=90]  FC6: [[Image:Artwork_ThemingOverview_05fc6b.png,width=120,height=90]  F7: [[Image:Artwork_ThemingOverview_05f7b.png,width=120,height=90]  F8: [[Image:Artwork_ThemingOverview_05f8b.png,width=120,height=90]  ||
{| border="1"
|-
|<-3> '''Testing Notes:''' (write-up by Andy Shellam) The RHGB screens are simply PNG images in the /usr/share/rhgb folder, and can be replaced by custom ones. To create a custom "throbber" (the animation of a few circles spinning round), create a PNG image of 288x24 - then in that image you need 12 images of 24x24 placed side-by-side, so when viewed left to right - that's your animation. Replace the /usr/share/rhgb/throbber-anim.png image with your image, reboot and you're sorted! In Fedora, the /usr/share/rhgb/large-computer.png isn't used - there are 2 other images - one which is the fedora system logo (the bubbly f), the other is the word "fedora" in the bottom-right corner. Replace these with your own PNGs and bingo, you've got a nice customised system :) More information at [http://ruslug.rutgers.edu/~mcgrof/grub-images/]
|}


=== GDM (Gnome Display Manager) ===
=== GDM (Gnome Display Manager) ===


Basically, the login screen. If users leave their computers on all the time and don't share their system they won't see this as often as users who share a desktop system with other users on the system or laptop users who reboot and login more frequently.
Basically, the login screen. Fedora 9 changed the way it looks and works, for example it is themed from GTK+, unlike the previous versions. The intention is to use it also for the unlock screen dialog.
 
Still work-in-progress.
[[Image:Artwork_ThemingOverview_||<^ |7>  [[Image:Artwork_ThemingOverview_07GDM.png]  ||<^ style="color: #636363;"> Description: || Login Screen. ||
{| border="1"
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">File Name + Extension: || /usr/share/gdm/themes/X (where X is the theme name)/background.png + gdm ''(see link mentioned under '''Note''')''
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">Package: || background.png goes in fedora-logos / redhat-logos BR
| gdm goes in redhat-artwork
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">Size: || Can be any size you want, but try to make a layout that can be “liquid.”  When designing, please consider users with lower screen resolution and also users with widescreen monitors.
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">Colors: || No color limitations.
|-
|<^> '''NOTE:''' || Design with plenty of space for text to shirnk and grow to accommodate translated text. <BR><BR> More information, visit [http://www.gnome.org/projects/gdm/docs/2.16/thememanual.html Gnome Display Manager Reference Manual] .
|}
[[Image:Artwork_ThemingOverview_||<-2> FC5: [[Image:Artwork_ThemingOverview_07fc5.png,width=120,height=90]  FC6: [[Image:Artwork_ThemingOverview_07fc6.png,width=120,height=90]  F7: [[Image:Artwork_ThemingOverview_07f7.png,width=120,height=90]  F8: [[Image:Artwork_ThemingOverview_07f8.png,width=120,height=90]  ||
{| border="1"
|-
|<-3> '''Testing Notes:''' Testing GDM themes for a widescreen monitor when you don't have a widescreen monitor, type the following in a terminal: <BR>'''-''' 'export DOING_GDM_DEVELOPMENT = 1' <BR>'''-''' 'Xnest -ac -geometry 1680x525 :123 &' <BR>'''-''' 'DISPLAY=:123 /usr/bin/gdmgreeter'  --[MairinDuffy]
|}


=== GNOME Splash Screen ===
=== GNOME Splash Screen ===
Line 256: Line 226:
'''NOTE:''' Please don't focus on this graphic piece as it's turned off by default in both upstream and Fedora's GNOME. It's basically a little graphic that shows GNOME's startup, but GNOME starts up quick enough these days that it's not really necessary anymore.
'''NOTE:''' Please don't focus on this graphic piece as it's turned off by default in both upstream and Fedora's GNOME. It's basically a little graphic that shows GNOME's startup, but GNOME starts up quick enough these days that it's not really necessary anymore.


[[Image:Artwork_ThemingOverview_||<^ |10>  [[Image:Artwork_ThemingOverview_08ExtensionSplash.png]  ||<^ style="color: #636363;"> Description: || Splash screen after a user succesfully authentificated on login screen. <code>Currently off by default.</code> ||
{| border="1"
{| border="1"
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">File Name + Extension: || /usr/share/pixmaps/splash/gnome-splash.png
|- |rowbgcolor="#3074c2" rowstyle="color: white; font-weight: bold;"  
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">Package: || fedora-logos / redhat-logos
| || [[Image:Artwork_ThemingOverview_08ExtensionSplash.png]]
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">Size: || The current image is 503x420,  though the dialog will adapt to slightly different sizes.
|-
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">Colors: || No color limitations.
| '''Description:''' || Splash screen after a user successfully authenticated on login screen. (Currently off by default.)
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7">[color01] File Name + Extension: || splash-widget.c
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[color01]  Package: || gnome-session
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[color01]  Specs: || Provide HEX numbers for color01.  The color of the GNOME splash screen is hardcoded in splash-widget.c.
|-
|-
|<^> '''NOTE:''' || The position of the icons and text is hardcoded in splash-widget.c in gnome-session and may need tweaking for a different image. <BR><BR>Image01 should include the following Copyright text: <code>Copyright (C) 2003 - 2006 Red Hat, Inc. and others. All rights reserved.</code>
! colspan="2" | '''Image01'''
|-
| '''File Name + Extension:''' || /usr/share/pixmaps/splash/gnome-splash.png
|-
| '''Package:''' || fedora-logos / redhat-logos
|-
| '''Size:''' || The current image is 503x420,  though the dialog will adapt to slightly different sizes.
|-
| '''Colors:''' || No color limitations.
|-
! colspan="2" | '''Color01'''
|-
|'''File Name + Extension:''' || splash-widget.c
|-
| '''Package:''' || gnome-session
|-
| '''Specs:''' || Provide HEX numbers for color01.  The color of the GNOME splash screen is hardcoded in splash-widget.c.
|-
| '''NOTE:''' || The position of the icons and text is hardcoded in splash-widget.c in gnome-session and may need tweaking for a different image. <BR><BR>Image01 should include the following Copyright text: ''Copyright (C) 2003 - 2006 Red Hat, Inc. and others. All rights reserved.''
|-
| ||<gallery caption="Example Screenshots from Fedora" widths="120px" heights="90px" perrow="3">
Image:Artwork_ThemingOverview_08fc5.png|Fedora Core 5
Image:Artwork_ThemingOverview_08fc6.png|Fedora Core 6
Image:Artwork_ThemingOverview_08f7.png|Fedora 7
Image:Artwork_ThemingOverview_08f8.png|Fedora 8
Image:Gnome-splash.png|Fedora 10
</gallery>
|}
|}
[[Image:Artwork_ThemingOverview_||<-2> FC5: [[Image:Artwork_ThemingOverview_08fc5.png,width=120,height=90]  FC6: [[Image:Artwork_ThemingOverview_08fc6.png,width=120,height=90]  F7: [[Image:Artwork_ThemingOverview_08f7.png,width=120,height=90]  F8: [[Image:Artwork_ThemingOverview_08f8.png,width=120,height=90]  ||


== High-Visibility Artwork ==
== High-Visibility Artwork ==
Line 275: Line 266:


=== Background/Wallpaper ===
=== Background/Wallpaper ===
[[Image:Artwork_ThemingOverview_||<^ |10>  [[Image:Artwork_ThemingOverview_09Background.png]  ||<^ style="color: #636363;"> Description: || Background for desktop. ||
 
{| border="1"
{| border="1"
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">File Name + Extension: || usr/share/backgrounds/images/default.png
|- |rowbgcolor="#3074c2" rowstyle="color: white; font-weight: bold;"  
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">Package: || fedora-logos / redhat-logos
| || [[Image:Artwork_ThemingOverview_09Background.png]]
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">Size: || Currently supporting five (5) popular sizes.  Their names and corresponding sizes are as follows:BR
|- default.jpg (2048x1536)BR
|- default-5_4.jpg (1280 x 1024)BR
|- default-dual.jpg (2560x1240)BR
|- default-dual-wide.jpg (2560 x 960)BR
|- default-wide.jpg (1680 x 1050)
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">Colors: || No color limitations.
|-
|-
|<^> '''NOTE:''' || Create variations for the five sizes listed above. <BR><BR>Some colors might appear brighter or darker depending on the monitor, please test the image on a variety of monitors for optimal use.
| '''Description:''' || Background for desktop.
|-
| '''File Name + Extension:''' || usr/share/backgrounds/images/default.png
|-
| '''Package:''' || fedora-logos / redhat-logos
|-
| '''Size:''' || Currently supporting five (5) popular sizes.  Their names and corresponding sizes are as follows:
*default.jpg (2048x1536)
* default-5_4.jpg (1280 x 1024)
* default-dual.jpg (2560x1240)
* default-dual-wide.jpg (2560 x 960)
* default-wide.jpg (1680 x 1050)
|-
| '''Colors:''' || No color limitations.
|-
| '''NOTE:''' || Create variations for the five sizes listed above. Some colors might appear brighter or darker depending on the monitor, please test the image on a variety of monitors for optimal use.
|-
| ||<gallery caption="Example Screenshots from Fedora" widths="120px" heights="90px" perrow="3">
Image:Artwork_ThemingOverview_09fc5.png|Fedora Core 5
Image:Artwork_ThemingOverview_09fc6.png|Fedora Core 6
Image:Artwork_ThemingOverview_09f7.png|Fedora 7
Image:Artwork_ThemingOverview_09f8.png|Fedora 8
</gallery>
|}
|}
[[Image:Artwork_ThemingOverview_||<-2> FC5: [[Image:Artwork_ThemingOverview_09fc5.png,width=120,height=90]  FC6: [[Image:Artwork_ThemingOverview_09fc6.png,width=120,height=90]  F7: [[Image:Artwork_ThemingOverview_09f7.png,width=120,height=90]  F8: [[Image:Artwork_ThemingOverview_09f8.png,width=120,height=90]  ||


=== GNOME Screensaver Lock Dialog ===
=== GNOME Screensaver Lock Dialog ===
Line 295: Line 300:
'''NOTE:''' Please don't focus on this graphic piece as it's turned off by default in both upstream and Fedora's GNOME.
'''NOTE:''' Please don't focus on this graphic piece as it's turned off by default in both upstream and Fedora's GNOME.


[[Image:Artwork_ThemingOverview_||<^ |10>  [[Image:Artwork_ThemingOverview_10LockDialog.png]  ||<^ style="color: #636363;"> Description: || Login dialog which appears when the user returns after screensaver is running. ''Currently off by default.'' ||
 
{| border="1"
{| border="1"
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">File Name + Extension: || user/share/gnome/screensaver/lock-dialog-system.png + lock-dialog-system.gtkrc
|- |rowbgcolor="#3074c2" rowstyle="color: white; font-weight: bold;"  
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">Package: || fedora-logos / redhat-logos
| || [[Image:Artwork_ThemingOverview_10LockDialog.png]]
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">Size: || 400x314 pixels
|-
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">Colors: || No color limitations.
| '''Description:''' || Login dialog which appears when the user returns after screensaver is running. ''Currently off by default.''
|-
| '''File Name + Extension:''' || user/share/gnome/screensaver/lock-dialog-system.png + lock-dialog-system.gtkrc
|-  
| '''Package:''' || fedora-logos / redhat-logos
|-  
| '''Size:''' || 400x314 pixels
|-  
| '''Colors:''' || No color limitations.
|-
| '''NOTE:''' || Design with space for text to shrink and grow to accommodate prompts, translated text, as well as long usernames.
|-
|-
|<^> '''NOTE:''' || Design with space for text to shrink and grow to accommodate prompts, translated text, as well as long usernames.
| ||<gallery caption="Example Screenshots from Fedora" widths="120px" heights="90px" perrow="3">
Image:Artwork_ThemingOverview_10fc5.png|Fedora Core 5
Image:Artwork_ThemingOverview_10fc6.png|Fedora Core 6
Image:Artwork_ThemingOverview_10f8.png|Fedora 7
Image:Artwork_ThemingOverview_10f8.png|Fedora 8
</gallery>
|}
|}
[[Image:Artwork_ThemingOverview_||<-2> FC5: [[Image:Artwork_ThemingOverview_10fc5.png,width=120,height=90]  FC6: [[Image:Artwork_ThemingOverview_10fc6.png,width=120,height=90]  F7: [[Image:Artwork_ThemingOverview_10f8.png,width=120,height=90]  F8: [[Image:Artwork_ThemingOverview_10f8.png,width=120,height=90]  ||


== KDE Artwork ==
== KDE Artwork ==
Line 311: Line 330:


=== KDE Splash ===
=== KDE Splash ===
[[Image:Artwork_ThemingOverview_||<^ |26>  [[Image:Artwork_ThemingOverview_11KDEsplash.png]  ||<^ style="color: #636363;">  Description: || KDE ksplash is a part of redhat-logos. The theme should be installed in /usr/share/apps/ksplash/Themes/X (X is the name of the Theme). There is one (1) preview image, one (1) resource file, and Image01 is comprised of four (4) pieces. ||
 
{| border="1"
{| border="1"
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[01]  File Name + Extension: || /usr/share/apps/ksplash/Themes/X/Preview.png
|-  
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[01]  Package: || fedora-logos / redhat-logos
| '''Description:''' || KDE ksplash is a part of redhat-logos. The theme should be installed in /usr/share/kde4/apps/ksplash/Themes/X (X is the name of the Theme). There is one (1) preview image, one (1) resource file, and sprites in PNG format.
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[01]  Size: || 400x244 pixels
|-  
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[01]  Colors: || No color limitations.
! colspan="2" | '''Preview Screenshot'''
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[resource file]  File Name + Extension: || /usr/share/apps/ksplash/Themes/X/Theme.rc
|-  
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[resource file]  Package: || fedora-logos / redhat-logos
| '''File Name + Extension:''' || /usr/share/kde4/apps/ksplash/Themes/X/Preview.png
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01.a]  File Name + Extension: || /usr/share/apps/ksplash/Themes/X/splash_top.png
|-  
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01.a]  Package: || fedora-logos / redhat-logos
| '''Package:''' || fedora-logos / redhat-logos
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01.a]  Size: || 400x244 pixels
|-  
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01.a]  Colors: || No color limitations.
| '''Size:''' || No size limitations.
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[image01.b]  File Name + Extension: || /usr/share/apps/ksplash/Themes/X/splash_inactive_bar.png
|-  
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[image01.b]  Package: || fedora-logos / redhat-logos
| '''Colors:''' || No color limitations.
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[image01.b]  Size: || 400x51 pixels
|-  
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[image01.b]  Colors: || No color limitations.
! colspan="2" | '''Resource File'''
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[image01.b]  Note: || The splash_inactive_bar.png has 7 embedded icons which represents the status during KDE start.
|-  
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01.c]  File Name + Extension: || /usr/share/apps/ksplash/Themes/X/splash_active_bar.png
| '''File Name + Extension:''' || /usr/share/kde4/apps/ksplash/Themes/X/Theme.rc
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01.c]  Package: || fedora-logos / redhat-logos
|-  
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01.c]  Size: || 400x51 pixels
| '''Package:''' || fedora-logos / redhat-logos
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01.c]  Colors: || No color limitations.
|-  
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01.c]  Note: || The splash_active_bar.png has 7 embedded icons which represents the status during KDE start. The background and the embedded icons should be the same from splash_inactive_bar.png.
! colspan="2" | '''PNG sprites'''
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[image01.d]  File Name + Extension: || /usr/share/apps/ksplash/Themes/X/splash_bottom.png
|-  
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[image01.d]  Package: || fedora-logos / redhat-logos
| '''File Name + Extension:''' || /usr/share/kde4/apps/ksplash/Themes/X/1600x1200/*.png
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[image01.d]  Size: || 400x16 pixels
|-  
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[image01.d]  Colors: || black
| '''Package:''' || fedora-logos / redhat-logos
|-  
| '''Size:''' || No size limitations.
|-  
| '''Colors:''' || No color limitations.
|-  
| '''Note:''' || KDE4.0 KSplash engine can do alpha blending of sprites, start and stop animations on events (to show progress bar consisting of animated icons usually), but can't do alpha blending with desktop background (no rounded corners!)
|-
| ||<gallery caption="Example Screenshots from Fedora" widths="120px" heights="90px" perrow="3">
Image:Artwork_ThemingOverview_11fc5.png|Fedora Core 5
Image:Artwork_ThemingOverview_11fc6.png|Fedora Core 6
Image:Artwork_ThemingOverview_11fc9.png|Fedora 9
</gallery>
|}
|}
[[Image:Artwork_ThemingOverview_||<-2> FC5: [[Image:Artwork_ThemingOverview_11fc5.png,width=120,height=90]  FC6: [[Image:Artwork_ThemingOverview_11fc6.png,width=120,height=90]  F7: [[Image:Artwork_ThemingOverview_11f7.png,width=120,height=90]  F8: [[Image:Artwork_ThemingOverview_11f8.png,width=120,height=90]  ||


=== KDE Login ===
=== KDE Login ===
[[Image:Artwork_ThemingOverview_||<^ |16>  [[Image:Artwork_ThemingOverview_12KDElogin.png]  ||<^ style="color: #636363;"> Description: || KDE Login is comprised of one (1) preview image, one (1) background color designation, and Image01 which is the logo. ||
 
{| border="1"
{| border="1"
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[01]  File Name + Extension: || screenshot.png
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[01]  Package: || to be filled in
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[01]  Size: || 200x150 pixels
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[01]  Colors: || No color limitations.
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[resource file]  File Name + Extension: || Theme.rc
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[resource file]  Package: || fedora-logos / redhat-logos
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01]  File Name + Extension: || to be filled in.png
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01]  Package: || fedora-logos / redhat-logos
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01]  Size: || 327x156 pixels
|- |<^ style="color: #636363;" rowstyle="background-color: #EBEBEB;">[image01]  Colors: || No color limitations.
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7">[color01]  File Name + Extension: || to be filled in
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[color01]  Package: || to be filled in
|- |<^ style="color: #636363;" rowstyle="background-color: #D7D7D7;">[color01]  Specs: || Provide HEX numbers for color01.  The user can change the color during KDE starting.
|-
|-
|<^> '''NOTE:''' || To be filled in.
| '''Description:''' || KDE Login is comprised of one (1) preview image, one (1) resource file, and PNG/SVG sprites.
|-
! colspan="2" | '''Preview Image'''
|-
| '''File Name + Extension:''' || screenshot.png
|-
| '''Package:''' || fedora-logos / redhat-logos
|-
| '''Size:''' || No size limitations.
|-
| '''Colors:''' || No color limitations.
|-
! colspan="2" | '''Resource File'''
|-
| '''File Name + Extension:''' || X.xml
|-
| '''Package:''' || fedora-logos / redhat-logos
|-
| '''NOTE:''' || Layouting engine allows to scale and position sprites using pixel and percentage values, it also has parameters like max/min height/width to stretch user list. Theme must have user list (default user icon themeable with PNG icon), session select and shutdown menu buttons (PNG/SVG sprites and/or localized text).
|-
! colspan="2" | '''PNG/SVG Sprites'''
|-
| '''File Name + Extension:''' || *.png
|-
| '''Package:''' || fedora-logos / redhat-logos
|-
| '''Size:''' || No size limitations.
|-
| '''Colors:''' || No color limitations.
|-
| '''NOTE:''' || SVG engine used in KDM is very basic and doesn't support advanced features of inkscape like blurring.
|-
| ||<gallery caption="Example Screenshots from Fedora" widths="120px" heights="90px" perrow="3">
Image:Artwork_ThemingOverview_12fc5.png|Fedora Core 5
Image:Artwork_ThemingOverview_12fc6.png|Fedora Core 6
Image:Artwork_ThemingOverview_12fc9.png|Fedora 9
</gallery>
|}
|}
[[Image:Artwork_ThemingOverview_||<-2> FC5: [[Image:Artwork_ThemingOverview_12fc5.png,width=120,height=90]  FC6: [[Image:Artwork_ThemingOverview_12fc6.png,width=120,height=90]  F7: [[Image:Artwork_ThemingOverview_12f7.png,width=120,height=90]  F8: [[Image:Artwork_ThemingOverview_12f8.png,width=120,height=90]  ||


== Non-Release Dependent Artwork ==
== Non-Release Dependent Artwork ==
Line 374: Line 426:
This refers to the basic look of windows... their color, the appearance of their widgets, etc. The default GTK+ engine we use in Fedora is Clearlooks.
This refers to the basic look of windows... their color, the appearance of their widgets, etc. The default GTK+ engine we use in Fedora is Clearlooks.


[http://www.stellingwerff.com/?p=9 The Widget Factory]  is a great program for testing the look of your themes.  It also has a great screenshot of the program, displaying all of the different widgets that can be styled for GTK2. Users can get the widget factory on Fedora Extras repository with the following command
[http://www.stellingwerff.com/?p=9 The Widget Factory]  is a great program for testing the look of your themes.  It also has a great screenshot of the program, displaying all of the different widgets that can be styled for GTK2. Users can get the widget factory on Fedora repository with the following command


<code> yum install thewidgetfactory </code>
<code> yum install thewidgetfactory </code>

Latest revision as of 21:21, 29 March 2010

Fedora Theming Overview

There is a heckuva lotta stuff you can change the look of in Fedora. Isn't open source software great? :) Even better, you can unify the look of the entire distribution by following a common theme across these customizable screens/widgets/layouts/whatchamacallits.

If you've got great ideas for a design but are not technically-inclined, or want to learn how to code up your own themes but need help - no worries. Pass your mockups along; you can upload them to ThemeConcepts - and be sure to post the link to fedora-art-list so we can all marvel at your handiwork!

Here's an overview of the components that have gone into past Fedora themes so you can get an idea of what you can change the look of and how to test out your artwork.

Artwork seen during installation

This is all artwork users will only see on a limited basis - during and directly after installation. This is not the artwork users will be looking at day in and day out.

Anaconda Prompt Screen

Only seen during installation. Pretty much the *first* thing you see when you boot up with the install CD/DVD.

File:Artwork ThemingOverview 01Syslinux.png
Description: Splash screen used at the boot prompt with syslinux/isolinux. This gets transformed into the syslinux specific format.
File Name + Extension: same image, two locations:
  • /usr/lib/anaconda-runtime/boot/syslinux-splash.png and
  • /usr/share/anaconda/pixmaps/syslinux-splash.png
Package: fedora-logos / redhat-logos
Size: 640x300 pixels
Colors: 16-color palette (should be an indexed .png with #000000, #ffffff, #cdcfd5, #5b6c93, and #c90000 in your palette).
Testing Notes: The final file format of this graphic is 'lss'. To test it out there are programs available such as ppmtolss that will let you convert this image to lss to try it out (of course to use that you'd have to convert to ppm first. :) ) Once you have converted it to lss, create an installation CD, putting your newly-created lss file in the /isolinux directory, naming it 'splash.lss'. --[MairinDuffy]

Anaconda Screen - Splash

Only seen during installation. There is a 'splash' component to the wizard as well as a customizable banner. Appears after the first screen above.

File:Artwork ThemingOverview 02AnacondaSplash.png
Description: This is the the "splash" component to the Installation Wizard. It is comprised of two pieces of artwork...the header [1] and the center image [2] .
File Name + Extension: usr/share/anaconda/pixmaps/anaconda_header.png
Package: fedora-logos / redhat-logos
Size: 800x88 pixels
Colors: No color limitations.
File Name + Extension: usr/share/anaconda/pixmaps/splash.png
Package: fedora-logos / redhat-logos
Size: The current graphic is 507x388 pixels. This image has some flexibility to vary in size.
Colors: No color limitations.
NOTE: Image01 should include the following Copyright text: Copyright (C) 2003 - 2024 Red Hat, Inc. and others. All rights reserved.

Anaconda Screen - Progress

Only seen during installation. This is the 'countdown' screen after you've already picked all your preferences and let the installer do its magic. :)


File:Artwork ThemingOverview 03AnacondaProgress.png
Description: This is the the "progress" component to the Installation Wizard. It is comprised of two pieces of artwork. the header (same as Anaconda Prompt Screen - Splash) and the center image.
Graphic 1
Same as graphic [1] from Anaconda Prompt Screen - Splash
Graphic 2b
File Name + Extension: usr/share/anaconda/pixmaps/progress_first.png
Package: fedora-logos / redhat-logos
Size: 500x325 pixels
Colors: No color limitations.
Graphic 2c
File Name + Extension: usr/share/anaconda/pixmaps/progress_first-lowres.png
Package: fedora-logos / redhat-logos
Size: 350/225 pixels
Colors: No color limitations.
NOTE: Both 2b/c should include the following Copyright text: Copyright (C) 2003 - 2006 Red Hat, Inc. and others. All rights reserved.

First Boot

Users only see this the very first time they boot their system after installing it. It walks the user through additional configuration of their system post-installation (keyboard layout, language, time zone, etc.) There is a splash (shown in screenshot below) as well as a banner along the left side.

File:Artwork ThemingOverview 06Firstboot.png
Description: Walks user through additional configuration of their system post-installation. It is comprised of two pieces of artwork...the banner along the left side [1] and a splash image [2] .
Graphic 1
File Name + Extension: /usr/share/firstboot/pixmaps/firstboot-left.png
Package: fedora-logos / redhat-logos
Size: 160x600 pixels
Colors: No color limitations.
Graphic 2
File Name + Extension: /usr/share/firstboot/pixmaps/splash-small.png
Package: fedora-logos / redhat-logos
Size: 560x320 pixels
Colors: No color limitations.
NOTE: On large screens, firstboot will not resize to fill the window. Instead, the background color02 chosen for RHGB will be the background color.
NOTE: Additional artwork for firstboot is located in the /usr/share/firstboot/pixmaps directory/. --[MairinDuffy]
Testing Notes: Copy all of your artwork to /usr/share/firstboot/pixmaps, making sure to backup the originals if you care about them. :) Now, run (as root), /usr/sbin/firstboot --debug. This will spew a bunch of stuff out to your terminal - let it finish - and eventually you'll see a firstboot item appear in your tasklist/window list. Firstboot likes to pop under you see :) So you'll need to click the 'show desktop' icon in the lower left corner of your screen to hide all of your open windows, then click on the firstboot item in the tasklist/window list to see firstboot running with your artwork. You should be able to click through the screens. --[MairinDuffy]

Artwork seen during bootup

Below is artwork users will see every time they boot their system.

GRUB (Grand Unified Bootloader)

This is seen *every time the computer boots*, and is used to select the kernel to run as well as other boot-time options. Note that for FC5, some people complained that this screen was too bright and hurt their eyes - people are used to a dark screen for this.

File:Artwork ThemingOverview 04Grub.png
Description: Seen every time the computer boots, this screen is where the selection of which kernel to run and other boot-time options, are made.
File Name + Extension: /boot/grub/splash.xpm.gz
Package: fedora-logos / redhat-logos
Size: 640x480 pixels
Colors: 16 color palette (should be an indexed .xpm, compressed with gzip with #000000 and #ffffff in your palette).
NOTE: The selection bar is black and so the image created should take care to allow for the selection bar to be visible.

Plymouth

Plymouth is a replacement to RHGB which starts even earlier (before / is mounted) but reather than using Xorg it uses the frame buffer device to show graphics while the system is booting. Different boot splash screens are available though numerous plugins, which in fedora are distributed separately from the base (plymouth-plugin-*). If the kernel console mode is set to a graphical vga mode (add vga=0x318 to the kernel line), the default graphical plugin is used. If the system starts in text mode or the graphical plugin failed to initialise, the text mode plugin is used. The text mode plugin could allow ansi art to be shown on the page with the bottom line holding the progress bar. There are two graphical plugins already present. The "fade-in" plugin uses fades the distribution logo in and out in the centre of the screen, and the "spinfinity" plugin shows the logo with a swirling animation composed of a series of png images (screencast is available).

Because plymouth is run before / is mounted, it needs all files it will be using to be included in the initial ram-disk (initrd). This includes the executable files, images and any libraries used. The system currently links against just one library, libpng, which allows the reading of PNG images. The system can boot using one of many vga resolutions and including a PNG image for each possible resolution will mean the ramdisk not to becomes rather big (which is a bad thing for boot times). Although library

Essentially any animation is possible with the restrictions of space on the ram disk and CPU usage during the boot. The user may be staring at this for a while depending on how slow startup is, so make this pretty. :)

GDM (Gnome Display Manager)

Basically, the login screen. Fedora 9 changed the way it looks and works, for example it is themed from GTK+, unlike the previous versions. The intention is to use it also for the unlock screen dialog. Still work-in-progress.

GNOME Splash Screen

NOTE: Please don't focus on this graphic piece as it's turned off by default in both upstream and Fedora's GNOME. It's basically a little graphic that shows GNOME's startup, but GNOME starts up quick enough these days that it's not really necessary anymore.

File:Artwork ThemingOverview 08ExtensionSplash.png
Description: Splash screen after a user successfully authenticated on login screen. (Currently off by default.)
Image01
File Name + Extension: /usr/share/pixmaps/splash/gnome-splash.png
Package: fedora-logos / redhat-logos
Size: The current image is 503x420, though the dialog will adapt to slightly different sizes.
Colors: No color limitations.
Color01
File Name + Extension: splash-widget.c
Package: gnome-session
Specs: Provide HEX numbers for color01. The color of the GNOME splash screen is hardcoded in splash-widget.c.
NOTE: The position of the icons and text is hardcoded in splash-widget.c in gnome-session and may need tweaking for a different image.

Image01 should include the following Copyright text: Copyright (C) 2003 - 2006 Red Hat, Inc. and others. All rights reserved.

High-Visibility Artwork

This is artwork users are going to see all the time - so let's get it right. :)

Background/Wallpaper

File:Artwork ThemingOverview 09Background.png
Description: Background for desktop.
File Name + Extension: usr/share/backgrounds/images/default.png
Package: fedora-logos / redhat-logos
Size: Currently supporting five (5) popular sizes. Their names and corresponding sizes are as follows:
  • default.jpg (2048x1536)
  • default-5_4.jpg (1280 x 1024)
  • default-dual.jpg (2560x1240)
  • default-dual-wide.jpg (2560 x 960)
  • default-wide.jpg (1680 x 1050)
Colors: No color limitations.
NOTE: Create variations for the five sizes listed above. Some colors might appear brighter or darker depending on the monitor, please test the image on a variety of monitors for optimal use.

GNOME Screensaver Lock Dialog

NOTE: Please don't focus on this graphic piece as it's turned off by default in both upstream and Fedora's GNOME.


File:Artwork ThemingOverview 10LockDialog.png
Description: Login dialog which appears when the user returns after screensaver is running. Currently off by default.
File Name + Extension: user/share/gnome/screensaver/lock-dialog-system.png + lock-dialog-system.gtkrc
Package: fedora-logos / redhat-logos
Size: 400x314 pixels
Colors: No color limitations.
NOTE: Design with space for text to shrink and grow to accommodate prompts, translated text, as well as long usernames.

KDE Artwork

Let's not forget the KDE fans. :)

KDE Splash

Description: KDE ksplash is a part of redhat-logos. The theme should be installed in /usr/share/kde4/apps/ksplash/Themes/X (X is the name of the Theme). There is one (1) preview image, one (1) resource file, and sprites in PNG format.
Preview Screenshot
File Name + Extension: /usr/share/kde4/apps/ksplash/Themes/X/Preview.png
Package: fedora-logos / redhat-logos
Size: No size limitations.
Colors: No color limitations.
Resource File
File Name + Extension: /usr/share/kde4/apps/ksplash/Themes/X/Theme.rc
Package: fedora-logos / redhat-logos
PNG sprites
File Name + Extension: /usr/share/kde4/apps/ksplash/Themes/X/1600x1200/*.png
Package: fedora-logos / redhat-logos
Size: No size limitations.
Colors: No color limitations.
Note: KDE4.0 KSplash engine can do alpha blending of sprites, start and stop animations on events (to show progress bar consisting of animated icons usually), but can't do alpha blending with desktop background (no rounded corners!)

KDE Login

Description: KDE Login is comprised of one (1) preview image, one (1) resource file, and PNG/SVG sprites.
Preview Image
File Name + Extension: screenshot.png
Package: fedora-logos / redhat-logos
Size: No size limitations.
Colors: No color limitations.
Resource File
File Name + Extension: X.xml
Package: fedora-logos / redhat-logos
NOTE: Layouting engine allows to scale and position sprites using pixel and percentage values, it also has parameters like max/min height/width to stretch user list. Theme must have user list (default user icon themeable with PNG icon), session select and shutdown menu buttons (PNG/SVG sprites and/or localized text).
PNG/SVG Sprites
File Name + Extension: *.png
Package: fedora-logos / redhat-logos
Size: No size limitations.
Colors: No color limitations.
NOTE: SVG engine used in KDM is very basic and doesn't support advanced features of inkscape like blurring.

Non-Release Dependent Artwork

There's other types of artwork we can change but don't necessarily have to change with each release. A pretty exhaustive list is available on Marketing's Fedora Branding Page . A small sample follows below.

Metacity (Window manager)

The main visual component of metacity themes is the titlebar of windows, but there are other things you can do with it too.

Designing Metacity Themes

GTK (Gimp Tool Kit)

This refers to the basic look of windows... their color, the appearance of their widgets, etc. The default GTK+ engine we use in Fedora is Clearlooks.

The Widget Factory is a great program for testing the look of your themes. It also has a great screenshot of the program, displaying all of the different widgets that can be styled for GTK2. Users can get the widget factory on Fedora repository with the following command

yum install thewidgetfactory

GnomeArt GTK2 Theme Creation Tutorial


Retrieved from "https://fedoraproject.org/w/index.php?title=Artwork/ThemingOverview&oldid=162336"