theme skin

[katsu1110]

Thanks for a great repos. Is there a way to change the color skin (e.g. minimal_mistakes_skin) from the default?

[katsu1110]

I kind of made it work, by disabling 'assets' by putting 'assets' into the exclude list in the _config.yml.
If you do it, you can change the skin of your website by putting the following on top of everything in the _config.yml

plugins:

• jekyll-remote-theme
  remote_theme : "mmistakes/minimal-mistakes"
  minimal_mistakes_skin : "dark" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"

[derekpowell]

I'd like to try this out, could you write that code in a code block?

[katsu1110]

Oh yes, sure

simply add the following in the beginning of your "_config.yml"

plugins:
  - jekyll-remote-theme
remote_theme           : "mmistakes/minimal-mistakes"
minimal_mistakes_skin    : "dark" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"

Then just put 'assets' in the list of 'exclude' in the "_config.yml" to disable all the css.

# Reading Files
include:
  - .htaccess
  - _pages
  - files
exclude:
  - "*.sublime-project"
  - "*.sublime-workspace"
  - .asset-cache
  - .bundle
  - .jekyll-assets-cache
  - .sass-cache
  - assets`

Once you push it, your website should have a 'dark' skin with little loss of the format:)

[anebz]

Tried it, the skin is indeed dark but the sidebar is pushed all the way to the left and the navbar on top is slightly disfigured, @katsu1110 is this what you mean by little loss of the format? :) or is there something I'm missing?

Edit: I found the official configuration page where it says the only necessary thing to do is add:

minimal_mistakes_skin: "dark"

but it's not working for me.

[katsu1110]

@anebz Exactly, this is what I meant. For this academic pages, it seems that there are some unique changes in css from the original minimal_mistakes, which prevent us from changing the theme easily.

[nicklalone]

It's a shame that your method of doing it seems to remove all iconography on the profile page. I wonder which asset specifically is blocking the theme content.

[anebz]

Exactly, especially since it's supposed to be a simple one line addition, according to the documentation.

[eisenjulian]

Was anyone able to make this work?

[anebz]

I wasn't :(

[datasumowrestler]

Had the same problem. This worked for me:
https://github.com/mmistakes/minimal-mistakes/issues/1339

In _config.yml, add/ edit the following:
url: "https://vg.github.io"

[bensdm]

can you detail please?

[mrsandeshbhat]

I was able to change the theme of my academic pages website using the color values listed in the _sass/skins/dark.scss file into the _variables.css file as can be seen here

my _variables.scss file can be viewed here

[anebz]

Thanks so much @mrsandeshbhat ! It worked 😎

[steipatr]

I was able to change the theme of my academic pages website using the color values listed in the _sass/skins/dark.scss file into the _variables.css file as can be seen here

my _variables.scss file can be viewed here

@mrsandeshbhat, Are any further changes needed to propagate these color value changes? I tried editing my _variables.scss but the website colors appear unchanged.

[anebz]

I was able to change the theme of my academic pages website using the color values listed in the _sass/skins/dark.scss file into the _variables.css file as can be seen here
my _variables.scss file can be viewed here

@mrsandeshbhat, Are any further changes needed to propagate these color value changes? I tried editing my _variables.scss but the website colors appear unchanged.

@steipatr I tried doing these changes and it worked

[steipatr]

@anebz Thanks! I copied your the contents of your _variables.scss into mine, but nothing changed whatsoever. So bizarre. Are the skins you created also needed? That seems unintuitive, since they are not activated anywhere.

[anebz]

@steipatr yeah the skins aren't referenced anywhere, I don't understand much CSS I just added the skins and it works for me. DId you manage to make it work without the skins?

[steipatr]

@anebz I'm a complete CSS noob. Couldn't get any color changes to work with the academicpages template. Trying minimal-mistakes now and it works as expected there, so trying to get a better understanding of how the different files work together in that.

[pritishmishra]

@steipatr Clone your repo to local. Remove Gemfile.lock file. Run the command bundle exec jekyll liveserve as given in Readme.
Push your changes to your github repo now.
Visit your webpage now and it should reflect the changes.

[eashanadhikarla]

I want to try out smaller fontsize for the entire website. I am not sure which one to edit. Can someone point me out the right place. Thanks!

[ryo-ARAKI]

I was able to change the theme of my academic pages website using the color values listed in the _sass/skins/dark.scss file into the _variables.css file as can be seen here
my _variables.scss file can be viewed here

@mrsandeshbhat, Are any further changes needed to propagate these color value changes? I tried editing my _variables.scss but the website colors appear unchanged.

I have been suffered by the exact same problem as @steipatr mentioned.
I did implement the changes @anebz shared with us and nothing happened on the local build & after git push ed to the remote server.
However, the next morning I found the dark theme is successfully applied.
I am completely new to CSS so have no idea what is going on in the background, but I would suggest you wait for a couple of days if you have experienced this kind of weird behavior.

[menisadi]

I was able to change the theme of my academic pages website using the color values listed in the _sass/skins/dark.scss file into the _variables.css file as can be seen here

my _variables.scss file can be viewed here

Tried and it worked! Thanks!
Only issue: the footer (with the copyright text) is still white for some reason. Any idea how to make it dark also?

[angadhn]

I was able to change the theme of my academic pages website using the color values listed in the _sass/skins/dark.scss file into the _variables.css file as can be seen here
my _variables.scss file can be viewed here

Tried and it worked! Thanks! Only issue: the footer (with the copyright text) is still white for some reason. Any idea how to make it dark also?

As was done in _variables.css, you need to go in and manually change this in _sass/footer.scss. My solution is here.

[g-h-chen]

plugins:

• jekyll-remote-theme
  remote_theme : "mmistakes/minimal-mistakes"
  minimal_mistakes_skin : "dark" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"

This works for me! The thing is that you need to wait for 10~15 min before the server can sync all the changes (I guess).

[inspirepassion]

I was able to change the theme of my academic pages website using the color values listed in the _sass/skins/dark.scss file into the _variables.css file as can be seen here

my _variables.scss file can be viewed here

I encountered the issue (as shown in the pic below) after I only changed the color values in _sass/ _variables.scss to my liking theme skin. The background color for the heading part is supposed to be the same as the background_color, however, it's always white. After some digging, I realized the masthead element of the webpage had fixed the color to white. If you encounter the same situation, in order to change that, you can go to file _sass/_masthead.scss, find the below code, and change the background color variable from white to the value of $background-color

.masthead {
  position: fixed;
  //background: white;
  background: $background-color;
}

[400Ping]

I was able to change the theme of my academic pages website using the color values listed in the _sass/skins/dark.scss file into the _variables.css file as can be seen here
my _variables.scss file can be viewed here

I encountered the issue (as shown in the pic below) after I only changed the color values in _sass/ _variables.scss to my liking theme skin. The background color for the heading part is supposed to be the same as the background_color, however, it's always white. After some digging, I realized the masthead element of the webpage had fixed the color to white. If you encounter the same situation, in order to change that, you can go to file _sass/_masthead.scss, find the below code, and change the background color variable from white to the value of $background-color

.masthead {
  position: fixed;
  //background: white;
  background: $background-color;
}

From mobile, after clicking the follow button. The hover background is originally white, making it hard to read the text. As shown in the picture down below, by changing the code below can make the color as same as the background.

[SourojitGhosh]

I wanted to only edit the background color of the masthead (similar to this website) and thus added some background labels in the masthead.css file. But I cannot seem to get one part of the default background to go away. Anyone knows how to fix?

[rjzupkoii]

The _sass directory was reorganized and support for themes added. A dark mode theme has been added with v0.8.3 release, see the wiki for more details.