It seems that you're using an outdated browser. Some things may not work as they should (or don't work at all).
We suggest you upgrade newer and better browser like: Chrome, Firefox, Internet Explorer or Opera

×
Community
General discussionHow To Increase Sidebar Width in GOG Galaxy(11 posts)(11 posts)
(11 posts)
Pages:
1
This is my favourite topic
Posted February 18, 2017
Apologies if this has been covered before.

I find it a bit annoying that the Galaxy sidebar cannot be expanded easily because, none of the view choices fit the game titles into the default width very well. So, I had a look through the installation folder and it looks like the layout is HTML / CSS based.

If you go into the installation directory > web > styles, you should see a file called: main.css. Open that and press CTRL+F, to bring up a find box. From there type 300px, there should be only one. This is the value for the width (in pixels) of the sidebar. Change this to anything you like, and save. I changed mine to 600px.

When you open Galaxy, the sidebar should be wider. I am sure more can be done with the styling but, I think this is good enough for me.
Attachments:
capture1.jpg (274 Kb)
capture2.jpg (268 Kb)
Posted February 18, 2017
Useful, thank you!
Posted February 18, 2017
avatar
kbnrylaec: Useful, thank you!
My pleasure :)
Posted February 18, 2017
avatar
ummagoomba: Apologies if this has been covered before.

I find it a bit annoying that the Galaxy sidebar cannot be expanded easily because, none of the view choices fit the game titles into the default width very well. So, I had a look through the installation folder and it looks like the layout is HTML / CSS based.

If you go into the installation directory > web > styles, you should see a file called: main.css. Open that and press CTRL+F, to bring up a find box. From there type 300px, there should be only one. This is the value for the width (in pixels) of the sidebar. Change this to anything you like, and save. I changed mine to 600px.

When you open Galaxy, the sidebar should be wider. I am sure more can be done with the styling but, I think this is good enough for me.
I posted similar somewhere in the forums ages ago last year or so along with some other related changes. They all work but unfortunately they get blown away every time Galaxy is updated, and you can't just lock the files from being overwritten nor back them up and restore your original later because GOG actually updates those files with new content regularly which could cause problems if it gets blown away also.

The files are a jumbled compacted mess so there is no decent way to track changes as-is either. The only way to customize it and track new releases is to do something like passing the files through some kind of cssindent type program or similar, importing it into a git repository or similar, making changes to it and committing them, then recompacting the deployed files. When it is updated, taking the updated file and auto-indenting it the same why, creating a diff between that and the prior GOG original and merging it with your changes in the git repo head and exporting a copy and recompacting it. A bit of a pain in the ass but some of it could be automated with scripts etc. I've been meaning to do that but never got around to it.

Would be nice if GOG provided a way to customize it officially in the future though which doesn't have all these hassles/problems. Even Steam client can be skinned/tweaked officially in a safe manner.

Oh, BTW there are another one or two things you need to tweak for the entire sidebar to expand properly. It's been a while so I don't remember what each was, but one was 400px IIRC or something different from the sidebar itself and I had to resize a few things. It was the size of the downloader bar at the bottom which is separate. HTH
Post edited February 18, 2017 by skeletonbow
Posted February 18, 2017
avatar
ummagoomba: Apologies if this has been covered before.

I find it a bit annoying that the Galaxy sidebar cannot be expanded easily because, none of the view choices fit the game titles into the default width very well. So, I had a look through the installation folder and it looks like the layout is HTML / CSS based.

If you go into the installation directory > web > styles, you should see a file called: main.css. Open that and press CTRL+F, to bring up a find box. From there type 300px, there should be only one. This is the value for the width (in pixels) of the sidebar. Change this to anything you like, and save. I changed mine to 600px.

When you open Galaxy, the sidebar should be wider. I am sure more can be done with the styling but, I think this is good enough for me.
avatar
skeletonbow: I posted similar somewhere in the forums ages ago last year or so along with some other related changes. They all work but unfortunately they get blown away every time Galaxy is updated, and you can't just lock the files from being overwritten nor back them up and restore your original later because GOG actually updates those files with new content regularly which could cause problems if it gets blown away also.

