Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 16
  1. 25 August 2007, 07:00 PM #1
    RTK
    RTK is offline Banished
    Join Date
    Nov 2000
    Posts
    4,894

    Default Bugging you with one more coding question

    On my blogs 4 (in my signature) I use the same theme (WP).

    Looking at the top of the page - blog / title / description / "logo" - graphic...

    How tricky would it be to modify the header file so that a graphic is used as a background? The graphic would be 1024 pix wide (the blog is fixed width 1024 pix).

    Preferebly the "logo" would sit on top of the background image.

    If it's a lot of work, please, don't spend too much time on it: I'll just create a sub-directory with a testbed and play around with it there.

    However, if it's easy. Please?

    My header file looks like this:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

    <title><?php if(is_home() || is_search()) { bloginfo('name'); echo ' - '; bloginfo('description'); } else { wp_title('') ;} ?></title>

    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


    <?php wp_get_archives('type=monthly&format=link'); ?>

    <?php wp_head(); ?>

    <script language="javascript">
    function mailpage()
    {
    mail_str = "mailto:?subject=Thought you would like this...";
    mail_str += "&body=";
    mail_str += "" + location.href; 
    location.href = mail_str;
    }
    </script> 

    </head>
    <body>

    <div id="page">

    <div id="header">
        
        
            <div id="header_left">
                <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
                <div class="description"><?php bloginfo('description'); ?></div>
            </div>
            
            <div id="header_right">
                <div id="subscribe">
                    <img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" alt="" />
                </div>
            </div>
        
            <div style="clear:both;"></div>
        
        
    </div>
    <hr />
    And the style sheet looks like this:

    PHP Code:
    /*-----------Block Level Elements--------------*/

    *{
            margin:0;
            padding:0;
    }

    body {
            font: 62.5% 'Lucida Grande', Verdana, Arial, Sans-Serif;
            background: #CCCCCC;
            margin: 0px;
            padding: 0px;
    }

    body a, body a:visited {
    /*-----------Link Color Changed--------------*/
            color: #862280;
            text-decoration: none;
    }

    body a:hover {
            text-decoration: underline;
    }

    #page {
            width: 950px;
            margin: 0px auto;
            background: #FFF url('images/page_background.jpg') top center repeat-y;
            padding: 0 10px 0 10px;
    }

    #header {
            width: 100%;
            background: #000;

            height: 100%;
            background: #FFF url('images/header_footer_img.jpg') top center repeat-y;
    }


    #header h1 {
            font-size: 3.0em;
            padding: 0;
            margin: 0;
            color: #fff;
            font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
        
    }

    #header h1 a {
            color: #fff;
    }

    .    description {
            font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
    }

    #header #header_right {
            float:right;
            width: 390px;
            text-align: right;
            font-size: 1.2em;
            color: #fff;
            padding: 20px 20px 20px 0;
    }

    #header #header_left {
            float:left;
            width: 480px;
            text-align: left;
            font-size: 1.2em;
            color: #fff;
            padding: 10px 0px 20px 20px;
    }

    #subscribe {
            text-align: right;
    }

    #wrapper {
            width: 100%;
    }

    #content {
            float: left;
            width: 500px;
            line-height: 1.6em;
            padding-left: 20px;
            padding-top: 20px;
    }

    #sidebar {
            float: right;
            width: 410px;
            margin-left: 0px;
            padding-top: 20px;
    }

    #footer {
            color: #fff;
            width: 100%;
            clear: both;
            background: #FFF url('images/header_footer_img.jpg') top center repeat-y;
    }

    #footer a, #footer a:hover, #footer a:visited {
            color: #fff;
            text-decoration: none;
    }

    #footer_left {
            padding: 10px 0 10px 20px;
            text-align: left;
            float: left;
            width: 480px;
            line-height: 1.6em;
    }

    #footer_right {
            padding: 10px 20px 10px 0;
            text-align: right;
            float: right;
            width: 390px;
            margin-left: 0px;
    }



    /*-------------Headings-------------*/

    h1, h2, h3, h4 {
            font-family: Helvetica, Arial, Sans-Serif;
    }

    h1 {
            font-size: 3.0em;
            line-height: 1.0em;
    }

    h2 {
            font-size: 2.0em;
    }

    h3 {
            font-size: 1.5em;
    }

    h4 {
            font-size: 1.0em;
    }


    /*-------------The Post-------------*/



    .post h2, .post h2 a:hover, .post h2 a:visited, .post h2 a {
            font-size: 1.4em;
            text-decoration: none;
    /*-----------Link Color Changed--------------*/
            color: #862280; 
            margin-bottom: 10px;
            line-height: 1.0em;
    }

    .    post h2 a:hover {color:#000;}
    }

    .    post {
            font-size: 1.2em;
            margin-bottom: 30px;
            text-align: justify;
    }

    .    post p {
            padding: 5px 0px;
            margin: 5px 0px;
    }

    .    post ul, .post ol {
            margin: 10px 0 10px 0;
            padding-left: 40px;
    }

    .    post li {
            padding: 2px 0 2px 0;
    }

    .    entry {
            margin-bottom: 10px;
            text-align: justify;
    }

    .    entrytext .postmetadata {
            margin-top: 20px;
            text-align: justify;
    }

    .    postmetadata {
            border-top: 1px dashed #ccc;
            padding-top: 2px;
            margin-bottom: 40px;
            text-align: right;
    }

    .    postmetadata alt {
            border-top: 1px dashed #ccc;
            padding-top: 2px;
            margin-bottom: 40px;
            text-align: left;
    }

    .    navigation {
            display:block;
            margin-bottom: 20px;
    }

    #nav {
            list-style-type : none;
            text-align : center;
               font-family: Arial, Helvetica, sans-serif;
            font-size: 10px;
            line-height: 3.15em;
            height : 40px;
    }

    #nav a {
           margin: 0px;
           width : 94px;
           height : 20px;
           font-weight : bold;
           font-style : normal;
           display : block;
           padding: 0 0 10px 0;
    }

    #nav a:hover {
            background: #000;
    }

    #nav li {
            float: right; 
        list-    style-type: none;
            margin: 0px;
            border-right: solid 1px #fff;
    }
     
    .    alignleft {
            float:left;
            text-align:left;
    }

    .    alignright {
            float:right;
            text-align:right;
    }

    .    pagetitle {
            font-size: 1.6em;
            margin-bottom: 20px;
    }

    blockquote {
            margin: 10px 0 10px 0;
            padding: 5px 10px 5px 10px;
    /*-----------BG Color Changed (Lightest(--------------*/
            background: #FFECFE;
    /*-----------BG Color Changed (Medium(--------------*/
            border-top: solid 1px #FAD5F8;
    /*-----------BG Color Changed (Medium(--------------*/
            border-bottom: solid 1px #FAD5F8;
    }


    code{
            font:1.2em 'Courier New',Courier,Fixed;
            display:block;
            overflow:auto;
            text-align:left;
            margin: 10px 0 10px 0;
            padding: 5px 10px 5px 10px;
    /*-----------BG Color Changed (Lightest(--------------*/
            background: #FFECFE;
    /*-----------BG Color Changed (Medium(--------------*/
            border-top: solid 1px #FAD5F8;
    /*-----------BG Color Changed (Medium(--------------*/
            border-bottom: solid 1px #FAD5F8;
    }

    a img {
            border: 0;
    }


    /*--------------Sidebar------------*/

    #sidebar ul {
            margin-bottom:20px;
    }

    #sidebar .sidebar_left ul h2 {
            padding-bottom: 10px;
    /*-----------BG Color Changed (Medium(--------------*/
            border-bottom: dashed 1px #FAD5F8;
            font-size: 1.5em;
    }

    #sidebar .sidebar_right ul h2 {
            padding-bottom: 10px;
    /*-----------BG Color Changed (Darkest(--------------*/
            border-bottom: dashed 1px #862280;
            font-size: 1.5em;
    }

    #sidebar ul li {
            list-style:none;
            line-height:1.6em;
            font-size: 1.1em;
    }

    #sidebar ul ul {

    }

    #sidebar .sidebar_left ul ul li {
    /*-----------BG Color Changed (Medium(--------------*/
            border-bottom: dashed 1px #FAD5F8;
    }

    #sidebar .sidebar_right ul ul li {
    /*-----------BG Color Changed (Darkest(--------------*/
            border-bottom: dashed 1px #862280;
    }

    #sidebar a:hover {
            text-decoration: underline;
    }

    #sidebar .sidebar_left {
            width: 185px;
            float: left;
            padding: 0 10px 0 10px;
    }

    #sidebar .sidebar_right {
            width: 185px;
            float: right;
            padding: 0 10px 0 10px;
    }

    /*--------------Comments--------------*/

    #comments {
            font-size: 1.6em;
            margin-bottom: 20px;
            border-bottom: 1px dashed #ccc;
            padding-bottom:20px;
    }

    #respond {
            font-size: 1.6em;
            margin-bottom: 5px;
    }

    ol.commentlist {
        list-    style-type : none;
            font-size: 1.2em;
    }

    ol.commentlist li {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px dashed #ccc;
    }

    ol.commentlist li.alt {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px dashed #ccc;
    }

    #comment_title {
            margin-bottom: 5px;
    }

    #commentform {
            margin-bottom: 20px;
    }

    #commentform p {
            margin-bottom: 10px;
    }

    #commentform textarea {
            width:99%;
            padding:2px;
            font-size: 12px;
            background-color: #fff;
            border: 1px solid #ccc;
            }
        

    /*--------------Search Form-------------*/

    #search {
            margin-bottom: 20px;
            text-align: right;
    }

    #searchform {
            margin-bottom: 20px;
    }

    #searchform input {
            width: 180px;
            background: #fff;
    }

    /*-------------Calendar-----------------*/

    #wp-calendar {
            width: 180px;
            text-align: left;
            margin-top: 5px;
    }

    #wp-calendar th {
            margin-top: 5px;
    }

    #wp-calendar caption {
            font-size: 1.2em;
            margin-top: 5px;
    }

    /*-------------Other------------------*/

    hr {
            display: none;
    }

    #adsense_singlepost_top_square {
            float: left;
            margin-right: 10px;
    }

    #adsense_singlepost_bottom_square {
            margin-bottom: 30px;
    }

    #adsense_singlepost_top_banner {
            margin-bottom: 5px;
    }

    #adsense_singlepost_bottom_banner {
            margin-bottom: 30px;
    }

    #adsense_homepage_linkunit {
            margin-bottom: 30px;
    }

    #adsense_homepage_banner {
            margin-bottom: 30px;
    } 
    Risto
    Reply With Quote Reply With Quote IP
  2. 25 August 2007, 07:20 PM #2
    haakoo
    haakoo is offline Member
    Join Date
    Nov 2006
    Posts
    1,602

    Default Re: Bugging you with one more coding question

    Hi,

    Try to find the pic used in the current header and try replacing it

    But think,by looking at the code,it's probably a color block and a small logo put on the right.

    Hans
    Reply With Quote Reply With Quote IP
  3. 25 August 2007, 07:40 PM #3
    RTK
    RTK is offline Banished
    Join Date
    Nov 2000
    Posts
    4,894

    Default Re: Bugging you with one more coding question

    Thanks for looking, haakoo.

    It's not that easy... Simply replacing the "logo" image with 1024 banner will extend the webpage 1100 or so pixels to the right - the banner will be off the page...

    There's a div tag that defines the "logo" to sit to the right.

    Preferebly, I would like the see the "logo" to sit on a NEW background image (not just replace the one existing graphic). However, if my original question is too tricky... I guess replacing the original "logo" with a properly aligned 1024 banner wouldn't be the end of the world.

    Risto
    Reply With Quote Reply With Quote IP
  4. 25 August 2007, 07:47 PM #4
    LonK's Avatar
    LonK
    LonK is offline Member
    Join Date
    Mar 2005
    Location
    austin.tx.usa
    Posts
    183

    Default Re: Bugging you with one more coding question

    There is already an image defined (in red below) as the background for the header, however, it doesn't seem to exist where it says, therefore the background defaults to the solid color.

    #header {
    width: 100%;
    background: #000;

    height: 100%;
    background: #FFF url('images/header_footer_img.jpg') top center repeat-y;
    }

    So, like haakoo says, try making that image into the background you want and put in the defined location.
    Lonnie
    Reply With Quote Reply With Quote IP
  5. 25 August 2007, 07:50 PM #5
    haakoo
    haakoo is offline Member
    Join Date
    Nov 2006
    Posts
    1,602

    Default Re: Bugging you with one more coding question

    Hi,

    That's why it's not a header as in the way of a picture
    But a 1 pixel line(jpg) repeated _y,and the smaller logo put on te right
    Maybe change the 1 line jpg to a fixed 950px jpg of your liking
    and just keep the div for the small logo

    Hans
    Reply With Quote Reply With Quote IP
  6. 25 August 2007, 07:58 PM #6
    LonK's Avatar
    LonK
    LonK is offline Member
    Join Date
    Mar 2005
    Location
    austin.tx.usa
    Posts
    183

    Default Re: Bugging you with one more coding question

    Yeah, looking again, I found that image defined. It is just a wide single color repeated vertically. Like I said, just replace it with the image you want as the background.

    http://www.scudfish.com/wp-content/t...footer_img.jpg
    Lonnie
    Reply With Quote Reply With Quote IP
  7. 25 August 2007, 08:04 PM #7
    RTK
    RTK is offline Banished
    Join Date
    Nov 2000
    Posts
    4,894

    Default Re: Bugging you with one more coding question

    Thanks for pitching in - much appreciated.

    The 'images/header_footer_img.jpg' is solid colour graphic that makes up the background (colour) for the footer - where the copyright notice and info is. On http://www.ristoons.com the graphic at the bottom of the page is solid red - made to look like a solid colour block.

    Lonnie: So, like haakoo says, try making that image into the background you want and put in the defined location.

    I have no idea how to go about getting the "footer" image to appear in the top of the page.

    Risto
    Last edited by RTK; 25 August 2007 at 08:06 PM. Reason: Typo
    Reply With Quote Reply With Quote IP
  8. 25 August 2007, 08:05 PM #8
    haakoo
    haakoo is offline Member
    Join Date
    Nov 2006
    Posts
    1,602

    Default Re: Bugging you with one more coding question

    Hey Lonk,

    Sorry,you just posted while i was writing my reply,so didn't see the post

    Hans
    Reply With Quote Reply With Quote IP
  9. 25 August 2007, 08:12 PM #9
    RTK
    RTK is offline Banished
    Join Date
    Nov 2000
    Posts
    4,894

    Default Re: Bugging you with one more coding question

    Too clarify/add --- there's one more image used --- the page_background.jpg is a repeating tile that creates the three colours and drop shadow of the main content area.

    Risto
    Reply With Quote Reply With Quote IP
  10. 25 August 2007, 08:22 PM #10
    LonK's Avatar
    LonK
    LonK is offline Member
    Join Date
    Mar 2005
    Location
    austin.tx.usa
    Posts
    183

    Default Re: Bugging you with one more coding question

    Well, sure. That header_footer_img.jpg is used for both the header AND footer since it just a solid color. If you want only an image background for the header, then make the image, and change just the header reference (in my first reply) to the name of that new image.

    #header {
    width: 100%;
    background: #000;

    height: 100%;
    background: #FFF url('images/MyNewHeaderImage.jpg');
    }
    Lonnie
    Reply With Quote Reply With Quote IP
 

 
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules

Powered by vBulletin® Version 4.2.2
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.
© 2018 Xara Group Ltd
All times are GMT. The time now is 12:27 PM.