CMS Made Simple Forums

Posted: **Sat Apr 23, 2011 10:35 am**

How can I add text over my header image? I'd like to put some white text in the lower right hand corner on top of my header image.

I see this in my stylesheet Layout: Top menu + 2 columns:

Code: Select all

div#header h2 {
/* this is where the site name is */
	float: right;
	line-height: 1.2em;
/* this keeps IE6 from not showing the whole text */
	font-size: 1.5em;
/* keeps the size uniform */
	margin: 35px 65px 0px 0px;
/* adjust according your text size */
	color: #f4f4f4;
}

Is this where I would put the text?

here's the site:
http://www.drfretgood.com

Thanks!

Posted: **Sat Apr 23, 2011 12:10 pm**

Open your Template:

Code: Select all

<div id="header">
      <h1><a href="http://drfretgood.com/" title="Home Page, shortcut key=1" >Dr. Fretgood - Chicago Guitar Repair, Amp Repair, Guitar Lessons, Musician Gear</a></h1>
      </div>

Now add something like:

Code: Select all

<div id="header">
      <h1><a href="http://drfretgood.com/" title="Home Page, shortcut key=1" >Dr. Fretgood - Chicago Guitar Repair, Amp Repair, Guitar Lessons, Musician Gear</a></h1>
 <div class="mytextbox">My text in the right bottom conrenr</div>
      </div>

Now open your stylesheet where #header is located.

Code: Select all

div#header {
    height: 264px;
    margin: 0;
    padding: 0;
    position: relative; /* <---- Add this line */
}

/* and add this below */
.mytextbox {
  position: absolute;
  width: 100px; /* change to your liking */
  height: 50px; /* change to your liking */
  bottom: 5px; /* 5px space from bottom line */
  right: 5px; /* 5px space from right */
  background: #f00; /* do you want red background color? :-) */
  }

Now you would have a red box 100x50 px in bottom right corner with red background.

Where it says <div class="mytextbox">My text in the right bottom conrenr</div> you can also use global content block so you dont have to edit template next time you want to change your text

Code: Select all

<div class="mytextbox">{global_content name="mytext"}</div>

Note that it only works if you also create mytext in "Content -> Global Content Blocks"

If you want to change text on each page use content block:
{content block="mytext" label="This is my header text area" oneline="true"}

Will give you a small input box where you can enter some text, if you remove oneline="true" you would have a WYSIWYG editor visible in backend.

Please before asking more questions, read help that comes with CMSMS, or read default content that comes with default package http://www.opensourcecms.com/demo/1/10/CMS+Made+Simple many questions are answerd on all those sample pages.

Note that i didn't test anything above, so use it on your own risk

Posted: **Mon Apr 25, 2011 8:57 am**

Uniqu3 thanks so much! It worked. Fantastic.

CMS Made Simple Forums

Add text over header image [solved]

Add text over header image [solved]

Re: Add text over header image

Re: Add text over header image