WordPress.org

Ready to get started?Download WordPress

Forums

CSS & Graphene Theme (3 posts)

  1. Y2Neildotcom
    Member
    Posted 10 months ago #

    Hi folks,

    I'm trying to create a table with a background image using CSS and my WordPress theme is Graphene. I've created a child theme (which for the purposes of this exercise, I've removed everything out of the stylesheet).

    When I save the following code as a simple HTML file and open it - it works. When I put it into a page on my site, the background does not show.

    Can anyone suggest why this might be?

    Many thanks,

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #customers
    {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-color: #ffffff;
    width:100%;
    border-collapse:collapse;
    background-image:url('http://www.hornetsfc.com/wp-content/uploads/2013/08/grass_repeat2.jpg');
    background-repeat:repeat-x;
    }
    #customers td, #customers th
    {
    font-size:1em;
    border:0px solid #ffffff;
    padding:3px 7px 2px 7px;
    text-align:center;
    }
    #customers th
    {
    font-size:1.1em;
    text-align:center;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#000000;
    font-color:#ffffff;
    }
    #score
    {
    text-align:center;
    color:black;
    font: bold 36px arial;
    background: #FFFF00;
    }
    #teamname
    {
    color:#ffff00;
    background:#000000;
    font-size:200%;
    }
    </style>
    </head>
    
    <body>
    <table id="customers">
    <tr>
      <th colspan=4 align=center>Friendly</th>
    </tr>
    <tr>
    <td><div id="teamname">Hornets FC</div></td>
    <td><div id="score">4</div></td>
    <td><div id="score">0</div></td>
    <td><div id="teamname">GDL Athletic</div></td>
    </tr>
    <tr>
    <td colspan=2>David Jenkinson</td>
    <td colspan=2>Adam Sadler (Booked)</td>
    </tr>
    <tr>
    <td colspan=2>David Jenkinson</td>
    <td colspan=2></td>
    </tr>
    <tr>
    <td colspan=2>David Jenkinson</td>
    <td colspan=2></td>
    </tr>
    <tr>
    <td colspan=2>David Jenkinson</td>
    <td colspan=2></td>
    </tr>
    <tr>
    <th colspan=4 align=center>Played at: Martley</th>
    </tr>
    </table>
    </body>
    </html>
  2. kjodle
    Member
    Posted 10 months ago #

    Are you inserting all of that code into a page? If so, the <html>, <head>, and <body> elements are going to create problems.

    What happens when you add just the css to your child theme stylesheet and just the table code to your page?

  3. Y2Neildotcom
    Member
    Posted 10 months ago #

    Oddly, that makes it worse!?

    The stylesheet now reads:

    /*
    Theme Name:     Graphene Child
    Theme URI:      http://www.hornetsfc.com
    Description:    Child theme for the Graphene theme
    Author:         Neil Brazier
    Author URI:     http://www.y2neil.com
    Template:       graphene
    Version:        1.0
    */
    @import url("../graphene/style.css");
    /* Your modification goes here */
    
    /*This is a comment*/
    
    #customers
    {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-color: #ffffff;
    width:100%;
    border-collapse:collapse;
    background-image:url('http://www.hornetsfc.com/wp-content/uploads/2013/08/grass_repeat2.jpg');
    background-repeat:repeat-x;
    }
    #customers td, #customers th
    {
    font-size:1em;
    border:0px solid #ffffff;
    padding:3px 7px 2px 7px;
    text-align:center;
    }
    #customers th
    {
    font-size:1.1em;
    text-align:center;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#000000;
    font-color:#ffffff;
    }
    #score
    {
    text-align:center;
    color:black;
    font: bold 36px arial;
    background: #FFFF00;
    }
    #teamname
    {
    color:#ffff00;
    background:#000000;
    font-size:200%;
    }

    The page reads:

    <table id="customers">
    <tr>
      <th colspan=4 align=center>Friendly</th>
    </tr>
    <tr>
    <td><div id="teamname">Hornets FC</div></td>
    <td><div id="score">4</div></td>
    <td><div id="score">0</div></td>
    <td><div id="teamname">GDL Athletic</div></td>
    </tr>
    <tr>
    <td colspan=2>David Jenkinson</td>
    <td colspan=2>Adam Sadler (Booked)</td>
    </tr>
    <tr>
    <td colspan=2>David Jenkinson</td>
    <td colspan=2></td>
    </tr>
    <tr>
    <td colspan=2>David Jenkinson</td>
    <td colspan=2></td>
    </tr>
    <tr>
    <td colspan=2>David Jenkinson</td>
    <td colspan=2></td>
    </tr>
    <tr>
    <th colspan=4 align=center>Played at: Martley</th>
    </tr>
    </table>

    The table appears all squashed and lost all formatting except for the #score sections...

Reply

You must log in to post.

About this Topic