sandbox sidebar and menu questions

  • Unknown's avatar
    elainegriffindesigns · Member ·

    Hi,
    I’ve looked and looked for the answers to this, but can’t so, sorry if it is out there already!
    First of all, I am trying to put a background image in the sidebar, and I don’t see it. No matter what repeat I use it pushes the widgets down, still not showing the image. So, I took it out and the widgets are not pushed down, but the image is not showing up either.

    Second, I want to have all my pages show in the menu area under the header, but all that is there is a link to the about page.

    These seem so simple to me, but for some reason it’s just not working out.
    The blog is http://www.annasimonakphotography.com
    Thanks!

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

  • Unknown's avatar
    devblog · Member ·

    What version of Sandbox are you using?

  • Unknown's avatar
    elainegriffindesigns · Member ·

    Thanks devblog, I’m using 1.6.1, which is the latest?

  • Unknown's avatar
    devblog · Member ·

    Correct, that’s the latest.

    When I get home, I’ll see what I can do for you. If I have more questions, I’ll post them here.

  • Unknown's avatar
    elainegriffindesigns · Member ·

    Thanks a bunch!

  • Unknown's avatar
    devblog · Member ·

    No problem. In the mean time, what’s the URL to the image you want in your sidebar?

  • Unknown's avatar
    elainegriffindesigns · Member ·

    it is:

  • Unknown's avatar
    devblog · Member ·

    Elaine,

    Your CSS does need some fixing… It seems is gonna take me longer than I thought. Give me a couple of hours and I’ll see how far I can get (I have projects of my own to take care of). In the mean time, I have some observations and recommendations for you:

    A) To write your selectors like this:

    div#wrapper

    is really unnecessary. Writing them like this should suffice:

    #wrapper

    To write ID selectors preceded by their respective elements is not only redundant but also an overkill. You should write selectors like that when you need to override previous definitions with an “!important” rule.

    B) If you want to add your credits, do not use the secondary sidebar for that. If your layout has two columns, the secondary sidebar will just push the footer way down, and you don’t want that… it doesn’t look too aesthetic. As an alternative, add an image background to the footer. You can see an example of how I did it here:

    http://sandboxskins.mycoolrealm.com/

    I guess that’s it for now.

    I’ll post as soon as I have something.

  • Unknown's avatar
    devblog · Member ·

    One more recommendation. Font sizes should be defined in “em” or “%” units, not pixels…

  • Unknown's avatar
    devblog · Member ·

    One more… for margins and paddings use pixel units, not “em” units…

  • Unknown's avatar
    elainegriffindesigns · Member ·

    Thanks so far. I know I’m not really very good at this yet. I really haven’t had the time I need to spend and when I do have the time and start to feel like I’m getting comfortable, I have large blocks of time that I don’t have time….and it’s a terrible cycle, but I’m committed to finding the time this year.

  • Unknown's avatar
    devblog · Member ·

    It didn’t take me as long as I thought. It’s going to take me longer to write this post…

    Here’s what I have:

    body {
background:#fff;
}

#wrapper {
width:750px;
text-align:left;
margin:0 auto;
}

#blog-title {
background:url('http://annasimonakphotography.files.wordpress.com/2010/02/anna-header.gif');
text-align:center;
height:245px;
margin:0;
}

#menu {
background:#361928;
width:100%;
margin:0;
padding:0;
overflow: hidden;
}

#menu ul {
list-style:none;
margin:0;
padding:3px;
}

#menu li {
display: inline;
}

#menu ul a {
text-decoration:none;
font-family:Century Gothic, Verdana, Geneva, sans-serif;
font-size:12px;
font-variant:small-caps;
color:#FFFFFF;
padding:10px;
line-height: 1.5em;
}

#container {
float: left;
margin: 20px 0;
overflow: hidden;
width: 515px;
}

#nav-above {display: none;}

#content {
width: 100%;
background-color:#FFFFFF;
overflow:hidden;
font-family:Century Gothic, Verdana, Geneva, sans-serif;
font-size:14px;
text-align:center;
vertical-align:top;
}

