Jump to content
Sign in to follow this  
tirediron

What Is The Best Way To Acheive This?

Recommended Posts

tirediron    0
tirediron

What will be [hopefully] the final question relating to the configuration of the home page of my new 'site:

( http://www.johnsphotography.ca/wordpress/ )

As you can see, I have a short block of text near the bottom of the page with several links in it. I would like to make this text stand out more, and be clearly legible. The problem is, that I don't want to do this with font colours, bolding, etc, because I want to be able to change the image at random, and I don't want to have to deal with changing a bunch of other stuff as well.

Is there a way to overlay it against a solid-colour background that won't obscure too much of the image, or some other neat trick?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, yes you could by using css. However, looking inside your page that content is attached to the main content which will color the entire background of that area, so you'll lose most of the bg on the page.

If you put the text into a contained section, like a text widget inside a footer sidebar etc, you'll be able to use css just to color that section like how you originally described :-) Hope that makes sense.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
radroz    10
radroz

Try creating a CSS-styled <div> tag. The way it's set right now, it's pushed down by several line breaks. Delete those, and create a tag... something like <div class="hometext"><h4>blah blah blah</h4></div>

Then in your custom CSS, use a style for the .hometext and then for the .hometext h4 and .hometext h4 a elements. Widgets are fine, but I always try to hard-code the styles to give myself the most control.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

I recommend you follow Radroz's suggestion and wrap this text in a <div> with a custom class. Then you can apply css to this area. You could give it a transparent background so that the text is visible more clearly.

Below is an example:


<div class="text-bottom-page">
<p> You text goes here </p>
</div>
[/CODE] The you can apply custom CSS for this class, again below is an example:
[CODE]
.text-bottom-page {
background: rgba(255,255,255,0.5)
}


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×