Css help tweaking tumblr theme/layout?

My page is here: http://punkosaurus.tumblr.com/

I wish I were good with css... unfortunately, I'm not!

I would like for the font on the "about me" section to be smaller and for the left sidebar and "likes" footer to be fixed and only the content scroll. Any help is GREATLY appreciated! =o]

2 Answers

Relevance
  • Anonymous
    1 decade ago
    Favorite Answer

    Please modify the following in your CSS file to achieve said results

    I will write 'comments' with a preface of //, please ignore including comments in your css, they are for your own reference only.

    find in your CSS ->

    #about p{

    margin:0

    }

    Please make these changes

    #about p{

    margin:0;

    padding:0;

    font-size:10px;//this is where you decide on your font size.

    font-family:arial;//doesn't have to be arial. but you can choose Times New Roman, Serif, etc. If you don't want to change the font-family, then don't use this attribute.

    color:rgb(60,60,60);//this is a dark-grey, or light-black. If you don't want to change your text color, don't modify this. (Instead of rgb(60,60,60), you could just write #/333;

    }

    Now you've successfully modified the text on your 'left sidebar'

    Now, fixing your footer so that it stays appended to the bottom of the page is going to be a bit more difficult, there are some inherit issues with this, but we'll try our best to sort these out.

    please find in your css ->

    .footer-widget {

    border-top:4px double #CCCCCC;

    overflow:hidden;

    }

    Please make the following changes

    #footer {

    clear: both;

    margin: 0 auto;

    padding: 0 0 20px 0;

    width: 936px;

    position:fixed;

    top:72%;

    left:12.75%;

    height:200px;

    scroll:auto;

    overflow:scroll;

    }

    You'll notice the " left: " has an odd % assigned - this re-aligns the 'likes' div against how your content moves, so that you can still see your 'left'links through the 'Likes' <div>, and you'l also notice the border padding and alignment are inline with the 'main-content' <div>

    Make these two changes and you'll produce the results you desire.

    Hopefully this is what you want.

    ****************EDIT*******************

    If you want it so that the "Likes" div is even MORE transparent, you can remove the grey background all together...

    Please find in your css -->

    #likes ul {

    background:#eaeaea;

    border-color: #dadada #fafafa #fafafa #dadada;

    border-style: solid;

    border-width: 1px;

    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

    margin: 10px;

    overflow: hidden;

    padding: 4px;

    }

    Please modify the background: property as such below ->

    #likes ul {

    background: transparent;

    border-color: #dadada #fafafa #fafafa #dadada;

    border-style: solid;

    border-width: 1px;

    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

    margin: 10px;

    overflow: hidden;

    padding: 4px;

    }

Still have questions? Get your answers by asking now.