CSS... Page Titles

53 Posts

shaftb Reply #1, 16 years, 10 months ago

Total newbie to MODx, but love it so far. Just need to learn the little things... and I guess the big things, LOL! wink

I have my page titles made as "classes" in my CSS. When creating a new resource, how do I get it to call that portion of the CSS so I get my page title?
--
.media {
float: left;
width: 525px;
margin: 0 auto 0px;
padding-top: 56px;
color: #FFFFFF;
font: normal 13px Georgia, "Times New Roman", Times, serif;
background-image: url(../images/pheads/media.jpg);
background-repeat: no-repeat;
background-position: left top;
--
So this would be on the media page, and obviously show the "media.jpg" image for the page header.
I have a template created and it’s calling for the default image that is there. How can I get this image to change out with every different page(resource)?

I hope I’ve explained this good enough. If you need a link, please let me know. Thank you!!

53 Posts

shaftb Reply #2, 16 years, 10 months ago

I guess the easiest would be to just insert the "page title" image in the content area when placing the info in there.
But I would think there is a way to do this.

332 Posts

chinesedream Reply #3, 16 years, 10 months ago

You can insert a class or ID to body tag to call page title or alias. Exactly how to go about doing it I don’t know, but snippet is a logical choice (I so wish I can write my own snippet undecided

) Hopefully someone can help out with this bit.

What it does is, if you have a page call media, and in that page body tag will output this:

<body class="media">

Then in your css, presuming you use h2 for page title

.media h2 {background: url(media-image.png) no-repeat}

If you have Service page it will output this
<body class="service">

.service h2 {background: url(service-image.png) no-repeat}

Using background image for content, it’s best to create an Image Replacement technique like so

h2 span {positon:absolute; text-indent:-3333em)

<h2><span>Your page title</span></h2>

24,544 Posts

BobRay Reply #4, 16 years, 10 months ago

Maybe I’m misunderstanding what you want to do, but I think there’s an easier way.

In your template (where you want the page title to appear):

<h1 class="media">[*pagetitle*]</h1>

You could also use [*longtitle*], [*menutitle*], or [*alias*] if you’d rather.

Then create a Template Variable for that template called myBackgroundImage. Make it a text TV (not an image TV). You can use the path to a default image as the default value if you like. When you edit each page, put the url to the image in the TV.

In your CSS file, use this:

background-image: url([*myBackgroundImage*]);

If you want to get a little fancier, I think you could put all the images in one directory, make the TV a drop-down list or radio options, and set the Input Option Values to:

@DIRECTORY path/to/images/dir/

That should give you a list of the available images when you edit the TV for each page.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

53 Posts

shaftb Reply #5, 16 years, 10 months ago

Wow, thank you. Like I said, I’m a newbie. This may take a little bit to figure out, but I think that can work.
My solution of just popping in the image at the top of the text area works, but I knew there is a different way.

http://cms.rockmeelcaminos.com/index.php?id=47 ( in case you wanted to see what I was talking about )
If you go to a different page, you can see how the page header (recent news) which is an img stays there.

The solution you suggested, you think it would work for this? Just want to make sure. Thank you!

24,544 Posts

BobRay Reply #6, 16 years, 10 months ago

Yes, but first you’ll have to figure out why you’re showing more than one page title on some pages.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

53 Posts

shaftb Reply #7, 16 years, 10 months ago

The main template I created is calling for that pages header. Each individual page used PHP includes and had a unique class to call the different images. The reason some have two is because I inserted them in the resource editor. Thanks.

53 Posts

shaftb Reply #8, 16 years, 10 months ago

Quote from: BobRay at Nov 10, 2009, 12:59 AM

Maybe I’m misunderstanding what you want to do, but I think there’s an easier way.

In your template (where you want the page title to appear):
<h1 class="media">[*pagetitle*]</h1>
You could also use [*longtitle*], [*menutitle*], or [*alias*] if you’d rather.

Then create a Template Variable for that template called myBackgroundImage. Make it a text TV (not an image TV). You can use the path to a default image as the default value if you like. When you edit each page, put the url to the image in the TV.

In your CSS file, use this:
background-image: url([*myBackgroundImage*]);
If you want to get a little fancier, I think you could put all the images in one directory, make the TV a drop-down list or radio options, and set the Input Option Values to:
@DIRECTORY path/to/images/dir/
That should give you a list of the available images when you edit the TV for each page.

Ok... I got the "default" image to show up, even though it’s pulling the wrong image, LOL? But the others aren’t showing up when I bounce to other pages. And now the "text" of the page title I see is showing up. Also, it is dropped down lower then the previous image I had inserted in there before. Obviously something isn’t working. But the idea seems like it should work. I’ll have another gander.

http://cms.rockmeelcaminos.com/index.php?id=52

Thanks.

53 Posts

shaftb Reply #9, 16 years, 10 months ago

BobRay-
Ok... I see why MEDIA was popping up. That was the <h1 class="media"></h1> tag I input into my master template.
I see if I change that title to something else that I have an image for, it will change. So are you suggesting making multiple "templates" and assigning them to each page that corresponds?

Another quick question. When I’m trying to type in the text, in my edit field the background is white, and my text shows white so it’s hard to read. Is this a CSS issue? Thanks again!!!

24,544 Posts

BobRay Reply #10, 16 years, 10 months ago

Quote from: shaftb at Nov 14, 2009, 01:44 AM

Another quick question. When I’m trying to type in the text, in my edit field the background is white, and my text shows white so it’s hard to read. Is this a CSS issue? Thanks again!!!

Do you mean in the front end of the site? If so, definitely a CSS issue. Look at the page with FF using Firebug to see which piece of CSS is controlling that section. Install Firebug, visit the page, click on the bug at the lower right, click on the little rectangle with the arrow at the top left of the firebug window, then click on the input field on the page.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting