Replacing Title/Header with an Image?

Any questions about styling and customising the layout, changing the number of columns, changing the number of sliding images and so on.

Re: Replacing Title/Header with an Image?

Postby jc@dusty » Fri Aug 19, 2011 3:55 pm

Thanks, Jordan - this was exactly what I needed, and worked like a champ.
This is my first time with Wordpress, and I am finding this forum to be extremely helpful!
jc@dusty
I'm new here
 
Posts: 2
Joined: Thu Aug 18, 2011 5:31 pm

Re: Replacing Title/Header with an Image?

Postby roclarke » Wed Aug 31, 2011 6:22 am

I really love this Sliding Door Theme - it's awesome !!

I have gone through the instructions below and (with a lot of trial and error) I have got the image at the top of the page, my problem now is that the image is left aligned with the edge of the browser window. (http://www.tearsinthejungle.com) I need the image to be centred in the middle of the browser window.

Is anyone able to help me here as I am REALLY desperate to get this fixed (we have a book launch coming up soon) and we need to start taking booking orders and I can't do that with a crap website. Thanks everyone, your help is really appreciated. :? (PS. I am not a programmer and do not understand PHP code so please talk simply to me!! ;) )
roclarke
I'm new here
 
Posts: 2
Joined: Thu Aug 25, 2011 10:44 am

Re: Replacing Title/Header with an Image?

Postby kckal » Thu Sep 01, 2011 2:29 am

my guess with this is to go with css.

*this may be a hack, but should give you some hope. good css code will work on 99% of the different computer/browser setups out there. i would download a few different browsers and see how things render after you make your changes...

open style.css of the theme
-@ line 63, add to your code what is missing here:

a img {
border: medium none;
position: absolute;
right: 215px;
text-decoration: none;
width: 990px;
}

i hope this gets you going...
kc :mrgreen:
kckal
I'm a regular
 
Posts: 7
Joined: Sun Sep 21, 2008 1:29 am

Re: Replacing Title/Header with an Image?

Postby roclarke » Thu Sep 01, 2011 7:38 am

Hi KC,
Thanks for the advice... We are almost there, it's not so much staying in the middle now but it is staying a fixed distance from the right hand margin... is there any way I can make it so that it stays centred with the actual website (so that it look like part of the website?) At the moment it looks as if it is disconnected as when I resize the browser window it moves independently of the web pages... www.tearsinthejungle.com (thanks heaps for your help)
roclarke
I'm new here
 
Posts: 2
Joined: Thu Aug 25, 2011 10:44 am

Re: Replacing Title/Header with an Image?

Postby ShocK » Thu Sep 01, 2011 11:02 am

Hi
Try changing 215 to 225 or 205, see which way the header moves. The centre might be 221 for eg
ShocK
Legend!
 
Posts: 10
Joined: Wed Aug 24, 2011 5:04 pm

Re: Replacing Title/Header with an Image?

Postby kckal » Sat Sep 03, 2011 2:21 am

It seems that the welcome heading div is still lined up to the left. Try changing the width of it. Line 405 in the the style sheet.
Looks like were on track for less of a hack :roll: hopefully. Good luck!
kckal
I'm a regular
 
Posts: 7
Joined: Sun Sep 21, 2008 1:29 am

Re: Replacing Title/Header with an Image?

Postby bellajen » Sat Oct 15, 2011 6:34 am

ok! I have replaced the header with a custom image, which worked on the home screen.

but on all the other pages, it doesn't show anything. i know this is an easy fix, please help!

my second question is i would like to lose the padding on the left hand side of the header ONLY. when i make the following change:

#wrapper {
margin-top: 20px;
padding: 0 20px; /* ------------------- change to be padding: 0 0px; --- if you want to eliminate padding on left----- */
position: relative;
background-color: #5cc0b7;

it eliminates the padding on the left for the entire site. how do i just change it for the custom header section?

sooooo.....

1. header on all pages
2. padding for header

thanks so much, i have learned alot reading through everyone's posts!

Jennifer @

www.bellaevents.ca
bellajen
I'm new here
 
Posts: 3
Joined: Wed Oct 05, 2011 1:50 am

Re: Replacing Title/Header with an Image?

Postby johnsen » Sun Dec 11, 2011 5:56 am

When it come to doing design for the header in sliding door them, it is still overly confusing even when I have patiently read through all suggestions in the thread. For the benefit of the future user to come, could Master Wayne or any other kind soul please help enlightened? Here's the exact code I saw on the "Header php". I am using sliding door 2.6.1

Master Wayne or any kind soul, please assist to write in the exact code with red font if anyone wanted to replace the current header. Thank you.

<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Sliding_Door
* @since Sliding Door 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;

wp_title( '|', true, 'right' );

// Add the blog name.
bloginfo( 'name' );

// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";

// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'slidingdoor' ), max( $paged, $page ) );

?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );

/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>

<?php $url = get_template_directory_uri()?>
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo $url; ?>/imagemenu/imageMenu.css">
<script type="text/javascript" src="<?php echo $url; ?>/imagemenu/mootools.js"></script>
<script type="text/javascript" src="<?php echo $url; ?>/imagemenu/imageMenu.js"></script>

</head>

<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding" role="banner">

<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>


<div id="imageMenu">

<!-- THESE ARE THE LINKS YOU GO TO WHEN YOU CLICK ON A SLIDING DOOR IMAGE-->
<!-- change the href to look like this: <a href="yourlink.com"> -->
<?php
$walker = new My_Walker;
wp_nav_menu( array(
'theme_location' => 'custom-sliding-menu',
'fallback_cb' => 'no_sliding_menu',
'container' => '',
'container_class' =>'',
'container_id' =>'',
'menu_class' =>'',
'menu_id' =>'',
'depth' => '1',
'walker' => $walker
)
); ?>

</div>

<script type="text/javascript">

window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){location=(e);}});
});
</script>


</div><!-- #branding -->

<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'slidingdoor' ); ?>"><?php _e( 'Skip to content', 'slidingdoor' ); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary') ); ?>
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->

<div id="main">
johnsen
I'm new here
 
Posts: 3
Joined: Sat Sep 03, 2011 9:30 am

Re: Replacing Title/Header with an Image?

Postby dneal » Sun Feb 12, 2012 2:14 pm

Thank you, thank you, thank you!! I've been struggling with this for days...until I found this post! Kudos to you for all the help!
dneal
I'm a regular
 
Posts: 8
Joined: Sun Feb 12, 2012 12:27 am

Re: Replacing Title/Header with an Image?

Postby dneal » Sun Feb 12, 2012 6:47 pm

How do I link my logo to the home page? I see where it was posted to "add <a href=" your web domain here"> tag to it", but where do I add this? I'm not a coder. As this is the only way back to the Home page, I need to have the logo linked.
dneal
I'm a regular
 
Posts: 8
Joined: Sun Feb 12, 2012 12:27 am

PreviousNext

Return to Advanced - Customising the theme