Skip to:
Content
Pages
Categories
Search
Top
Bottom

I need help


  • nickmy
    Participant

    @nickmy

    Hello

    please I’m working on my website for three weeks and I still coudlnt get the blog to be in three columns :(

    I want something like that:

    1.Front page:

    Post-tilte | Post tile 2 | Post tile 3

    text text text

    without the sidebar on the frontpage

Viewing 18 replies - 1 through 18 (of 18 total)

  • nickmy
    Participant

    @nickmy

    I just know that I had to change this:

    <div class=”post” id=”post-<?php the_ID(); ?>”>

    <div class=”post-content”>

    <h2 class=”posttitle”>” rel=”bookmark” title=”<?php _e( ‘Permanent Link to’, ‘buddypress’ ) ?> <?php the_title_attribute(); ?>”><?php the_title(); ?></h2>

    <p class=”date”><?php the_time(‘F j, Y’) ?><?php _e( ‘in’, ‘buddypress’ ) ?> <?php the_category(‘, ‘) ?> <?php printf( __( ‘by %s’, ‘buddypress’ ), bp_core_get_userlink( $post->post_author ) ) ?></p>

    <div class=”entry”><?php the_content( __( ‘Read the rest of this entry →’, ‘buddypress’ ) ); ?></div>

    <p class=”postmetadata”><span class=”tags”><?php the_tags( __( ‘Tags: ‘, ‘buddypress’ ), ‘, ‘, ‘
    ‘); ?></span> <span class=”comments”><?php comments_popup_link( __( ‘No Comments »’, ‘buddypress’ ), __( ‘1 Comment »’, ‘buddypress’ ), __( ‘% Comments »’, ‘buddypress’ ) ); ?></span></p>

    </div>

    </div>

    but how?


    nickmy
    Participant

    @nickmy

    I’m looking for something like that:

    http://deluxethemes.com/redcarpet/


    nickmy
    Participant

    @nickmy

    I don’t have html problems I only do not know how to do that with php


    Peter Anselmo
    Participant

    @peteranselmo

    nickmy,

    Theme development is fairly involved, in order to get the most out of these forums, you should make your question as specific as possible.

    If you wan’t to customize a theme, but don’t know any PHP, you’ll probably need to hire a developer.


    @mercime
    Keymaster

    @mercime

    What peteranselmo said. In addition, you might find it easier to adapt existing WP theme by using the https://wordpress.org/extend/plugins/bp-template-pack/


    nickmy
    Participant

    @nickmy

    thanks my english is very bad I’ll try to explain my problem again:

    On the main page you see the new blog posts one after the other.

    I know want to have three new posts side by side.

    I removed the sidebar on the index.php to have more place and changed the size of the blog posts to 300px.


    Hugo Ashmore
    Keymaster

    @hnla

    And what happened?

    What CSS have you added/removed/changed other than the 300px width?

    You would need to float .post probably and limit the number of posts looped


    nickmy
    Participant

    @nickmy

    nothing happended I still have one post after the other:

    I want something like that posts side by side:

    http://maestroknows.com/

    or does anyoone know a wordpress theme like the on on maestroknows


    Hugo Ashmore
    Keymaster

    @hnla

    You didn’t answer my second question!

    We know what you want but haven’t a clue how you are going about trying to achieve it.

    It would probably help people if you had a link to your site so that we could see what you actually had in terms of frontend output. (I’m assuming this is just a browser side issue rather than server side )


    modemlooper
    Moderator

    @modemlooper

    If you have a WP theme it is easy to convert to BP. Use the template pack. Otherwise you will have to custom code a front page that pulls in posts from certain categories


    nickmy
    Participant

    @nickmy

    @hnla I changed the size and removed the sidebar. Can’t you imagine how this will look.I work on local at the moment

    @Modemlooper Thanks,not what I’m looking for :)


    Hugo Ashmore
    Keymaster

    @hnla

    Yes I can imagine what this will look like it will look like three rather narrow columns stacked one above the other and abutting the left edge of their parent element.

    the element in WP assigned the class .post is a block level element, block level elements occupy their own space requiring a new line so to speak i.e the second block level element has to find the next available free line to render on; this is why if you look back at my last post or two you will see me mention floating the .post element, you will only get block level elements to sit side by side if you either set them as floated or display:inline-block.

    Without more detail it isn’t really going to be possible to help you with your requirements, modemloopers advice earlier is probably best.


    Andrea Rennick
    Participant

    @andrea_r

    Look at the html source of the page. He’s made 3 columns with css. Each one pulls a custom loop pulling posts from a particular category.

    It’s purely theme dev here. You may have more success searching elsewhere for this particular technique used in WordPress themes in general.


    modemlooper
    Moderator

    @modemlooper

    Sorry, but it is what you are looking for. As restated above from @Andrea_r

    That theme you linked to has three columns with three categories. Unless you are referring to the thumbnail mess at the top?


    nickmy
    Participant

    @nickmy

    ok thanks again. I tried it with float:left

    it works !

    I’ve removed the sidebar and I’m using this now:

    div.post {

    margin-left: 30px;

    width: 30%;

    float: left;

    but I get big gaps in there.I get posts side by side but after the third one I get a big gap then it shows me the next one

    ok here is a screenshot:

    http://img693.imageshack.us/img693/7530/37084352.png


    danbpfr
    Participant

    @chouf1

    An exemple of something you can use

    <div id="bigcontent">

    <div class="container">
    <div class="contenido">

    content col 1

    </div>
    </div>

    <div class="container">
    <div class="contenido">

    content col 2

    </div>
    </div>

    <div class="container">
    <div class="contenido">

    content col 2

    </div> <!-- end contenido -->
    </div> <!-- end container -->

    </div> <!-- end big content -->

    style

    #bigcontent {
    width: % or px, depends on what you want to have. It's a fixed block (a kind of basket) in the main page or the page itself...
    }

    div.container { <!-- the place holder div - only used for positionning the cols -->
    float:left;
    width:350px;
    height: depends if you want an elastic height or a fixed one. Would be "auto" for elastic height
    padding: 8px 4px 8px 4px;
    }

    div.contenido { <!-- the content styler: colors, fonts, text alignment... -->
    background-color: ****
    font-style: ****
    font-size: ****
    border: 1px solid #555;
    etc
    }

    More here:

    fr_FR: http://www.alsacreations.com/tuto/lire/588-design-trois-colonnes-positionnement-flottant.html

    us_EN: http://matthewjamestaylor.com/blog/perfect-3-column.htm


    Hugo Ashmore
    Keymaster

    @hnla

    ok thanks again. I tried it with float:left

    it works !

    Yes knew it would ;-)

    I’ve removed the sidebar and I’m using this now:

    div.post {

    margin-left: 30px;

    width: 30%;

    float: left;

    but I get big gaps in there.I get posts side by side but after the third one I get a big gap then it shows me the next one

    ok here is a screenshot:

    http://img693.imageshack.us/img693/7530/37084352.png

    The big gaps are due to floats requiring to clear the last floated object they have to find a clear line, look at your SC closely the fourth element clears below the third. The initial approach to fix this would be to apply a min-height of a value equivalent to the tallest element; however that doesn’t change the fact, in your case. that the actual content is of varying height so you would still perceive that ‘gap’

    You could border each element then regardless of content height they would look similar height or live with the fact or set a limit to the content shown.

    If setting min-height you need to set height for IE <= 6 (filtered from sane rational Modern browsers) which doesn’t understand min/max but worked to a broken interpretation of the height and width properties and doesn’t correctly consider them as ‘Fixed’ but expandable so is in fact both fixed and min.


    nickmy
    Participant

    @nickmy

    didnt work with min height :(

Viewing 18 replies - 1 through 18 (of 18 total)
  • The topic ‘I need help’ is closed to new replies.
Skip to toolbar