WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Complete n00b needs help please! - Sidebar formating (probably very easy!) (6 posts)

  1. Jiminibee
    Member
    Posted 3 years ago #

    Ok, so I am a complete n00b to all things webdesign/html/css/code.

    I cannot find the answer I'm looking for via the forums or using my reasonable google-fu skills. I'm sure someone can answer this very quickly, so please help!

    I am "re-designing" my work website within wordpress to allow us the content management access we need. My boss would like to maintain the look and feel of the old site as much as possible.

    So here's my question: how can I set the font/formating/overall look of my menu *which is in the sidebar, not in the header*??

    For a visual, go to the old site here: http://www.braeisland.com/outdoor/index.html

    Then look at the new site here http://www.evergreenadventure.ca (if it redirects reply to the thread and I will remove the redirect)

    How can I make the new site sidebar menu look as close to the old site menu as possible?!

    Any suggestions would be hugely appreciated, but please if this is some kind of code related thing, could you reply in a 'for dummies' style - just typing a couple of lines of code won't help as I won't know what to do with it!

    THANKS SO MUCH!!!

    Oh, and the theme I'm using is Weaver 2010, and I don't know if it makes a difference, but I can change if necessary.

  2. oturia
    Member
    Posted 3 years ago #

    I think the smartest way to do it would be to insert some code into the stylesheet to control the look and feel of that particular unordered list.

    Unfortunately, the answer to your question is a bunch of lines of code, code that would need to be placed at the bottom of your current stylesheet.

    If you are just looking for a basic adjustment, this will remove the bullet points, the indent and update the font size and color of the lists in your sidebar:

    Open your Admin Dashboard. Go To Appearance >> Editor. Scroll down to the bottom of the page under "Styles" and you will see a Stylesheet with the filename of style.css.

    Click on that file, scroll all the way down to the bottom of the theme file, and add this snippet of code:

    #main .widget-area ul ul {list-style:none;margin-left:0px;font-size:16px;}
    #main .widget-area ul ul li a{color:#235570;}

    A word of caution: These are the themes core files, so be careful editing stuff in here. Keep a back up in case you need to reload the theme.

    This code is just a quick snippet to help clean up the list. You can add it, and if you don't like it, erase it and save the file again and it will go back to where it was before. I haven't tested it but it should do the trick if you add it to the bottom of the stylesheet.

    Beyond that, WordPress Publishing is great for the just about everyone, but if you are not at least partially versed in CSS, styling themes is going to be extremely difficult for you and I'd recommend looking to hire someone for it.

  3. Jiminibee
    Member
    Posted 3 years ago #

    Oturia, this is AWESOME. Thanks so much!!! The code response was fine cos you explained what to do with it - super helpful, I really appreciate it.

    We are a non-profit society, so unfortunately paying someone to do this is out of the question for now - I've gotta learn to do it myself, or it won't get done. I'm very happy to learn, I just don't know where to start.

    Any recommendations for good resources for a beginner to learn some basics for CSS?

    I modified the code you gave to be this:

    #main .widget-area ul ul {list-style:none;text-align:center;font-size:16px;}
    #main .widget-area ul ul li a{color:#235570;}

    So that the text is now centered within the sidebar. How would I go about increasing the line-spacing, making the font bold, and possibly even adding a little line like in the old site?

    Answers to any of these 3 questions on their own, either by giving more code, or letting me know a good resource to teach myself would be awesome.

    Thanks again for your help!

  4. Jiminibee
    Member
    Posted 3 years ago #

    Also, are there any unforeseen issues to the change I made?

    Thanks!

  5. oturia
    Member
    Posted 3 years ago #

    Nope, those changes were safe.

    I would recommend browsing the CSS tutorials available online. The easiest way to learn is to search in a string like this:

    css change hover color

    or

    css make text bold

    You will usually find the results quite fast.

    Now, on to your questions:

    line spacing can be adjusted by line-height: 1232px; or however high you want it. So for a 16px font, you could use a 19px line-height:

    #main .widget-area ul ul li a{color:#235570;
    line-height:19px;
    font-weight:bold;
    border-bottom:2px solid #037c2f;
    }

    This should get you started in the right direction. Don't forget to mark the post as resolved.

    Good luck!!!

  6. Jiminibee
    Member
    Posted 3 years ago #

    Thanks, I really appreciate it!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.