Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I change the color of the text and favicons in the sidebar menu? #312

Closed
everetr opened this issue Nov 11, 2018 · 4 comments

Comments

@everetr
Copy link

commented Nov 11, 2018

Question

How can I change the color of the text and favicons in the sidebar menu? I think white text blends in too well with the default background photo, as well as the background photo I chose to replace it with. See here:

image

Configuration

  • OS: Ubuntu 18.04.1 LTS Bionic Beaver
  • Browser: Firefox for Ubuntu 63.0 (64-bit)
  • Hugo version: 0.51
  • Tranquilpeak version: 0.4.4-BETA
  • Do you reproduce on https://tranquilpeak.kakawait.com demo?: Not relevant, I think.
@fu-sen

This comment has been minimized.

Copy link

commented Dec 3, 2018

About text color, This seems to be fixed at the theme level.

My blog ( https://balloon.gq/ ) is changing text colors using custom CSS.

config.toml

  [[params.customCSS]]
     href = "css/mystyle.css"

static/css/mystyle.css

#sidebar .sidebar-profile .sidebar-profile-name
{
    color: #252525;
}
#sidebar ul.sidebar-buttons li.sidebar-button .sidebar-button-link
{
    color: #252525;
}
@media only screen and (min-width: 1280px)
{
  #sidebar[data-behavior="1"] .sidebar-profile .sidebar-profile-bio,
  #sidebar[data-behavior="1"] .sidebar-profile .sidebar-profile-job,
  #sidebar[data-behavior="1"] .sidebar-profile .sidebar-profile-location 
  {
    color: #252525;
  }
}

Perhaps you have to add more.

I thought that the option to change the font color may exist in the theme.

2018-12-03 21 56 47

@fu-sen

This comment has been minimized.

Copy link

commented Dec 3, 2018

About Favicon,
Does it show the image to the left of the text?

This uses Font Awesome.
Please pay attention to the description of fa-iconname.

config.toml

[[menu.main]]
  weight = 1
  identifier = "home"
  name = "Home"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-home\"></i>"
  url = "/"
  [[params.sharingOptions]]
    name = "Facebook"
    icon = "fa-facebook-official"
    url = "https://www.facebook.com/sharer/sharer.php?u=%s"
@everetr

This comment has been minimized.

Copy link
Author

commented Dec 4, 2018

This worked. Thank you very much! I really appreciate the detailed answers you gave.

Note to anyone reading this: fu-sen's first comment fixed both my text and favicon color issues.

@everetr everetr closed this Dec 4, 2018

@vidyasagarbhargava

This comment has been minimized.

Copy link

commented Jul 2, 2019

On hovering the color changes to white how to keep it black?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.