The files are a jumbled compacted mess so there is no decent way to track changes as-is either. The only way to customize it and track new releases is to do something like passing the files through some kind of cssindent type program or similar, importing it into a git repository or similar, making changes to it and committing them, then recompacting the deployed files. When it is updated, taking the updated file and auto-indenting it the same why, creating a diff between that and the prior GOG original and merging it with your changes in the git repo head and exporting a copy and recompacting it. A bit of a pain in the ass but some of it could be automated with scripts etc. I've been meaning to do that but never got around to it.

Would be nice if GOG provided a way to customize it officially in the future though which doesn't have all these hassles/problems. Even Steam client can be skinned/tweaked officially in a safe manner.

Oh, BTW there are another one or two things you need to tweak for the entire sidebar to expand properly. It's been a while so I don't remember what each was, but one was 400px IIRC or something different from the sidebar itself and I had to resize a few things. It was the size of the downloader bar at the bottom which is separate. HTH
I don't know how the CSS file looks, so let's assume the sidebar has an id of "sidebar", and thus its styles (the width, among others) are in #sidebar {...} (if it uses a class instead of id, replace the pound sign (#) in all these lines with a full stop (.), also -of course- switch "sidebar" for whatever class or id is used)
Now, you could make a script that checks the last line of the relevant file and see if it is "#sidebar { width: 600px }", and if not, add that line to the end of the file.

