WordPress.org

Ready to get started?Download WordPress

Forums

Trying to replace css border properties with an image, (twentythirteen child) (6 posts)

  1. tasetta
    Member
    Posted 7 months ago #

    on wwww.iconoclasticpress.com/draft where I'm working out a new wordpress site using a child of twenty-thirteen, I'm puzzling how to change those thin white lines around main menu navigation, end of articles, between article and footer.

    I want to change the borders to images that looks like a long line of ink (similar to what's above and below the masthead/site's name) to divide up the page sections.

    The files are oldLines2.png and oldLine1.png.

    I'm trying to figure out the proper path to use in CSS to the images
    for instance this:

    #article {border-image:URL("../../uploads/2013/12/oldLines2.png");}

    and variations of this isn't working. Where am I wrong?

  2. Pioneer Valley Web Design
    Member
    Posted 7 months ago #

    Please review the link provided.

  3. tasetta
    Member
    Posted 7 months ago #

    OOps, one w too many. Try this.
    http://www.iconoclasticpress.com/draft/

  4. tasetta
    Member
    Posted 7 months ago #

    This is my page.php code,

    What I believe I'd like to do is insert the oneLine1.png image as a breaking line just before #main and then I think the twoLines2.png after the #content.

    Is it ok to insert regular html code (that I know a bit of) into php (that I don't know) files?

    'get_header(); ?>

    <div id="primary" class="site-content">
    <div id="content" role="main">

    <?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'content', 'page' ); ?>
    <?php comments_template( '', true ); ?>
    <?php endwhile; // end of the loop. ?>

    </div><!-- #content -->
    </div><!-- #primary -->

    <?php get_sidebar(); ?>
    <?php get_footer(); ?>'

  5. tasetta
    Member
    Posted 7 months ago #

    Nevermind, I've finally figured out that inserting
    '<div><img src="wp-content/uploads/2013/12/oldLine1.png" width="100%" /> </div>' into page.php worked much better than trying achieve this via CSS.

  6. tasetta
    Member
    Posted 7 months ago #

    On further examination, this isn't actually working on all pages.

    the custom divider shows on the first page, but not on the products, gallery, blog, or contact pages. Looking at the page source, I can see that like the first page, the <div> I inserted are there, however for some reason it is not showing.

    I ended up customizing the header.php file, which where the menu is, and I'd think that ought to make it show up on every single page alongside the menu, not just the first one.

    Is this a z-index related issue? If so, which way do I go on it?

Reply

You must log in to post.

About this Topic