Archived

This topic is now archived and is closed to further replies.

  • 0

What Is The Best Way To Acheive This?

Question

Posted · Report post

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

3 answers to this question

Posted · Report post

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)
}

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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