all right some more on CSS and your GUI
in the previous video I showed how to
apply CSS directly to your widgets on an
individual basis the next question is
can we apply it to the theme as a whole
and the answer is yes first of all you
have to find your theme that you want to
play with and I'll go to file system
I'll go to I'm on Mint X Linux Mint X
with meit version 19.3 I guess it is the
latest one but anyway so this is where
it may be different in other words on
your system but go to us our go to share
and go down to themes
where's themes there we go and you see
all the themes now I particularly like
Mint X you might like mint why there's
more mint wise there's others in here
some of these I don't think actually
work but they don't show up but anyway
what I wanted to do is since mint Y is
the default and it is a bit easier
I go down to Mint Y and you can see if
you drill down to GT k3 you can save
some other stuff I mentioned this in the
previous video but there is it that's it
that's the theme these are the icons all
right icons are a nightmare we don't
want to go there but this is the theme
it's about 4000 I am about 4,000 lines
long that's the theme of the code for
mint Y if I go back up here and why am i
picking mint while you can pick any one
you actually they'll all start out
slightly different but well since mint Y
is the default for an installation I
figured I better start with it as a as
the basis min X on the other hand which
is the one I actually like if you go
down here you'll see it's a whole bunch
of of CSS files that prints of one gtk
CSS is a one-liner and it simply starts
in porting the rest which is okay but I
don't really need that kind of trouble
so essentially I went to mint wine and I
go down stop that I go down I don't know
why it's having trouble that spinning
thing there
I go down to GTA 3 and I basically
copied this I'm not gonna do it because
I already have a copy I copied it over
to my directory now I'll kill that and
I'll bring up the directory which is
part 40 a as I'm calling it and you see
in the directory I have a gtk dot CSS
okay this this thing here is not being
not in use it's a it's a graphic I was
playing around with again icons icons
are a nightmare so at the risk of
causing problems I'll just delete that
and there's some old copies of the code
which I might as well delete right now
to get the confusion down alright so
basically I've got a compiled script
which is similar to the ones I've used
before I've got the full well I've
modified it but here it is this is the
I'm you know you obviously can't see
that but it's the full mint Y modified
there's my code
there's my Glade file that's an
executable then there's there is I've
gone and put this into a resource you
can load the the CSS from a file or you
can load it from a resource I discussed
resources in an earlier video but
basically you have this XML file and in
this XML file move it to the center here
it mentions what it is I'm loading and
Portland Glade is being loaded and GDK
dot CSS and what it does is when the
when the program gets compiled know and
I open it with some other application
please and where is the text editor in
the in the execute in the compile
there's an extra line here it was
covered in the earlier video but this
line right here G Lib - compile -
resources it should be part of your
package but you may have to load it it
basically takes the resource Doc's XML
and it generates a file called part one
resource at C and that is a it's a coded
version
of what you provided you could have in
here mentioning graphical images and so
forth in which cases be hexadecimal
representations of them but it creates a
file part one resource C which is then
part of the compilation this is the
compilation of the of the example
program so and you see this in so well
it's for example at me let me bring up
what part one resource dot C the thing
that's created and you see it's it's an
encryption or an encoding it's not
encryption it's just encoding a very
long one - it's all hexadecimal bytes
but it text wise it's quite long of the
material that was the data from me from
that exercise but anyway so that is
that's resource dot C problem on
resource dot C and that becomes part of
the compilation which means when I go to
my C and I go down to see it
this is gtk CSS provider load from
resource now get to this again but it's
loading it's not gonna be loading from a
file it's gonna be loading from this
resource and the resource is that
material that has been compiled into
your module so your module is fully
self-contained it doesn't can there's
not multiple files if you're going to
distribute it the large C file with the
the binary will have everything in it
and that's just one place where else do
I do it I guess someplace else
no I guess no no what did I do up here I
guess in the Builder was with the other
place I was going to do it I loaded it
from a file that should have been
switched over to a resource I won't
the file is still there but I'm loading
it from the file not the resource all
you do is change that to let's try it
load from resource and it
there's encoding things part ones
/ you can read up on how resources are
compiled but if you go back to the
original thing you'll see that there was
a there was this they're there they're
stacked whoops wrong one
under pseudo where is it there it is you
see the prefix part one up here
that's the prefix I'm putting in front
of them so anyway that's the prefix and
let's see if that compiles and it does
and is it run you get a sneak peak of
what we're going to look at it does run
so yeah now it's now I've loaded it from
the resource it's it's a minor point but
it's good if you're like I say if you're
going to distribute a binary and you
don't want to reduce multiple files so
when the binary loads up it has to go
and then go read files it's better that
that material is incorporated into your
distributable all right where are we
here well I've got the as I mentioned
I've got the the GDK CSS and you saw
what I did or you started to see it
let's go back to the the code here and
this is just a very small how many lines
is it's 52 lines of of C code that
implements this Glade over here and in
this Glade here I've got a slider I've
got a regular button and I've got my got
a scroll bar I should say which contains
a slider and I've got a checkbox okay
three very simple things these are not
Biggie's but they're just for purposes
of example all right so the trick to
applying they theme to your to your
entire program to your entire GUI
is right here and what this is going to
do is it's going to apply that gtk CSS
to your GUI okay everything now what
then what you're going to do is go ahead
and modify the gtk dot CSS and you'll
have your own theme it'll incorporate
everything that was in the Y theme
unless you modify it
there is a little bit of variation so if
I had this up after I do this I make a
program I use the wife theme and then
somebody change changes their desktop
theme 2x sometimes you'll see a little
bit of changes on the on the GUI that
you wrote that's because some mint Y may
not be setting the values for all of the
possible things that could be set in CSS
for a graphical user interface and mint
X may be setting some of those or
vice-versa I'm just saying I'm starting
with Mint Y and if you switch to mint X
you might see some little variation and
it's largely because of things men X is
taking care of that mint why didn't
admit Y I just let default but when you
switch over your desktop to being the
necks of those defaults become them in X
default so it's minor but it UK so if
someone says well why wasn't rigidly the
same regardless of which and that's what
I'm trying to get at here is that you
build an application and you want it to
be immune from what from people changing
the background
so they that all your widgets aren't
wandering around the screen so that's
where we're going anyway if you looked
at the code here to CSS provider ayahs
it get the pointer and then I load it
from the provider I'm using mu I'm using
a loading from resource or you could
load it from a file so it doesn't matter
so it's in the the provider has been
loaded from the in this case the
resource and this is the trick code
right here is that you style contest ad
provider for screen actually I
originally I thought that meant the
whole screen no it actually only means
as far as I can tell your screen and
what it is is you get the GDK which is
the actual desktop interface you get the
default for your for your program and
you put the provider in it and you set a
priority which is user level priority as
to who gets to paint it who's more
important when it comes to deciding
which which piece of CSS code to use so
user priority is the normal and you can
look these up there are others ok that's
it and everything
down here is just I didn't even I'd even
loads
I didn't even extract for button or
actually many for the checkbox but
there's the scroll value thing they are
there so if if the scroll value gets
changed it prints out on the screen and
here is this is the what is this here oh
that's the provider that actually takes
the that takes the provider and the
widget and paints it on to the widget
and it's um two lines of code but I put
it into a subroutine which I use it it
so in other words up here you I'm
calling well I don't do actually do it
anymore I guess I was I had some others
that was playing with but I actually
don't do it here no I don't do it yeah
because the painting is being done by
this DT cake style context ad provider
so that's taking care of it that other
function is for when you're in painting
individual widgets with the with a CSS
fragment okay so that's the code this is
the key line of code here it brings in
lateen which was originally of course a
full theme and it applies it to your GUI
in toto
so at this point if you made no changes
you are now
mint Y theme or whatever theme you
picked and you're you come up like that
regardless of the change of background
themes by the user
okay now we have to go down I'll get
this off the screen and we could
probably get that off the screen this
I'm in the actual gtk da CSS as you can
see down here this is the one that I
brought in and I've started playing with
it first of all as you probably know I
don't like grey backgrounds and I've put
a little I've commented out of Ridge
'''l parts and I've put xxx to indicate
where I'd made modifications so the
default background for everything is
gray 255 is it's the lightest color of
the red green blue and then there's the
transparency but the 240 240 is a very
light gray
said no let's have it read FF this is
the other way of doing color numbers
just make it plain old red so when I run
it and again I've compiled it and and I
run it there you will notice that this
the background is arguably red alright
so there is my red background
I'm obviously you probably don't want
something that garish but you can pick
your background color and that will stay
there
alright let's see see what the next one
is going down button and here's Roy's
obviously I did something to the button
as you can see this is the code for a
button in gtk and first of all I am the
minimum height which is as you can see
from the original was normally
twenty-two pills I made it a hundred and
twenty-two pixels so it's going to be
tall that's just for example you can do
anything you want but all of these
things you can play with you can play
with the minimum width minimum height
and so forth the border and instead of
one pixel giving it a nice discreet
border I said let's go over five pixels
the border radius radius it determines
the sharpness of corners and if you
increase the radius you're going to get
a curved corner or as buttons normally
or our right angles so it's it's a
pointy corner with a lid of the original
is three px which is a tiny little bit
of curvature 133 px it's gonna get round
let's see I did I play with padding
padding as though it's the left right a
left right top bottom extra pixel and I
think I did those don't look normal I
didn't put any X's on him color I
decided to go with green text in the in
the button instead of the default which
is 30 30 30 30 which is a slightly less
gray than 22 42 42 40 so it's a you know
that was their original color you could
see what I've doing and you can do this
to go through and hunt you have to hunt
in fact and find things the border color
which was a tiny little border and would
have originally been
no I guess I've played with this a cup
Oh the original color down here is a
gray another flavor of gray naturally
and I decided okay let's make it blow
let's see and then a the the background
image I added this line it wasn't in the
original on the button and I went to one
of these radial gradients with yellow
and blue and the background color as
white smoke but the image overtakes it
and there would be down here the
background image for for hover okay we
know checked excuse me when when you
check it here I think that's where we
are if I read all this code correctly I
it kind of revert this is the this is
the same image but in the yellow and
blue have been reversed but you can see
what I've done I've kind of messed it up
now they go over here you can see it
when I run when I here we here we are
you can see first of all it's really
oval there's the radius it's not squared
off you see the background image is
yellow in the center blue on the outside
you can see the text is in green this is
this is just an ordinary button with
with a with an icon in it and if I move
over at the hovering I played around
with the hovering as to what happens I
think I played around the hovering maybe
that's just normal but anyway the hover
you can play as to what's going to
happen
and finally when I click it you can see
the animation goes it reverses it goes
I'm holding down the button it goes to
blue in the center and yellow on the
outside so there is a rather large
comical looking button but the point of
which of this is is that once you get
the theme you can mess around with the
theme and and set the defaults for the
buttons this will be the default for all
the themes in your buttons let me go
back in here again
so yeah there it is and now I'm going to
change the back desktop background which
is always explosive on the system so I
mean I theme is mint X with Windows ME
borders and icons organ ohm so
I'm gonna go down and hit mint why it's
gonna change all that watch the watch
the the image here watch the GUI and
notice that very little changes there
was a slight change there was a slight
edging change there must be one
additional background edge here
oh the the the default background on the
slider changed too it's probably another
from white to to whatever color that was
I suppose if I if I were to and what I
picked there I mean I wanted to pin
that's meant why aqua I don't know I
thought that might see some color on the
screen I don't but you know there's some
minor changes which I can nail down
because once I see the change I can go
find the GTA GTA SA that I haven't been
that I didn't nail down and force it to
be what what I want it to be
many of these are defaulting to what the
system says alright so so I'll go back
to mint X and I won't bother changing
the well in in terms of the you know
customizing the icons or it uses mint X
icons obviously I want to change the
gnome you see that the only icon here is
the Preferences icon if I go to high
contrast you'll see that changes and if
you see if I go to Mint X changes again
so the icon appearance is depending upon
which icon set has been saved and it's
kind of difficult to override that it
can be done you it's more easy to
actually put your own icons in alright
so next one be the slider you can see I
the slider was gray against gray was
almost invisible so let me see what next
comes up here yeah here we are into the
here into the scroll bar I keep calling
it a slider because it contains a slider
but it is a scroll bar first of all what
I did there is I threw in a trough
minimum width of 5 pixels background
color yellow border radius of 10 pixels
and what did that look like you can see
you can see the background color is
yellow
and other things are not really showing
up I could put in a a border radius and
that would instead of being squared off
at the end it would be gonna be rounded
and so forth but ya see what the trough
I am into I do have border-radius here I
think that should should have seen
something more that's making a hundred
and see what happens I think that has an
effect I don't know some of these things
you have to be it's a lot of trial and
error to figure out exactly what doing
no it's not having any effect so that's
not where the Edit where the edging is
to is taking place so I don't know where
it is I'd have to find it it's around
someplace
now the scroll bar itself down here
let's see first of all the margin was
4px of transparent I made it four pixels
of blue that's why there's that blue
around the edge you see a greyish around
the agenda nor that's coming from it's
coming from around here someplace but
I'm you know you can hunt for it but
that gray edging is someplace it's a who
knows it's again you have to trial and
error to get it what else that's okay I
mean excuse me I am in the I keep
forgetting I'm in the I'm in the slot
and the slider I'm in the scrollbar I've
so I'm looking at the button and I'm
seeing the gray edge but alright the the
border is blue you can see the the
border around the the scroll is below
and then I start moving it you can see
the thing respond so yeah that we did
that alright so again I'm not gonna do
all the possible things it's it is tends
to be trial and error to figure out what
each were these things has an effect on
the screen but this is where you're
gonna find them and it then once you've
nailed them down you've nailed them down
and if you mark it so that you can you
know you can find what you did the next
one is buttons and our check buttons and
salt applies to radio buttons is you
know that's pretty ordinary but is that
if if you if you just bring it in as
is it won't work this check is oddly
enough the unchecked version of a button
and this is that there's a regular
checkbox a radio button is the same
it'll say radio check or something like
that but they're comparable but anyways
a regular checkbox and it comes in with
this code okay the icon source and it
gives a URL and that URL is supposed to
point into apparently the the assets of
the of the of the file as a fuss there's
a subdirectory called assets in the
theme and you'll see it there over on in
slash user slash theme slash slash
shares last themes it'll be down there
and that's where it picks up these these
this is the unchecked dot PNG and
there's two of them because it's it's
possible to see it's set up to scale
them so the the button can get bigger or
smaller it doesn't really happen very
often and but but anyway it's in the ia
gives the icon source the problem is the
way we've just done it if this is turned
on you will see nothing it's not getting
the icon for unchecked if however you
comment it out it defaults back to the
system and you will get what the system
shows so the system for a checkbox is an
X and I me let me just go over to Mint
why and why you see it change to a
checkmark
okay which is what mint why normally
does the point I'm making is that by
removing it here from the specification
from the CSS it defaults to whatever the
underlying theme should be and that's an
X in a mint X and it's a check by a
checkmark in mint Y so so if you if you
have it in there and I'll remove these
comments here be careful with comments
oops
funny things can happen because they
scare these this the parsing of a GT of
a CSS file is not all that great and you
can't have comments embedded within
comments or anything like that so we'll
get rid of that and we'll compile it
again and we'll run it again and you
notice it's missing missing Dom all
right so the point being that it can't
find these these icons I have not
figured out I can get it to find the
icon in the URL if you put down a fully
explicit part path saying file colon
slash slash slash the final slash being
the root home slash your name slash
directory slash until you actually get
down to the file
uncheck ping it'll work but you don't
want to give a fully explicit trying to
get the relative 2-packs the paths to
work I've had no luck there is a way of
attempting to do it relatively they say
it should work it hasn't worked for me
it's in there someplace I just haven't
figured it out but nonetheless you can
put an explicit path down there you can
also put your own icons in there and if
you go into the icon browser ok slight
edit here going into the icon browser
which I have on my desktop you can
download it I think I mentioned on a
previous one and you can pick from
there's a lot of different icons in here
I'm going for the emotes and let's say
face laughs that's it's named face
laughs that's the important thing
and over here I am going to I've pasted
it yes it from a different different
piece of code that's how you do it it's
icon theme gtk icon theme any of those
icons that are part of the standard
system icons you can put in there with
icon
theme and let's see compile it and run
it and you see the it's a happy face if
I click it well nothing happens when I
click it because what let's let's go
down to to paste that back in but we're
going to change it to I think face plane
I think that was one of the other ones
there and you gotta give it something to
hang on to whoops it's not to start I
have to shut it down before I compile it
all right there is my you see that face
changes so forth and you can put any any
icon in there that's a part of a
standard system icon getting into the
into the theme icons at the moment all
you have to is you'll have to just back
out and let the default appear but let's
see let's go do a change in background
and I'm in I guess mint acts and we will
go to mint Y and see if anything changes
nothing a few things rearranged a little
bit because this icon is not exactly the
same size the icon spacing is a little
different in the different themes but
it's fairly negligible hopefully I can
figure out how to get the icons to and
to come up better than they have but
there you are
if you have if you want to lock your GUI
down completely get a theme modify the
theme and then incorporate the theme
into your GUI and then you've pretty
much locked it down and you're immune
from people actually going in there and
fidgeting with the backgrounds and with
the underlying theme and making your GUI
look silly alright that's enough for
today