CSS questions regarding Menu fonts, sidebar width and image alignment

• 

  bastelschaf · Member · Sep 30, 2018 at 5:29 pm

  • Copy link
  • Add topic to favorites

  Hi there!
  I have three issues I need help with. The site is bastelschaf.com, the theme is Arcane.

  1) The font of the menu is not the same as for the rest of the blog. Can I change the menu font?

  2) How can I make the sidebar slightly smaller in percentage to the content area? I don’t know how much percent of the page it gets now, seems to be about a third. A quarter would be nice!

  3) I just added a text widget on the top position of the sidebar. (There isn’t a better way to display a little “about me” area, is there?)
  It contains an image, which unfortunately isn’t aligned with the text (the top of the image). Also, the empty space around that image is a bit wide. Last: If I wanted to have a thin, grey border around that widget (like the theme has between the post excerpt on the start page), how would I do that? I don’t know yet if this will look good but I’d like to try.

  Thank you very much in advance!!!

  Best
  Connie

  The blog I need help with is: (visible only to logged in users)

• 

  dkmyta · Member · Sep 30, 2018 at 7:14 pm

  • Copy link

  Hi there!

  1) The font of the menu is not the same as for the rest of the blog. Can I change the menu font?

  Before we go about immediately changing this with CSS, double check that you are not able to make these necessary change within the Fonts section of your Customizer. For more information on this potential process, review the follow docs:

  https://en.support.wordpress.com/custom-fonts/

  If this is a no-go, the following CSS will allow you to target this area and apply the font-family of your choice. I have applied the default theme font so the menu is now inline with the remainder of the page:

  .sf-menu {
      font-family: "fertigo-pro-1","fertigo-pro-2",sans-serif;
  }

  2) How can I make the sidebar slightly smaller in percentage to the content area? I don’t know how much percent of the page it gets now, seems to be about a third. A quarter would be nice!

  You are correct in your assumption of the proportions given to these areas. The following CSS will apply your request:

  /*Adjust column proportions to 3/4 for primary and 1/4 for sidebar for applicable screen widths*/
  @media (min-width: 1200px)
  .col-xl-8 {
      width: 75%;
  }
  .col-xl-4 {
      width: 25%;
  }
  }
  
  @media (min-width: 992px)
  .col-lg-8 {
      width: 75%;
  }
  .col-lg-4 {
      width: 25%;
  }
  }

  3) I just added a text widget on the top position of the sidebar. (There isn’t a better way to display a little “about me” area, is there?)
  It contains an image, which unfortunately isn’t aligned with the text (the top of the image). Also, the empty space around that image is a bit wide. Last: If I wanted to have a thin, grey border around that widget (like the theme has between the post excerpt on the start page), how would I do that? I don’t know yet if this will look good but I’d like to try.

  After a few attempts, I believe all of what you are looking to achieve here is doable however before I take a look any further perhaps it would be best decide exactly how you would like this to be styled. Would you like image larger? How would you like it aligned with the text (centered, above, etc)? Would you like this grey border surround the entire widget or a specific side? Once you decide exactly how you would like it I can provide the CSS to accomplish this.

  I hope this helps, and get back to me if any of the code given provides unforeseen results – as I was only able to use the basics to view the code in place I was unable to test on all the pages of your site.

  I look forward to hearing back soon.

  Cheers

• 

  dkmyta · Member · Sep 30, 2018 at 7:16 pm

  • Copy link

  I apologize, I am missing some vital brackets to the code given above – please use the following instead:

  /*Adjust column proportions to 3/4 for primary and 1/4 for sidebar for applicable screen widths*/
  @media (min-width: 1200px) {
  .col-xl-8 {
      width: 75%;
  }
  .col-xl-4 {
      width: 25%;
  }
  }
  
  @media (min-width: 992px) {
  .col-lg-8 {
      width: 75%;
  }
  .col-lg-4 {
      width: 25%;
  }
  }

• 

  bastelschaf · Member · Oct 9, 2018 at 9:11 pm

  • Copy link

  Dear dkmyta,

  thank you so much for your help! Sorry I couldn’t try out your adjustments sooner. But now I did :)
  So: The CSS for the Fonts worked fine when I put just “fertigo-pro” in the brackets, not the 1, 2 and sans-serif part. But thats fine

  The sidebar adjustments worked fine for the desktop screen – on my mobile though the sidebar looks now VERY slim! Is there a way to make it look full width, since it is located below the posts (not beside them) anyways? Haven’t tested on a tablet yet.

  As for the widget: the image size is fine, just the alignment and the space around the image is bothering me. I’d like to have the top of the image aligned with the upper end of the ascenders of the typo. And the space around the Image reduced to 2/3 maybe. Can you help me with that?

  Thank you so much in advance!

  Best, Connie

• 

  bastelschaf · Member · Oct 12, 2018 at 10:50 am

  • Copy link

  Ok, for some reason now the sidebar works on a mobile screen as well – weird.

  What’s still not ideal is the not-alignment of the first widget as mentioned above. Could you maybe have a look at that? And also the space around the Image? That would be a big help!

  Thanks!
  Connie