Linux Lite Forums

Customization => Wallpapers => Topic started by: AL13N on September 14, 2014, 02:17:34 PM

Title: Watermark by Josh Peterson (Linux Lite Remix)
Post by: AL13N on September 14, 2014, 02:17:34 PM
Three remixes of the Blogger Watermark template* by Josh Peterson (http://blog.noaesthetic.com/).  One in the original Parchment (#C0A154), one Grey (#666666) and one Light Coral (#F08080).

*Click here (http://mylinuxexplore.blogspot.co.uk/2014/06/linux-lite-20-beryl-review-evolving-to.html) to see it in action (along with a Linux Lite review).

Wallpapers were created with Gimp (http://www.gimp.org/) using the following elements:

1. body_background_birds.png (https://i.imgur.com/7Albf69.png)  (Pattern)
2. body_overlay_birds.png (https://i.imgur.com/0bmDSdl.png)  (Layer)
3. Linux_Lite_feather.png (https://i.imgur.com/RA4aKTR.png)  (Layer)

Linux_Lite_feather was scaled to 40% and colorified to #E2D4B1 (Parchment), #C0C0C0 (Grey) and #F8C5C5 (Light Coral).  body_overlay_birds was distributed 6 from top edge and -5 from right edge.

Below are the wallpapers in 4:3 and 16:9 formats (1024x768 / 1366x768):

UPDATE: 1920x1080 resolution added in post #11 (https://www.linuxliteos.com/forums/index.php?topic=872.msg5415#msg5415).

Parchment:

(https://i.imgur.com/HZs2Y96.png) (https://i.imgur.com/HZs2Y96.png)     (https://i.imgur.com/OoobKdM.png) (https://i.imgur.com/OoobKdM.png)

Grey:

(https://i.imgur.com/nTD7AFQ.png) (https://i.imgur.com/nTD7AFQ.png)     (https://i.imgur.com/8gc3u18.png) (https://i.imgur.com/8gc3u18.png)

Light Coral:

(https://i.imgur.com/Q1hfpoG.png) (https://i.imgur.com/Q1hfpoG.png)     (https://i.imgur.com/FDYGL63.png) (https://i.imgur.com/FDYGL63.png)
 
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: AL13N on September 14, 2014, 02:19:31 PM
Theming for Grey version

(https://i.imgur.com/XHtY97m.png) (https://i.imgur.com/XHtY97m.png)

(https://i.imgur.com/Bv84tlh.png) (https://i.imgur.com/Bv84tlh.png)

(https://i.imgur.com/LY6sDzx.png) (https://i.imgur.com/LY6sDzx.png)

(https://i.imgur.com/lTuA4un.png) (https://i.imgur.com/lTuA4un.png)

(https://i.imgur.com/WmnpIMA.png) (https://i.imgur.com/WmnpIMA.png)


Theme: MediterraneanWhite (Default)
Window Theme: Siva Flat (http://nale12.deviantart.com/art/Siva-Flat-1-3-0-353499016)
Icons: Compass (http://deviantn7k1.deviantart.com/art/Compass-387446966)

Tried to stick as close as possible to the out-of-box settings but there were a few changes needed as detailed below.  All changes are in red.  For text files, line numbers are in blue.

MediterraneanWhite

Tooltip - change background and text colors.
Scrollbar - squared and reduced borders.

/usr/share/themes/MediterraneanWhite/gtk-2.0/gtkrc:

4  gtk-color-scheme = "tooltip_bg_color:#2e3436\ntooltip_fg_color:#fbfbfb\nlink_color:#4a90f9"

62     GtkScrollbar         ::trough-border            = 0

/usr/share/themes/MediterraneanWhite/gtk-3.0/gtk.css:

8  @define-color tooltip_bg_color #2e3436;
9  @define-color tooltip_fg_color #fbfbfb;

/usr/share/themes/MediterraneanWhite/gtk-3.0/scrollbar.css:

9      -GtkRange-trough-border: 0;

61    -GtkRange-trough-border: 0px;


Siva Flat

Window Title - change text color of active window.

/usr/share/themes/Siva Flat/xfwm4/themerc:

12  active_text_color=#565656

Window Title - change text size.

1. Applications Menu > Settings > Window Manager > Style
2. Change "Title font" to Droid Sans Bold | 9.92969.


Terminal

Default size of unmaximised window (on startup).

/usr/share/vte/termcap/xterm:   (Open as Administrator)

10     :co#52:it#8:li#22:\   

Note: Change this to whatever size you want but NOT to the screen resolution (in my example 1024x768) as this will crash your session and (eventually) reboot to the Log in screen.

Change colors.

1. Right-Click > Preferences > Style
2. Change "Background" to #2E3436 and "Foreground" to #FBFBFB.


DeaDBeeF   (This does not come installed with Linux Lite. More info here (http://deadbeef.sourceforge.net/).)

Change Seek-bar and Volume-bar colors.

1.  Edit > Preferences > Colours > Seek-bar/Volume-bar colours
2.  Check "Override"
3.  Change "Foreground" to #666666 and "Background" to #FBFBFB.

UPDATE: Created a new DeaDBeeF Grey theme.  Screenshots and details are available here (https://www.linuxliteos.com/forums/index.php?topic=1037.0).
 
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: AL13N on September 14, 2014, 02:20:44 PM
Setting up the Panel

To centralise the Window Buttons create 3 Panels - placed left, centre and right - with the following properties:   (Set "Row size" to preference)

(https://i.imgur.com/Aan43us.png) (https://i.imgur.com/Aan43us.png)

In the "Appearance" tab set "Style" to Solid color and "Color" to #D0D0D0.

In the "Items" tab add the items you want.  I have mine set up as follows:

(https://i.imgur.com/mLb3SBI.png) (https://i.imgur.com/mLb3SBI.png)     (https://i.imgur.com/KQtihUl.png) (https://i.imgur.com/KQtihUl.png)     (https://i.imgur.com/Llf5mIc.png) (https://i.imgur.com/Llf5mIc.png)

This leaves two gaps between the panels.  The solution is to edit the wallpaper using Gimp as follows:

1. Open the wallpaper in Gimp.
2. Goto File > New...
3. In the pop-up box enter the width of your screen/wallpaper and selected "Row size" (in my example 1024 and 28).
4. Select the "Bucket Fill Tool" (top left toolbox) to color the image to #D0D0D0.
5. Goto Edit > Copy
6. Switch back to the wallpaper tab and goto Edit > Paste as > New Layer
7. Select the "Alignment Tool" (top left toolbox) and click on the pasted image.
8. From "Tool Options" (bottom left toolbox) select "Align bottom of target".
9. Goto "File" and either "Overwrite" the original wallpaper or use "Export As..." to save to a new file.
10. Set this as your wallpaper.

(https://i.imgur.com/DdDKpA4.png) (https://i.imgur.com/DdDKpA4.png)
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: AL13N on September 14, 2014, 02:21:30 PM
Modifying the Panel

Panel Icons - reduced borders.

/usr/share/themes/MediterraneanWhite/gtk-2.0/gtkrc:

1029      xthickness = 0
1030      ythickness = 0

Panel Window Buttons - remove lucency when minimized.

/home/linuxlite/.gtkrc-2.0:   (Press Ctrl+H to show hidden files)

Add (copy & paste) the following:

style "xfce-tasklist-style"
{
  # Lucency of minimized icons. Valid values are between 0 (completely
  # hide the icon) and 100 (don't lighten the icon).
  XfceTasklist::minimized-icon-lucency = 100
}
class "XfceTasklist" style "xfce-tasklist-style"

Panel Date/Time format:

1. Applications Menu > Settings > Panel > Items > DateTime
2. Apply following changes:

Format: Time only
Format: Custom...
               Week %V, %G
Font: Droid Sans 10
Format: Custom...
               %H:%M:%S  %a %d %b   (Note: there's 2 spaces between S and %.)
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: AL13N on September 14, 2014, 02:21:50 PM
Applications Menu

This section is needed because the Applications Menu icon appears either smaller or larger than the other icons.  After some searching I came across the following solution:

1. Applications Menu > Settings > Panel
2. Add a new panel, place it in the bottom left corner and apply the following:   ("Row size" same as original panel)

(https://i.imgur.com/vnGQ5QD.png) (https://i.imgur.com/vnGQ5QD.png)

2. In the "Appearance" tab change "Style" to Solid color and "Color" to #D0D0D0.
3. In the "Items" tab add "Applications Menu".
4. Goto the original panel (usually Panel 1)  and remove "Applications Menu" and add "Launcher".
5. Edit "Launcher" by adding a new empty item and apply the following:

   Name: Menu
   Command: xfce4-popup-applicationsmenu
   Icon: Select an icon (I chose "applications-other" from the "Menu Icons" drop down list).

6. Goto /home/linuxlite/.gtkrc-2.0:   (Press Ctrl+H to show hidden files)

Add (copy & paste) the following:

style "xfce-panel-window-style"
{
  # Size of autohide window in pixels
  XfcePanelWindow::autohide-size = 1
}
class "XfcePanelWindow" style "xfce-panel-window-style"


You'll now have an icon exactly the same size as the rest and when you click on it the Applications Menu will pop up.  (the new Panel you created will remain hidden).
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: Scott on September 14, 2014, 04:30:15 PM
 :) AL13N, Wow! Absolutely teriffic work. What more can I say?  ~Scott
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: rbdflyboy on September 17, 2014, 04:12:00 PM
Being new to Linux and Gimp this awesome work and tutorial will assist me immensely.
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: Jerry on September 17, 2014, 07:11:04 PM
Fantastic contribution AL13N, thank you :)
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: AL13N on September 18, 2014, 09:11:43 AM
Thank You for the positive responses.  :)

I'm fairly new to all this and decided to post what I'd learned - via trial, error and a LOT of StartPaging - both to share with others and a way of saying Thank You for this incredible distro.
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: ramzy on September 19, 2014, 04:53:30 PM
Excellent work beautifully theme ,wallpaper need to improve,I hope that is taken into account from the team.
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: AL13N on September 24, 2014, 10:48:51 AM
UPDATE: Added 1920x1080 resolution wallpapers and alignment details for body_overlay_birds.

Parchment:

(https://i.imgur.com/GdljYDW.png) (https://i.imgur.com/GdljYDW.png)

Grey:

(https://i.imgur.com/yHpTO4T.png) (https://i.imgur.com/yHpTO4T.png)

Light Coral:

(https://i.imgur.com/fjlZabQ.png) (https://i.imgur.com/fjlZabQ.png)


Changes:

- Linux_Lite_feather was scaled to 56.33%. 
- body_overlay_birds was scaled to 140.41/140.50% (h/w).
- body_overlay_birds was distributed 9 from top edge and -8 from right edge.
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: AL13N on December 05, 2014, 09:51:53 AM
UPDATE: Terminal background changed to #232323 (matches Firefox blank background and gives better contrast when using htop/Resource Usage).


***IMPORTANT***

Recently, the "Install Updates" function broke giving the error message below.

(https://i.imgur.com/wdoxesE.png) (https://i.imgur.com/wdoxesE.png)

Removing the PPA for the Compass Icons solved the problem.  I've since ran "Install Updates" successfully numerous times.

To remove the Compass Icons PPA use the following commands:

Code: [Select]
sudo apt-get install ppa-purge
sudo ppa-purge ppa:nitrux/nitrux-artwork
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: Jerry on December 05, 2014, 01:40:53 PM
Love that hex color :)
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: altman on December 05, 2014, 09:57:25 PM
That s some great work AL13N . Congrats .
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: bitsnpcs on December 06, 2014, 01:54:32 AM
Great work AL13N, the hex colour makes the font easy to read.
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: Jerry on December 06, 2014, 01:58:37 AM
What color is the font, looks like a kind of soft white?
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: AL13N on December 06, 2014, 01:32:37 PM
What color is the font, looks like a kind of soft white?

The font color is #FBFBFB.

The background color #2E3436 is a homage to CrunchBang (http://crunchbang.org/).
 
Title: Re: Watermark by Josh Peterson (Linux Lite Remix)
Post by: ajlec2000 on June 20, 2015, 10:51:00 PM
Thanks. I'm using the grey right now.