image display and z-index in header

static63
(@static63)

9 years, 1 month ago

I haven’t used wordpress in years (joomla and drupal)
I picked up a book on the 2013 theme which is long on basics, short on specifics. I also dredged the online topics to try to put this together. I’m trying to get an image to display in the header,

I’ve tried this:
=======================================
<body <?php body_class(); ?>>
<div id=”page” class=”hfeed site”>
<header id=”masthead” class=”site-header” role=”banner”>
” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>
<div id=”logo”>
<img class=”header-logo” img src=”images/LogoADig.png”/ width=”198″ height=”87″ alt=”ggvasia logo”>
</div>
<div class=”clear”></div>
<h1 class=”site-title”><?php bloginfo( ‘name’ ); ?></h1>
<h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>

<div id=”navbar” class=”navbar”>

=============================================
This is from one of those online sources (it looks like it SHOULD work?
and I tried several iterations in the css, such as

#header.header-logo {
float:left;
margin-top:5px;
height: 87px;
width: 198px;
z-index: 999;
}
Now I don’t remember, but the class header-logo does not exist in the styles.css file Can one make up there own classes??? based on say, for example #header??

but I did try some other things, still the image does not display.
The alt text shows up, it’s in approximately the right position, but no show.
I’ve done many things with z-index before, but I’m not sure that’s the problem. (maybe I just need sleep!)

I do not want to use the text widget in the header or the upload image method.

I’d like to try this with a blue bar too, if I can get images to display. The image is in the images directory (2013 theme directory), and this is not a child theme.

this is at:

Also, I need to change the labels in the comment form, but I don’t see any php template where you can do that?????

help!

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

juggledad
(@juggledad)

9 years, 1 month ago

the CSS selector you have (#header.header-logo) is wrong. that is saying
For an element with an ID of ‘header’ AND a class of ‘header-logo’ apply these rules.

you could use ‘header#masthead div#logo img.header-logo’ to be very specific or try ‘header .header-logo’ which would be more generic

Thread Starter static63
(@static63)

9 years, 1 month ago

Hi,
I’ll try that.
thanks!

Thread Starter static63
(@static63)

9 years, 1 month ago

Hi,
Hope you’re still around…
I tried ‘header#masthead div#logo img.header-logo’
but nothing happened,
just out of curiosity, I tried putting
background-image: url(images/LogoADig.png);

into the selector:

header#masthead div#logo img.header-logo {
float:left;
background-image: url(images/LogoADig.png);
margin-top:50px;
height: 87px;
width: 198px;
border: 0;
z-index: 999;
}

OK, the image displayed, but….

It has borders around it, it has a small box in the upper left-hand corner, it has a link – how do I get rid of all of those???

I’ve read that sometimes it becomes necessary to junk the site title and description. I just cannot control that,
see:

I got the logo in, but the title and description got knocked down, even with z-index.
Could I use negative numbers with margins to push it back up?
I think that’s also why the header is to big,
I’m shooting for a 130px (height) header with the 30px height blue bar
on the very bottom of the header (overlaying it, which it’s doing) – above the nav bar. The header sits on top of the blue bar (on the left where it is now).
And as you can see – with the social icons in the blue bar.
But same problem with the social icons (image won’t display),
unless I put 4 or 5 seperate ‘background images’ in?????
I’m aware of the upload to dashboard, but from what I’ve read, you have little control over your images getting cropped and sliced and diced.
Question? I’m kind of assuming if I succeed with getting these images
in, for systems that don’t use media queries – and from my experience – there are a lot of them in developing countries, contrary to all the hype – then the above method should at least display the images in the right places and positions —- right????
Also, same question on the comment form – where can you replace the labels for the form, I don’t see that on any of the templates???

Sheesh! If I can get past the header problem, this might turn into something. I tried 2012 before this but neither of these seem to be very static page friendly.

The other code I’ve put in:

header#masthead div#bar img.header-bar {
float:left;
background-image: url(images/BlueBar.png);
margin-top:100px;
height: 30px;
width: 980px;
z-index: 99;
}
#header_icons {
position:relative;
left:700px;
bottom: 27px;
}
#header_icons li {
display:inline !important;
list-style-type: none;
float:right;
margin-right: 35em;
}

.social {
margin-left:56em;
margin-top: 10em;
}

and the header.php file

<body <?php body_class(); ?>>
<div id=”page” class=”hfeed site”>
<header id=”masthead” class=”site-header” role=”banner”>
” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>
<div id=”logo”>
<img class=”header-logo” img src=”images/LogoADig.png”/ width=”198″ height=”87″>
</div>
<div class=”clear”></div>
<h1 class=”site-title”><?php bloginfo( ‘name’ ); ?></h1>
<h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>

<div id=”bar”>
<img class=”header-bar” img src=”images/BlueBar.png”/ width=”980″ height=”30″>
</div>
<div class=”clear”></div>
<div id=”header_icons”>
<img src=”images/FBook.png” width=”28″ height=”24″>
<img src=”images/Twitter.png” width=”28″ height=”24″>
<img src=”images/Utube.png” width=”28″ height=”24″>
</div>
<div class=”clear”></div>
<div id=”navbar” class=”navbar”>
<nav id=”site-navigation” class=”navigation main-navigation” role=”navigation”>
<button class=”menu-toggle”><?php _e( ‘Menu’, ‘twentythirteen’ ); ?></button>
“><?php _e( ‘Skip to content’, ‘twentythirteen’ ); ?>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>
<?php get_search_form(); ?>
</nav><!– #site-navigation –>
</div><!– #navbar –>
</header><!– #masthead –>

<div id=”main” class=”site-main”>

============================================================

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

The topic ‘image display and z-index in header’ is closed to new replies.

image display and z-index in header

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics