Change blog CSS

Community Forums Forums Design Tips and Tricks Change blog CSS

This topic is: resolved

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  alexisonsmith 1 year, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #37024

    alexisonsmith
    Participant
    Post count: 27

    Hi,

    I have my basic website set-up now and I would like to make a few changes to the CSS. The main one it to put the summary of each post on my home page in it`s own ‘bubble’ or ‘box’. I would then like to change the colour of that box. I know this is quite simple to do however I cannot seem to fins the right way to do it online. Also I would like to remove the lines between each post summary on the home page.

    Finally I would like to put the headings in the sidebar in its own box and then the text below in another box. I know this is a lot to ask but I would really appreciate some help on this one.

    Thanks

    Alex

    http://www.everythingf1.com

    http://www.everythingf1.com
    #37033

    AC
    Blocked
    Post count: 7712

    For the post background you need to change the word “transparent” to the HTML color code of the color you want.

    [css].post {
    background: url("images/line.png") repeat-x scroll center bottom transparent;
    margin: 0 0 25px;
    overflow: hidden;
    padding: 0 0 25px;
    }[/css]

    Once you do that, you’ll need to add some padding in there, so look for this – change the padding to just maybe 15px:

    [css].featuredpage .page, .featuredpost .post {
    margin: 0 0 10px;
    overflow: hidden;
    padding: 5px 0;
    }[/css]

    To change the widget titles, look for the top line of this and add in the two lines – the background line and the padding line – adjust the color and padding to your desired codes.:

    [css]h4, h4 a, h4 a:hover, h4 a:visited {
    background-color: #YOUR COLOR CODE;
    color: #444444;
    font-size: 16px;
    padding: 15px;
    text-decoration: none;
    }[/css]

    #37474

    alexisonsmith
    Participant
    Post count: 27

    Anitac,

    Thank you for your fast response. I now have boxes around my blogs however do I make the corners round so the summary is in more of a bubble instead of a box?

    Thanks

    Alex

    #37745

    alexisonsmith
    Participant
    Post count: 27

    So basically would like a solid line around the box and for there to be corners on the boxes. Does that make sense?

     

    Thanks

     

    Alex

    #37767

    AC
    Blocked
    Post count: 7712

    Look for :

    [css].post[/css]

    and add the border radius:

    [css]border-radius: 15px 15px 15px 15px;[/css]

    #37967

    alexisonsmith
    Participant
    Post count: 27

    I have tried to add a thick black line around the post however it does not seem to work below the .post and border-radius

     

    Thanks

    Alex

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Change blog CSS’ is closed to new replies.