Header Paragraph CSS troubles

  • claylemar

    (@claylemar)


    10 years, 10 months ago

    I just added a paragraph of text to my header in the header.php file like so:

    <body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>
<strong><p id="header-text" class="site-header h2">I am Clay Lemar. Welcome to my web log. As an undergraduate student in college I was introduced to the Fusus of Ibn al-’Arabi. “For the seeing of ourselves, by ourselves, is not the same as seeing ourselves in another.” Since, I have been happy enough seeing myself in “another.”</p></strong>

    [Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

    I am trying to format the paragraph so that it looks just like the h2 or the “tagline” that was previously there (that has been removed). Can someone help me out here, I have no experience writing CSS. I tried to format using # command and copy pasting the h2 formatting on the parent theme’s style.css folder.

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter claylemar

    (@claylemar)

    10 years, 10 months ago

    http://www.clayhike.com is the website, sorry about that.

    paulwpxp

    (@paulwp)

    10 years, 10 months ago

    Don’t leave Site Description ( Tag line ) empty. Put something there that’s beneficial to site SEO and properly hide it using clip.

    Put <p> tag under the closing </hgroup> like this

    </hgroup>
<p class="myintro">
	Hello, this is my intro text.
</p>

    and use this in stylesheet.

    .site-description {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

p.myintro {
	font-weight: normal;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
	text-align: center;
}

@media screen and (min-width: 600px) {
	p.myintro { text-align:left; }
}
    Thread Starter claylemar

    (@claylemar)

    10 years, 10 months ago

    Thanks, I followed your instructions and got it going up the text is there at the top:

    clayhike.com

    But it isn’t styled, could you walk me through the “stylesheet” process. I just copy and pasted your response into my style.css in the parent theme folder using cpanel, yeah?

    paulwpxp

    (@paulwp)

    10 years, 10 months ago

    It is already styled. The CSS for p.myintro above is to the same exact as original h2 site description.

    All the changes go to child theme, and you are running on a childtheme already, so just put that in under @import line.

    Parent theme must not be edited.

    Thread Starter claylemar

    (@claylemar)

    10 years, 10 months ago

    Again thanks, for bearing with me.

    I copy and pasted the above code into the child theme style.css file just under the @import line.

    As far as I can tell, the text is unchanged and is not styled, I tried changing the font size from 13px to 20px. Without results. . .

    I had to edit the parent theme the header.php file. There isn’t a header.php file in the child theme.

    Thread Starter claylemar

    (@claylemar)

    10 years, 10 months ago

    `<div id=”page” class=”hfeed site”>
    <header id=”masthead” class=”site-header” role=”banner”>
    <hgroup>
    <h1 class=”site-title”><a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></h1>
    <h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
    </hgroup>
    </hgroup>
    <p class=”myintro”>
    My text
    </p>

    Can’t I just apply the h2 class=”site-description” to the p class=? That would apply the h2 “site-description” class formatting to the paragraph? I think that would look good, I want that paragraph to look like h2 the “site-description” without it being the “tagline.”

    I’ve tried that too, and still the paragraph is not styled. Just plain text.
    Am I missing something here?

    paulwpxp

    (@paulwp)

    10 years, 10 months ago

    On my end, everything works as expected. The reason you couldn’t see the changes applied to CSS might be that you didn’t clear browser cache.

    Thread Starter claylemar

    (@claylemar)

    10 years, 10 months ago

    You don’t say, that’s it!

    Thanks for your help, a surprising and humorous conclusion.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Header Paragraph CSS troubles’ is closed to new replies.

Tags