Spaacing between sidebar and main-bar?

  • Unknown's avatar
    gullguttenmathias · Member ·

    Hi. Do anyone of you know if, and how, I can get spacing between my sidebar, and the part with the blogposts? I want a small spacing between theese two parts with the same color as my background. Is this possible? I have the css-upgrade.

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

  • Unknown's avatar
    gullguttenmathias · Member ·

    And, is it possible to get round, soft corners on my blog instead of the sharp edges that i have now?

  • Unknown's avatar
    thewebhostingdir · Member ·

    which theme are you using? so that we can assist you further

  • Unknown's avatar
    thewebhostingdir · Member ·

    Ok…I have checked your there and you can increase the divison of the width for your sidebar.

  • Unknown's avatar
    thesacredpath · Member ·

    @webhostingdir, if you cannot actually supply the answer, don’t even respond to the thread. It wastes time and just confuses things.

    @gull,

    Add border-left: 5px solid #333333; to .secondary. You will probably want to adjust the right and left – or at least the left padding to space the text over a little.

  • Unknown's avatar
    gullguttenmathias · Member ·

    Thank you so much thesacredpath. :) Du you know if i can put in somthing behind “border bottom” so that the gray bottom border automatticly adjusts with the length of the page? I want it to be all gray below the sidebar. Now I’ve set it for 7000 px, but somethimes this will be to long or to short for the actual lenght.

  • Unknown's avatar
    thesacredpath · Member ·

    With that theme, that would require a little advanced CSS hacking. Basically you would have to put a separate backgrounds on the post area and sidebar area and then do some magic on the positioning since the sidebar is nested inside the “page” section.

    You can bookmark this thread and I’ll look into it tonight and see if I can figure it out.

  • Unknown's avatar
    gullguttenmathias · Member ·

    Thank you so much. I’ll check this thread in the morning. Here with me its now 2AM, so i’ll better go to bed. ;)

  • Unknown's avatar
    thesacredpath · Member ·

    First off a suggestion. Never paste the entire stylesheet into the CSS edit window unless you are going to change absolutely everything. It makes it much harder to keep track of what you have changed and what you have not. What you want to do is check “Add this to the K2-lite theme’s CSS stylesheet” and then paste ONLY the sections you are actually changing, and ONLY the specific declarations from those sections that you are actually modifying or adding. With “Add this to the K2-lite theme’s CSS stylesheet” checked, your changes will be loaded after the existing stylesheet and override those sections and declarations in the original stylesheet.

    What I did was to remove the white background from #page and then put a white background in #primary and #secondary and then do position absolute on the sidebar (#secondary). Originally it was placed via left padding, and that would not allow the dark grey background to show through between #primary and #secondary and also would not allow the space below the sidebar content to be dark grey. There was also a lot of tweaking of margins and padding so that everything would space correctly and fit within the 1000px width you had set in #page.

    What you want to do is copy everything you now have in the CSS edit window out and paste it into a plain text file and save it for reference.

    Next, delete everything you have in the CSS edit window, click the button to the left of “Add this to the K2-lite theme’s CSS stylesheet…” and then click “save stylesheet.”

    Copy all the CSS below, paste it into the CSS edit window, and then click the preview button to have a look at things. If everything looks good, click “save stylesheet” and you are done.

    #header {
background:transparent url('http://i277.photobucket.com/albums/kk45/theri86/header2-1.jpg') repeat scroll 0 0;
height:430px;
position:relative;
margin:0;
padding:0;
}

body {
background:#212121 none repeat scroll 0 0;
color:#444444;
font-family:Tahoma,Verdana,Arial,Sans-Serif;
}

#page {
background:none;
position:relative;
text-align:left;
width:1000px;
border-color:0 #000000 #000000;
border-style:none solid solid;
border-width:medium 0 0;
margin:0 auto;
padding:0 0 10px;
}

#primary {
background:white;
display:inline;
float:left;
overflow:hidden;
width:660px;
margin:0;
padding:20px 20px 10px;
}

.secondary {
background:white;
width:255px;
position:absolute;
left:715px;
margin:0;
padding:15px 10px 15px 20px;
}

ul.menu {
left:20px;
width:920px;
}

.hentry {
margin:0 15px;
}

h1,h2,h3,h4 {
font-family:'Trebuchet MS', Verdana, Sans-Serif;
}

a {
color:#666666;
}

#footer {
width:1000px;
}
  • Unknown's avatar
    thesacredpath · Member ·

    And actually you will notice that there is some duplication between the original stylesheet and what I have above. I should have cleaned it up a little more than I did, but now it is very late here for me and I’m ready to head off for bed.

    The above does work though. I have it all on my test blog and will leave it there until I’m sure everything is OK and then I’ll delete it.

  • Unknown's avatar
    thesacredpath · Member ·

    OK, one more thing. In the “Limit width to…” box right above the save button, put 630 (660 width minus 15px left and right padding) in for the full sized images, videos and other shortcodes. This will allow you to insert images and such at the maximum width for the theme the way it is set up right now.

  • Unknown's avatar
    thesacredpath · Member ·

    I need sleep. I’ve cleaned up the above and taken out the duplicate declarations so that it is cleaner.

    #header {
background:transparent url('http://i277.photobucket.com/albums/kk45/theri86/header2-1.jpg') repeat scroll 0 0;
height:430px;
position:relative;
margin:0;
padding:0;
}

body {
background:#212121 none repeat scroll 0 0;
color:#444444;
font-family:Tahoma,Verdana,Arial,Sans-Serif;
}

#page {
background:none;
width:1000px;
border-color:0 #000000 #000000;
border-width:0;
padding:0 0 10px;
}

#primary {
background:white;
width:660px;
margin:0;
padding:20px 20px 10px;
}

.secondary {
background:white;
width:255px;
position:absolute;
left:715px;
margin:0;
padding:15px 10px 15px 20px;
}

ul.menu {
left:20px;
width:920px;
}

.hentry {
margin:0 15px;
}

h1,h2,h3,h4 {
font-family:'Trebuchet MS', Verdana, Sans-Serif;
}

a {
color:#666666;
}

#footer {
width:1000px;
}
  • Unknown's avatar
    gullguttenmathias · Member ·

    Thank you so much! :D Now I’ve replaced the content with the last one you posted here, and everything works perfectly! I love it! :D

  • Unknown's avatar
    thesacredpath · Member ·

    You’re very welcome.

  • Unknown's avatar
    thesacredpath · Member ·

    If you happen to come back to this thread, I would make one minor change to your CSS. In #page, change the width to 932px so that it the width of all elements within it.

  • The topic ‘Spaacing between sidebar and main-bar?’ is closed to new replies.