The rules of CSS state that if a certain style of the same element is set multiple times, the last is what defines which is used. Thus, if you set a new width (for #sidebar, in this case) at the end of the file, that should override what's set before.
Post edited February 18, 2017 by Maighstir
Posted February 18, 2017
avatar
skeletonbow: ---8<---snip--->8---
I posted similar somewhere in the forums ages ago last year or so along with some other related changes. They all work but unfortunately they get blown away every time Galaxy is updated, and you can't just lock the files from being overwritten nor back them up and restore your original later because GOG actually updates those files with new content regularly which could cause problems if it gets blown away also.

The files are a jumbled compacted mess so there is no decent way to track changes as-is either. The only way to customize it and track new releases is to do something like passing the files through some kind of cssindent type program or similar, importing it into a git repository or similar, making changes to it and committing them, then recompacting the deployed files. When it is updated, taking the updated file and auto-indenting it the same why, creating a diff between that and the prior GOG original and merging it with your changes in the git repo head and exporting a copy and recompacting it. A bit of a pain in the ass but some of it could be automated with scripts etc. I've been meaning to do that but never got around to it.
---8<---snip--->8---
Personally, I use emacs for such HTML/CSS tasks. I haven't done much of anything with Galaxy's HTML/CSS stuff other than try a couple of the changes you (skeletonbow) recommend ages ago, as you say. That worked out, but I have a personal stylesheet for gog.com that I activate with Safari in its Advanced preferences, so for now I prefer a web browser with personal styles and gog.com instead of Galaxy.

What I would do if I wanted to customize the CSS for Galaxy, even if I didn't have emacs, would be to create a plain text file and keep notes in it about the changes I'd make to whichever files. Those notes would include:
• The name of the file.
• The name of the CSS selector for the ruleset, and the properties and values to change/add.
—That gives me key words (class names, property names, values, etc.) to search for finding the selector (if it hasn't changed) or for finding something similar if a minor change was made in the upgrade to the overall CSS styles.
• If I did a search/replace when editing, then I'll probably copy/paste the search and replace values so I can copy/paste them from my notes file next time.

In essence, I would use copy/paste to make my notes about the changes I make. Then when a file changes, for example with Galaxy that would mean after it's updated, I would use copy/paste to implement the search within the relevant file and then copy/paste to implement the replacement. That's actually very little to do, prevents typographical errors on my part, requires no special applications or scripting, no backup software or version control, and relies on tried and true copy/paste into a plain text file and re-implementing from that plain text file.

Note-taking and copy/paste. It's better than custom scripting, IMHO.

Oh, and if re-indenting an HTML or CSS file is desired for temporary viewing (for whatever reason), and I"m without a syntax coloring text viewer/editor (for example, I'm without emacs for whatever reason) then I'd say use a web browser. Web browsers nowadays (2017) seem to automatically re-indent HTML files and CSS files when viewed as the source for a page. Though, a CSS file all by itself in a web browser will likely look formatted the same way it was written. It seems like a CSS file has to be referenced from within an HTML page to trigger the auto-reformatting of the CSS.

To make that happen for a specific CSS file, simply make a new HTML file (append .html as the extension, for example "test.html") that references that specific CSS file. The only HTML needed for this in an HTML file is one single line with a <link> element with the rel attribute and href attribute. Nothing else is needed in the file.

<link rel="stylesheet" href="file:///Wherever/GOG/Put/It/On/Your/Computer/whatever-the-name-GOG-gave-it.css">

Then drag and drop that HTML file (perhaps you named your html file "test.html"?) into a web browser and view the source, in particular its CSS resources. There should be a way choose the referenced CSS file, which then will show it automatically re-formatted by the web browser. Safari seems to do this, and search is available, too, with Command-F after clicking into the CSS part of the inspector.

Again, no special applications, and the procedure is simply to edit a plain text file (albeit an HTML file) with only one HTML element. Unless the name of the CSS file changes in an update to Galaxy, or its path, then that HTML file will continue to work without further modifications for viewing the CSS file automatically reformatted even after Galaxy updates. Assuming that's desired. Oh, of course, if there is more than one CSS file desired for viewing, simply add another <link> element in the same file, because there can be as many <links> as desired. Well, depending how large infinity is… Sometimes that's a smaller number than expected.
avatar
Maighstir: ---8<---
The rules of CSS state that if a certain style of the same element is set multiple times, the last is what defines which is used. Thus, if you set a new width (for #sidebar, in this case) at the end of the file, that should override what's set before.
Absolutely true. Though it's also important to keep specificity of the selector in mind.

Or, simply always use "!important" (an exclamation mark "!" followed by the word "important") for each changed property for any rulesets appended to the very end of the CSS file. That always works to override any previous styles regardless of specificity as long as the selector actually matches the intended element.
Post edited February 18, 2017 by thomq
Posted February 18, 2017
So much great info here guys. I might have a play about with the things you suggested, to see if there are any other tweaks, such as expanding out the download sidebar.

Cheers
Posted February 18, 2017
avatar
ummagoomba: ~snip~
Thanks for the tip! I changed mine to 375px, which is about 25% of my screen (1600 × 900).

One thing I like to do: adding
border-radius: 5px;
to the
[i-sidebarGame~="layoutExpanded"] [i-sidebarGame-image]
block to round the corners of the game thumbnails when in expanded list view (the default is no rounding), as seen in the attachment. It’s really not much but pretty much all the other elements are rounded, so I think this one should be as well.
avatar
Maighstir: The rules of CSS state that if a certain style of the same element is set multiple times, the last is what defines which is used. Thus, if you set a new width (for #sidebar, in this case) at the end of the file, that should override what's set before.
Really? So, I could do (see below), store it somewhere and put it back at the end of the file every time Galaxy is updated?
/* Ha! Screw you, update process! */

~my changes~
Edit. Had missed a comma. :(
Attachments:
before.png (91 Kb)
after.png (91 Kb)
Post edited February 18, 2017 by Tyrrhia
Posted February 18, 2017
avatar
Maighstir: ---8<---
The rules of CSS state that if a certain style of the same element is set multiple times, the last is what defines which is used. Thus, if you set a new width (for #sidebar, in this case) at the end of the file, that should override what's set before.
avatar
thomq: Absolutely true. Though it's also important to keep specificity of the selector in mind.

Or, simply always use "!important" (an exclamation mark "!" followed by the word "important") for each changed property for any rulesets appended to the very end of the CSS file. That always works to override any previous styles regardless of specificity as long as the selector actually matches the intended element.
Of course, a more specific selector will normally override a less specific one (not going into child element specifications, because that adds a whole other level of fuckery).

div {...} will set the style of all "div" elements and descendants (any "div" element")
.testclass {...} will override the above (any element with class "testclass")
div.testclass {...} overrides a generic class (any "div" element with class "testclass")
#testid {...} will override all of the above (the one specific element with ID "testid" - each ID should only occur once in a document, so you can't really get more specific than this, anything else can potentially refer to multiple elements)

Though any property with !important can only be overridden by other propreties also having the same keyword.
so, div { color: red !important; } will set the text colour of ALL divs to red, even if a #testid { color: green; } is specified later, but a .testclass { color: teal !important; } will override the "red" because it had both a higher specificity AND the !important keyword.
Posted February 19, 2017
avatar
Maighstir: I don't know how the CSS file looks, so let's assume the sidebar has an id of "sidebar", and thus its styles (the width, among others) are in #sidebar {...} (if it uses a class instead of id, replace the pound sign (#) in all these lines with a full stop (.), also -of course- switch "sidebar" for whatever class or id is used)
Now, you could make a script that checks the last line of the relevant file and see if it is "#sidebar { width: 600px }", and if not, add that line to the end of the file.

The rules of CSS state that if a certain style of the same element is set multiple times, the last is what defines which is used. Thus, if you set a new width (for #sidebar, in this case) at the end of the file, that should override what's set before.
In short, the CSS files are a big complex compacted mess with no spaces or punctuation throughout that is almost indecipherable to human eyes. One can load the pages in Firefox or Chrome and use their editing functions to change the CSS, then reload it in Galaxy (must be restarted), but that just helps to find out what the correct parts of the CSS are to change. The problem remains on how to make the changes survive updates without a lot of effort. It could be scripted potentially as you suggest depending on what the particular changes are. Personally I find GNU diff or something compatible to be a nice universal way to deal with such things. It's generic and doesn't require manual coding or per change knowledge or tinkering so the time spent dealing with upgrades is potentially kept to a minimum.

GOG themselves do use git for some internal project management (there are breadcrumbs of it online on github and elsewhere), so it is highly likely that they keep the sources of the html, css, and js inside git repositories themselves and when they build the client it takes the pristine human-readable/editable versions of the files and runs it through some compactor for a combination of optimization and semi-obfuscation benefits.
Posted February 19, 2017
avatar
Maighstir: I don't know how the CSS file looks, so let's assume the sidebar has an id of "sidebar", and thus its styles (the width, among others) are in #sidebar {...} (if it uses a class instead of id, replace the pound sign (#) in all these lines with a full stop (.), also -of course- switch "sidebar" for whatever class or id is used)
Now, you could make a script that checks the last line of the relevant file and see if it is "#sidebar { width: 600px }", and if not, add that line to the end of the file.

The rules of CSS state that if a certain style of the same element is set multiple times, the last is what defines which is used. Thus, if you set a new width (for #sidebar, in this case) at the end of the file, that should override what's set before.
avatar
skeletonbow: In short, the CSS files are a big complex compacted mess with no spaces or punctuation throughout that is almost indecipherable to human eyes. One can load the pages in Firefox or Chrome and use their editing functions to change the CSS, then reload it in Galaxy (must be restarted), but that just helps to find out what the correct parts of the CSS are to change. The problem remains on how to make the changes survive updates without a lot of effort. It could be scripted potentially as you suggest depending on what the particular changes are. Personally I find GNU diff or something compatible to be a nice universal way to deal with such things. It's generic and doesn't require manual coding or per change knowledge or tinkering so the time spent dealing with upgrades is potentially kept to a minimum.

GOG themselves do use git for some internal project management (there are breadcrumbs of it online on github and elsewhere), so it is highly likely that they keep the sources of the html, css, and js inside git repositories themselves and when they build the client it takes the pristine human-readable/editable versions of the files and runs it through some compactor for a combination of optimization and semi-obfuscation benefits.
You only need to beautify/prettify it once, figure out what selectors and attributes you need, then make a new file with just the pieces and changes you want. Then, after each patch, append your own file to the end of GOG's, and your rules should override theirs (unless they rename the classes/id's or change the selectors in other ways every patch, which seems rather unlikely).
Post edited February 19, 2017 by Maighstir
Pages:
1
This is my favourite topic
Community
General discussionHow To Increase Sidebar Width in GOG Galaxy(11 posts)(11 posts)
(11 posts)