How to add space between header and sidebar?

  • Resolved yanghoyun

    (@yanghoyun)


    9 years, 6 months ago

    Issue: Want to add space above “Recent Post” text and below banner image.

    URL: https://www.we-impact.com/blog/

    Ideally, I’d like to push the sidebar down, i.e. add padding to the top of the side bar to make it inline with the body text.

    I don’t know CSS very well but know how to add custom CSS through the Appearance tab on the dashboard. This is a custom theme and have been advised only to make changes through the Custom CSS functionality. Can anyone help?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator t-p

    (@t-p)

    There are many tools available for this kind of CSS work, for example:
    – Firefox with Firebug add-on: Help info on Firebug https://getfirebug.com/faq/
    – Newer IE/Chrome, etc., have similar tools
    – Alternately, try a dedicated CSS resource such as https://www.css-discuss.org/
    – Also, consider creating a child theme otherwise all your customization will be overwritten when you next update your theme. Alternately, use Custom CSS Manager plugin: https://www.ads-software.com/plugins/custom-css-manager-plugin/

    I think there are many ways to provide a small space between the banner and the sidebar. Maybe you can adjust the positions of either the banner or the sidebar. You can move the banner upward or the sidebar downward.

    Also, you can also make the banner a little bit smaller so it can provide a little space between.

    You can find these things in style.css. It’s quick and very easy plus you can learn other tricks by reading some more.

    Hope I helped you.

    Thread Starter yanghoyun

    (@yanghoyun)

    Thank you for the suggestions, I’m eager to learn more.

    However, part of my problem is that I’m using a custom theme created by a developer and the style.css file in themes folder says:

    WARNING! DO NOT EDIT THIS FILE!

    To make it easy to update your theme, you should not edit the styles in this file. Instead use the customizer custom css to add your styles. You have been warned! ??

    Do you know where I might find the code for the theme so I can begin my learning process?

    Thread Starter yanghoyun

    (@yanghoyun)

    OK, with the help of a friend, I was able to figure this out. I pasted the following code into the Custom CSS and it worked:

    aside.df-sidebar.df_span-sm-3 {padding-top: 40px}

    For other people who have no experience (like me) with CSS, these are the things I had to learn:

      Meaning of a class
      Proper syntax for padding
      How to use Safari Element Inspector tool and the Style tab

    Took me 1.5 days to figure this out, but figure it out I finally did. This is the kind of lesson I will never forget…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to add space between header and sidebar?’ is closed to new replies.