WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Help adding asides? (27 posts)

  1. Neil Guevara
    Member
    Posted 6 years ago #

    Hey guys, im wondering if someone can possibly add the asides code given here into my index.php file. Everytime i do it i get it wrong, im such a noob at php. Your help would be great.

  2. Neil Guevara
    Member
    Posted 6 years ago #

    Any help guys? would be major appreciated

  3. Neil Guevara
    Member
    Posted 6 years ago #

    Guys i tried all night to get them working but its a no go for me :(

  4. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    Neil,

    Are you trying to have the asides appear in your sidebar, or in the main content area like Matt's done on http://ma.tt ? Sounds like the latter.

    I've not done this before, but I'm certainly willing to help troubleshoot.

    Maybe I'll learn something. :)

  5. Neil Guevara
    Member
    Posted 6 years ago #

    sewmyheadon, just like matt has it, i have asides on my blog, but they look terrible plus the code is icky. This seems pretty easy, just cant figure out where to place the code.

  6. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    If I'm correct, you actually have the asides working - they're the little suckers with the red star next to them, correct?

    Are you just hoping to make them stand out more and look better, or are you trying to group them at the top of the page?

  7. Neil Guevara
    Member
    Posted 6 years ago #

    Basically just to have the vertical line beside them like on matts page, thats all, pretty much. No grouping at the top ;)

  8. Neil Guevara
    Member
    Posted 6 years ago #

    p.s the star posts are the asides posts, im using the code i found here, but the star look terrible hehe

  9. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    Try adding this to your style.css file:

    ul.asides_entry {border-left:5px solid #000;}
  10. Neil Guevara
    Member
    Posted 6 years ago #

    any particular place in style.css?

  11. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    Nope, for ease sake I'd stick it right under:

    ul { list-style-image: url(images/bullet.gif); }
  12. Neil Guevara
    Member
    Posted 6 years ago #

    OMG!!!!! Man you are legend!!! Thank you!! You know how long i have been trying to do that? wooooooooooooo

    If i could colour them red and ditch the star that would be soooo kool!!!

  13. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    Looks like you sorted the color, try this to remove the star:

    ul.asides_entry li {list-style:none;}

  14. Neil Guevara
    Member
    Posted 6 years ago #

    Perfect, thank you very very very very very very much my friend. You a star!!!

    Now off to try and fix the header probs ;)

    cheers mate!!

  15. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    You're most welcome. :)

  16. Neil Guevara
    Member
    Posted 6 years ago #

    Sorry man, there seems to be a problem. In IE all versions the asides got all messed up. In the theme i use there are two style sheets, one normal and then this : ie-win.css (ie-win.css)

    #navigation { float: left; }
    
    #navigation ul { float: right; }
    
    #navigation li.active a:link,
    #navigation li.active a:visited
    {
    	color: #555555;
    	background-color: #ffffff;
    }
    
    #content-wrapper { width: 58%; }
    
    #content pre { width: 360px; overflow: hidden; }
    
    #wrapper h3.post-title a:link,
    #wrapper h3.post-title a:visited
    {
    	border-bottom-width: 0;
    }
    
    #extras { padding-right: 0; margin-right: 0; margin-left: 8px; padding-left: 0; }
    
    #extras #friends ul { padding-left: 0; margin-left: 20px; }
    
    #extras #links { width: 250px; }

    Is there anything we can do to fix it?

  17. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    Hey Neil,

    I don't think the IE specific styles are affecting these at all.

    Try this:

    ul.asides_entry {background:#eee;border-left:3px solid #ac020a;list-style-image:none;padding-left:3em}

    I'm adding:

    • list-style-image:none; and
    • padding-left:3em
    • plus a little grey background for the asides which helped me in seeing the issue. I think it looks good, but if you don't like it, take out background:#eee;

    Make sense?

  18. Neil Guevara
    Member
    Posted 6 years ago #

    works a lot better better mate, just asides entries are not taking the same position like other "normal" posts. If they could be moved a little then it would be great ;)

  19. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    Oh, I get it. That's because of some of your other CSS. Play around with this:

    ul.asides_entry {
    border-left:3px solid #ac020a;
    list-style-image:none;
    padding-left:3em;
    margin-left:-10px;}
    
    ul.asides_entry li {
    list-style:none;
    margin:0;
    padding:0
    }

    Your div class post-wrapper has a negative margin of 20px - that's why I'm suggesting trying a negative margin on the above ul.

  20. Neil Guevara
    Member
    Posted 6 years ago #

    Eric, it worked, the "line" is now in line with the rest of the content, but one other small problem is now there. In IE the words in the asides posts dont follow through to the other side, instead they go half way across the page and then go into a new line.

  21. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    I actually don't think it looks bad like that, but if you want to fix it, try this:

    ul.asides_entry {
    border-left:3px solid #ac020a;
    list-style-image:none;
    padding:0 0 0 3em;
    margin:0 0 0 -10px;}

    Add some line-height too to make your posts more readable:

    .post-wrapper {
    padding-left: 10px;
    width: 676px;
    margin-left: -20px;
    line-height:150%;
    }
  22. Neil Guevara
    Member
    Posted 6 years ago #

    Eric, it didnt really have an effect on the asides, but your right, its just me being a perfectionist. Adding height to my posts did a world of good, looks a lot better now, thank you. If i knoew how to do half the things i want then the site would look great. The header and lots of other stuff now is working great.

    My sidebar in IE is fucked up, its down way below where it should be. Thats the one problem really left to fix!!

    Eric thanx for all your help, your a star!!!

  23. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    Sidebar looks fine to me in IE7, but is goofy in IE6. It has to be due to padding or widths on the containers or some of the elements inside them.

    Try removing the width from the #sidebar-wrapper.

    #sidebar-wrapper {
    float:right;
    width:35%;
    }
  24. Neil Guevara
    Member
    Posted 6 years ago #

    Tried it and it didnt work, kinda messed everything up. No worries though, think i did sonething wrong, ill give it a go after dinner ;)

  25. Neil Guevara
    Member
    Posted 6 years ago #

    Eric, im wondering if you can help me one last time. The asides entries are not being posted as single posts , instead they are joining together to make one post. You can see it on my blog. Is there a way to seperate them?

  26. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    Hi Neil,

    I'm afraid that I'm not seeing the issue.

    If your asides are running together, I'm assuming you're meaning two posted in a row look almost like one.

    I'd change this:

    ul.asides_entry {
    border-left:3px solid #ac020a;
    list-style-image:none;
    padding:0 0 0 1em;
    margin:0 0 0 -10px;}

    to

    ul.asides_entry {
    border-left:3px solid #ac020a;
    list-style-image:none;
    padding:0 0 0 1em;
    margin:1em 0 1em -10px;}

    and see if that takes care of it.

  27. Neil Guevara
    Member
    Posted 6 years ago #

    worked a treat, thanx a million mate!!!

Topic Closed

This topic has been closed to new replies.

About this Topic