#primary {
background: #fff url(http://annasimonakphotography.files.wordpress.com/2010/02/anna-sidebar-background.gif) 0 0 no-repeat;
float:right;
overflow:hidden;
font-family:Century Gothic, Verdana, Geneva, sans-serif;
font-size:10px;
text-align:center;
width:225px; height: 850px;
padding:70px 0 0;
}

#secondary {display: none;}

#footer {
background:#361928;
clear:both;
height:5px;
overflow: hidden;
padding: 0;
}

#content a,#content a:link,#content a:visited {
color:#000000;
}

#content a:hover {
color:#78906A;
}

.skip-link {display: none;}

.entry-title {
clear:both;
border-bottom:1px solid #361928;
text-align:right;
margin:0 0 0 10px;
padding:0;
}

.entry-title a {
color:#252525;
text-decoration:none;
font-family:Century Gothic, Verdana, Geneva, sans-serif;
font-size:large;
font-weight:bold;
font-variant:small-caps;
}

.entry-date {
color:#252525;
font-size:smaller;
}

.entry-date abbr {
border-bottom:0 none;
}

.sidebar div,.sidebar h3,.sidebar ul,.sidebar li {
margin:0;
padding:0;
}

.sidebar h3 {
font-family:Century Gothic, Verdana, Geneva, sans-serif;
font-size:large;
font-variant:small-caps;
text-align:center;
color:#252525;
margin:0;
}

.sidebar a:link,.sidebar a:visited {
color:#000000;
}

.sidebar a:hover {
color:#78906A;
}

.sidebar li {
list-style:none;
text-align:center;
margin:0;
padding:0;
}

.sidebar li li li {
list-style:none;
text-align:left;
margin:0;
padding:10px;
}

    More Recommendations:

    Keep your code organized. I’d recommend you to write your selectors like this:

    element selectors
    ID selectors
    class selectors

    Example:

    body{...}

#wrapper {...}

.sidebar {...}

    Write your property/value pairs in alphabetical order. Example:

    selector {
background: #fff;
border: solid 1px #ccc;
font: normal 1em Arial, Helvetica;
margin: 10px auto;
padding: 20px;
width: 800px;
}

    Later, if you need to modify something, it’s easier to spot a property like that.

    Observations

    In the #primary (former .sidebar) selector you have this property/value “height: 850px”. Do you really need it? The sidebar shouldn’t be constrained to a specific height if you or your client want to add more widgets to it.

    You want to advise your client to NOT make her photos wider than 500px, otherwise they’ll be cut off like they currently are.

    I may be mistaken, but there are definitions I doubt you’ll be using, this one for instance:

    .sidebar li li li {
list-style:none;
text-align:left;
margin:0;
padding:10px;
}

    If you don’t/won’t need it, remove it from your code.

    I’m sure the least thing you were looking for was a lesson; it’s just a habit of mine to encourage good practices, especially to people who are starting at this.

    Let me know if the code I posted works the way you wanted.

  • Unknown's avatar
    elainegriffindesigns · Member ·

    devblog, thank you so much for the help. You really have no idea how much I appreciate the help not only for my questions but also for your “lesson.” The code makes sense to me, your suggestions make sense to me, and I am not left feeling like an idiot in the end!! So thank you thank you again! I will test the code this morning and let you know!

  • Unknown's avatar
    elainegriffindesigns · Member ·

    Well, this is what I ended up going with. What do you think?
    http://www.annasimonakphotography.com
    I see a bullet on the right bottom of the blog. Obviously widget related but I don’t know how else to get rid of the sidebars…Other than that I need to add a border the photographs and I think I’m done, pending client approval.
    Thank you again for all your help. I learned so much and I am motivated to keep going!
    Elaine

  • Unknown's avatar
    devblog · Member ·

    It looks very nice, Elaine.

    You can hide the sidebars (like I did with the “secondary” one) like this:

    #primary, #secondary {display: none;}

    Just add the “#primary” selector to the “#secondary” separated by comas, like in the example.

    To add the border to the photos, you could do something like this:

    #content img {border: solid 1px #000;}

    Of course, those are suggested values.

    Glad to be of help.

    Yes, keep going. CSS is not really that hard.

    All the best.

  • Unknown's avatar
    elainegriffindesigns · Member ·

    Of course!
    And thanks again!

  • The topic ‘sandbox sidebar and menu questions’ is closed to new replies.