Newbie Theme Dev, Syntax Question

  • Hi!
    I am experimenting with the layout style for titles (post headers) in the theme that I am developing (for myself initially).

    I want the post titles to be like this:
    ———————————————-
    [pretty [pretty
    icon] [POST TITLE TEXT] icon]
    ———————————————-
    (Hope this comes out ok!)
    I want the titles to be scalable so that they re-size when I reduce the size of the viewport.

    I thought I’d try using a table to achieve this.
    Since I am trying it on the Page section initially, I went into page.php and put:

    <div class=”styling_table”>
    <table (lots of properties) width=”96%”>
    <tr>
    <td> <img src=”.images/post_header_left.gif” width=40 height=70></td>
    <td><?php the_title(); ?> </td>
    <td><img src=”.images/post_header_right.gif” width=40 height=40></td>
    </tr>
    </table>

    But the images don’t appear! (The text does)
    I can’t work out why – I have moved them to the main dir, checked the names, tried a couple of other syntaxes for the path names…
    But I haven’t got enough experience to do anything more..
    Can you help me with advice on how to get the pictures to appear in the table?
    Hope you can help!

    The page is at https://www.vikingprincess.net/
    Johanna

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

  • Probably tha src=”.images/whatever” thing is not correct.
    Shouldn’t that be src="/images/whatever" ?

    Thread Starter jojo0507

    (@jojo0507)

    Hi!
    Thanks for responding. I tried the slash as well. I only changed to the dot because I found some syntax examples where that was used… So that’s not it.. ??

    Try changing the link to a static link;
    <img src=".images/post_header_left.gif" width=40 height=70>"
    becomes
    <img src="https://your.site.com/images/post_header_left.gif" width=40 height=70>

    Thread Starter jojo0507

    (@jojo0507)

    SOLUTION:
    If you want to FORMAT A TITLE, USING A TABLE, here is what to do:

    In the .php page for that section (for example in page.php or index.php) create the table as follows:

    <div class=”styling_table”> <table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”96%”>
    <tr>
    <td class=”page_leftheader”> </td>
    <td><?php the_title(); ?> </td>
    <td class=”page_rightheader”> </td>
    </tr>
    </table>
    </div>

    The trick is; do not try to insert pictures or do any styling using HTML syntax in the .php file. I could not get that to work… Instead, declare a CLASS and then format that class in style.css, like this:

    .styling_table {
    font-size: 24pt;
    font-variant:small-caps;
    text-align:center;
    }
    .page_leftheader{
    background-image:url(“images/post_header_left.gif”);
    background-repeat:no-repeat;
    width:1em;
    }

    .page_rightheader{
    background-image:url(“images/post_header_right.gif”);
    background-repeat:no-repeat;
    width:1em;
    }

    Check the result if you are interested on https://www.vikingprincess.net/?page_id=2

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Newbie Theme Dev, Syntax Question’ is closed to new replies.

Tags