Forums

WordPress › Support » Themes and Templates

Overlay Image for Person on website (18 posts)

  1. gbt3660336603
    Member
    Posted 9 months ago #

    I need to overlay a picture of my pastor on the right hand-corner over the borders and a little beside the Contact Us tab. Is there a plugin that can do that or do I need to do some Css scripting... I'm a novice but a fast learner. Thanks!

  2. Andrew Nevins
    Volunteer Moderator
    Posted 9 months ago #

    CSS may be suited better for your circumstances.

    Before you add styles, make sure you do so in either of the following:
    A Child Theme - http://codex.wordpress.org/Child_Themes
    A Custom Style plugin - http://wordpress.org/extend/plugins/custom-style/

  3. gbt3660336603
    Member
    Posted 9 months ago #

    Here is the website....

    http://www.firstchurchofgodinchrist.org

  4. gbt3660336603
    Member
    Posted 9 months ago #

    @ Andrew, where can I find a detail tutorial for CSS for doing that.

  5. Andrew Nevins
    Volunteer Moderator
    Posted 9 months ago #

    In this screenshot
    http://awesomescreenshot.com/010d1be0a
    Does the red box simulate where you want your pastor image to be?
    Sorry if you're colour-blind, it'll be at the top-right.

  6. gbt3660336603
    Member
    Posted 9 months ago #

    Yep, that is the location where I want it to be.

  7. Andrew Nevins
    Volunteer Moderator
    Posted 9 months ago #

    Providing you use a Child Theme or Custom Style plugin, do the following;
    ✔ Add <div class="pastor"></div>" to the header, underneath the <hgroup> tag.
    E.g
    From

    <header id="branding" role="banner" class="clearfix" style="
    position: relative;
">
		<a class="header-link" href="http://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home"></a>
		<hgroup>
			<h1 id="site-title"><a href="http://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home">First Church of God In Christ</a></h1>
			<h2 id="site-description">"For whosoever shall call upon the name of the Lord shall be saved "- Romans 10:13</h2>
		</hgroup>

	</header>

    To

    <header id="branding" role="banner" class="clearfix" style="
    position: relative;
">
		<a class="header-link" href="http://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home"></a>
		<hgroup>
			<h1 id="site-title"><a href="http://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home">First Church of God In Christ</a></h1>
			<h2 id="site-description">"For whosoever shall call upon the name of the Lord shall be saved "- Romans 10:13</h2>
		</hgroup>
                <div class="pastor"></div>

	</header>

    ✔ Add the CSS:

    #branding {
 position: relative;
}

#branding .pastor {
 position: absolute;
 right: 50px;
}

    The next stage would be adding the image into the HTML or CSS, which do you want to do?

  8. gbt3660336603
    Member
    Posted 9 months ago #

    which one is better, html or Css? Any advantages or disadvantages?

  9. Andrew Nevins
    Volunteer Moderator
    Posted 9 months ago #

    HTML would be more semantic for SEO and Accessibility.

  10. gbt3660336603
    Member
    Posted 9 months ago #

    Ok let's go with html. How would you do that?

  11. Andrew Nevins
    Volunteer Moderator
    Posted 9 months ago #

    ✔ Add the image into the header.php file within the <div class="pastor></div> we created,
    from

    <header id="branding" role="banner" class="clearfix" style="
    position: relative;
">
		<a class="header-link" href="http://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home"></a>
		<hgroup>
			<h1 id="site-title"><a href="http://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home">First Church of God In Christ</a></h1>
			<h2 id="site-description">"For whosoever shall call upon the name of the Lord shall be saved "- Romans 10:13</h2>
		</hgroup>
                <div class="pastor"></div>

	</header>

    to

    <header id="branding" role="banner" class="clearfix" style="
    position: relative;
">
		<a href="http://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home"></a>
		<hgroup>
			<h1 id="site-title"><a href="http://www.firstchurhofgodinchrist.org/" title="First Church of God In Christ" rel="home">First Church of God In Christ</a></h1>
			<h2 id="site-description">"For whosoever shall call upon the name of the Lord shall be saved "- Romans 10:13</h2>
		</hgroup>
                <div class="pastor">
                         <img src="/yourDirectory/yourImage.yourImageExtension alt="yourImageTitle" />
                </div>

	</header>

  12. gbt3660336603
    Member
    Posted 9 months ago #

    How would you re position the image in the right-hand corner if you need to. I get confused when it comes to positioning images through css.

  13. Andrew Nevins
    Volunteer Moderator
    Posted 9 months ago #

    The right hand corner like this http://awesomescreenshot.com/008d1ew9a
    ?

  14. gbt3660336603
    Member
    Posted 9 months ago #

    I want the image to be kind of big, covering the whole entire area pretty much overlapping....like this..

    http://bonner.house.gov/

  15. Andrew Nevins
    Volunteer Moderator
    Posted 9 months ago #

    Try messing about with the positioning:

    top: 0;
right: 0;

    Or

    bottom: 0;
left: 0;

    Play about with the '0' values.

  16. gbt3660336603
    Member
    Posted 9 months ago #

    what are the ranges for the values: 1-10; 1-100, etc.

  17. Andrew Nevins
    Volunteer Moderator
    Posted 9 months ago #

    In pixels I think it goes up to 9999/ down to -9999.
    E.g

    top: -9999px;

  18. gbt3660336603
    Member
    Posted 9 months ago #

    Ok, cool. I will try to position the image some time later today b/c I have some errands to run today. I will thank you if I can get the image to do right. Thanks for the help! :D

Reply

You must log in to post.

About this Topic

Tags