Display Home Page Graphene

  • timorous me

    #2389

    Hello,

    Excuse me for english, I’m a french man

    I use the theme Graphene which is lovely!

    Currently, I am printing the news on a column, each news is rectangular.

    How can I view the news on “two columns”, each news is rather square?

    See example below :

    Page-accueil-Graphene-1.jpg

    If anyone has an idea !

    Best regards

    Alain RONK

    My website : http://www.modelisme-racer.fr

    Josh

    #20028

    Hmm.. Good question.

    The theme doesn’t really have a template for the design you are wanting to implement. You can create posts with different templates, such as two sidebars or no sidebars, however neither will split the main content area in half.

    Are you wanting to do this on a post? Or a page? It can be done using div tags… but it is helpful to know some HTML.

    Alain RONK

    #20029

    Thank you for your reply !

    I know, the theme does not provide that.

    But how to write this change using CSS ???

    Best regards

    Alain RONK

    My website : http://www.modelisme-racer.fr

    Josh

    #20030

    Well, you can make two div elements in your stylesheet.. one to float left and one to float right.

    #divleft {float:left;}
    #divright {float:right;}

    Then, in your content area… call each div accordingly.

    <div id="divleft">YOUR LEFT CONTENT</div><div id="floatright">YOUR RIGHT CONTENT</div>

    Or you could just do it all inline, and not call from the stylesheet (although not preferred):

    <div style="float:left">YOUR LEFT CONTENT</div><div style="float:right;">YOUR RIGHT CONTENT</div>

    You may need to wrap both of those in a separate div or span tag… depending on how it displays.

    Alain RONK

    #20031

    Thank you for your answer, Josh!

    But I write this CSS code where?

    Best regards

    Alain Ronk

    My website : http://www.modelisme-racer.fr

    Alain RONK

    #20032

    I wrote :

    divleft # {float: left;} and # divright {float: right;}

    in my style.css and,

    <div id=”divleft”> news 1… </ div> <div id=”floatright”> and news 2… </ div>

    in my content area

    But, it’s not ok !

    Best regards

    Alain RONK

    My website : http://www.modelisme-racer.fr

    Alain RONK

    #20033

    I tried with div and span, and it does not work.

    And, I wrote : divleft # {float: left;} and # divright {float: right;}

    in my style.css but, should I write in a specific location in style.css ?

    Best regards

    Alain RONK

    My website : http://www.modelisme-racer.fr

    Josh

    #20034
    <div style="width:100%;">
    <div style="float:left;width:35%;">This is floated left. This is floated left. This is floated left. This is floated left. This is floated left. This is floated left. This is floated left. This is floated left. This is floated left. This is floated left. This is floated left. This is floated left. This is floated left.
    </div>
    <div style="float:right;width:35%;">This is floated right. This is floated right. This is floated right. This is floated right. This is floated right. This is floated right. This is floated right. This is floated right. This is floated right. This is floated right. This is floated right. This is floated right.
    </div>
    </div>

    What I did here was wrap my code above in another div tag, and gave it a width of 100%. Then, I created two divs, floated one left and one right, and gave them each a width of 35% to give them space in the middle.

    Alain RONK

    #20035

    Yes Josh, I agree.

    But in this case, the note is in two parts.

    See the result here: http://www.modelisme-racer.fr

    I would like two notes on one line, with two different squares.

    Josh

    #20036

    I’m not sure exactly what you are trying to accomplish. What do you mean by “notes” and “squares”?

    Alain RONK

    #20037

    What I have looks like the picture below:

    Page-accueil-Graphene-1.jpg

    See home page of my old site:

    Page-accueil-Graphene-2.jpg

    Josh

    #20038

    Here is a screenshot:

    And here is the code:

    <div style="width:100%;">
    <div style="float:left;width:45%;"><img src="http://www.joshlobe.com/wp-content/images/forums/pic1.png" /><p>This is Pic One text.</p>
    </div>
    <div style="float:right;width:45%;"><img src="http://www.joshlobe.com/wp-content/images/forums/pic2.png" /><p>This is Pic Two text.</p>
    </div>
    </div>

    <div style="width:100%;">
    <div style="float:left;width:45%;"><img src="http://www.joshlobe.com/wp-content/images/forums/pic3.png" /><p>This is Pic Three text.</p>
    </div>
    <div style="float:right;width:45%;"><img src="http://www.joshlobe.com/wp-content/images/forums/pic4.png" /><p>This is Pic Four text.</p>
    </div>
    </div>

    You can add to it, or play around with it as needed.

    Alain RONK

    #20040

    Thank you Josh

    But with your code,you have a note with four photos.

    Me, I want two notes per line on my home page.

    See example here:

    http://david.hostinov.com/Modelismeracer/

    Josh

    #20041
    <div style="width:100%;">
    <div style="float:left;width:45%;"><img src="http://www.joshlobe.com/wp-content/images/forums/pic1.png" /><p>This is Pic One text.</p><p>This is line two.</p>
    </div>
    <div style="float:right;width:45%;"><img src="http://www.joshlobe.com/wp-content/images/forums/pic2.png" /><p>This is Pic Two text.</p><p>This is line two.</p>
    </div>
    </div>

    <div style="width:100%;">
    <div style="float:left;width:45%;"><img src="http://www.joshlobe.com/wp-content/images/forums/pic3.png" /><p>This is Pic Three text.</p><p>This is line two.</p>
    </div>
    <div style="float:right;width:45%;"><img src="http://www.joshlobe.com/wp-content/images/forums/pic4.png" /><p>This is Pic Four text.</p><p>This is line two.</p>
    </div>
    </div>

    Prasanna SP

    #20042

    It looks like “clearism” is a spammer. Moderators, your attention please..

Viewing 15 posts - 1 through 15 (of 30 total)

You must be logged in to reply to this topic.