WordPress.org

Ready to get started?Download WordPress

Forums

Help with widget formatting? (4 posts)

  1. JenValencia
    Member
    Posted 1 year ago #

    Hello, everyone! Thanks in advance for any replies to my very newbie question. I just started building this website last week, and I've been reading dozens of websites and my "24-Hour Trainer" Book about WordPress, trying to learn.

    I need help formatting my widget area. Can anyone help me figure out:

    1) How to get more space between where the first Widget on my side bar appears, and the page header on the home page?

    2) How do I make the widget boxes "move over" to the right, so they line up and right justify with the right-hand edge of the top header on the home page?

    My website is here: http://www.jvalenciaphoto.com

    and my css file so far looks like this on my child theme; the parent theme is twentyeleven: (don't laugh, please! I'm SO new!)

    #page {
    border-style:solid;
    border:1px solid black;
    }

    body {
    font-family:arial, helvetica, sans-serif;
    font-size:80%;
    color:black;
    background-color:#ffc;
    margin:1em;
    padding:0;
    }

    body.home {
    background:white;
    }

    p {
    line-height:1.5em;
    }

    img {
    border-style:dashed;
    }

    a {
    text-decoration:none;
    }

    #supplementary {
    background-color:#689C48;
    border-top:1px solid #DDDDDD;
    overflow:hidden;
    padding:1.625em 7.6%;
    }

    #site-generator {
    background-color:#689C48;
    border-top:1px solid #DDDDDD;
    color:#666666;
    font-size:12px;
    line-height:2.2em;
    padding:2.2em .5em;
    text-align:center;
    }

    .widget {
    background:#9e9786;
    background:rgba(158,151,134,0.4);
    border:4px double #ffffff;
    -webkit-border-radius:7px;
    -moz-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
    padding:2px;
    -webkit-box-shadow:5px 5px 5px rgba(64,31,31,0.5);
    -moz-box-shadow:5px 5px 5px rgba(64,31,31,0.5);
    box-shadow:5px 5px 5px rgba(64,31,31,0.5);
    list-style-type:none;
    }

    Any advice and help on the widgets would be MUCH appreciated. Thanks, and have a great day! :)

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try adding this to your child theme style.css:

    #secondary {
        padding-top: 15px;
        margin-right: 0;
    }

    For future reference, you don't need to post CSS code here -- it's all visible on your site. Also when you do post any code, use the backticks or code button...per forum guidelines.

  3. JenValencia
    Member
    Posted 1 year ago #

    Thanks, WPyogi! I'll try it out & will also use backticks in the future. :)

  4. JenValencia
    Member
    Posted 1 year ago #

    it worked perfectly, thanks SO much!

Topic Closed

This topic has been closed to new replies.

About this Topic