Themes and Page Types
Permalink 3 users found helpful
I have a question and would be curious as to how someone would handle this.
I have a design for a site that has a different header image based on what section of the site they are on (ie: about, contact us). I am wanting this to be very easy for the client, and since the content layout is the same per page, I don't want to have to create a bunch of different page types. Is there a way via page attributes, or something, where when someone creates a new page, they choose the page type, then one of the options is a drop-down list that they can choose which page it will be for (ie: about, contact us) and that will then change the header image for that page.
Is that possible? If so, how. If not, then how could I go about doing that.
I have a design for a site that has a different header image based on what section of the site they are on (ie: about, contact us). I am wanting this to be very easy for the client, and since the content layout is the same per page, I don't want to have to create a bunch of different page types. Is there a way via page attributes, or something, where when someone creates a new page, they choose the page type, then one of the options is a drop-down list that they can choose which page it will be for (ie: about, contact us) and that will then change the header image for that page.
Is that possible? If so, how. If not, then how could I go about doing that.
EDIT: This is definitely possible using page attributes -- see other answers below for more details.
How about if I create a page attribute, say called Page Header Style, then create values for that attribute (about, contact). Then add that attribute as a Custom Field. When they add a page, choose the page type, then add the Page Header Style as a custom field, then a drop-down would appear with the values I have chosen (about, contact). When they select a value and add a page, it will show the value of the attribute (appropriate image) in the header. In theory, that should work. The question then would be... How would I go about doing that so it would work.
It's completely possible, if fact I do that on my current site (see my profile).
in default/left_sidebar/etc page types I have something like this:
follow?
in default/left_sidebar/etc page types I have something like this:
<style type='text/css'>
#Theme #Head{ color:red; }
#Theme.section #Head{ color:blue; }
</style>
<div id='Theme' class='<?$f=preg_split('/\//', $c->getCollectionPath()); echo $f[1]?>'>
<div id='Head'>...</div>
<div id='Body'>...</div>
...
</div>follow?
Here another way to do it if you prefer total control for anywhere.
1. Create a new Page Attribute (Select list type) with handle name as "header_image" and Add values: contact_us, about, sitemap, etc. and assign the attribute to your page type.
2. In your theme template, your header image:
3. Create your images, name it: header_[Value of the attribute].png for each related images and save it in your theme /images folder
4. You can choose from PROPERTIES in that Page Type a predefine liste of available Images headers you've created.
Just another work around :-)
1. Create a new Page Attribute (Select list type) with handle name as "header_image" and Add values: contact_us, about, sitemap, etc. and assign the attribute to your page type.
2. In your theme template, your header image:
3. Create your images, name it: header_[Value of the attribute].png for each related images and save it in your theme /images folder
4. You can choose from PROPERTIES in that Page Type a predefine liste of available Images headers you've created.
Just another work around :-)
This looks like a great solution, but I'm fairly new to this and don't follow 100% If someone could spell it out really clear for me I would be really grateful!
The steps above are pretty spelled out -- what specifically are you having trouble with?
Are you just new to Concrete5 or new to HTML/CSS in general?
Are you just new to Concrete5 or new to HTML/CSS in general?
Mostly new to Concrete5. I should have been more specific. What is the specific file in the theme template that should have the code added to it? That's the real help I need, which files to alter.
You just put that in the place where your header image is now. Where that is depends on the theme you're using, but it's most likely in YOURSITE/themes/YOURTHEMENAME/elements/header.php
Although it's also possible that the header image is implemented as a background image in the CSS (again, depends on the theme, but likely that it's in YOURSITE/themes/YOURTHEMENAME/main.css). If that's the case, you need to take it out of the stylesheet and move it to be an inline style for whatever element the background image is on.
If you have a url for a site we can look at and tell us which background image you're talking about, we could probably provide even more specific answers (but really there aren't that many files in most themes -- if you do know HTML/CSS, it shouldn't be too hard to figure out where that is -- just look in the theme folder -- YOURSITE/themes/YOURTHEMENAME/).
Hope that helps.
Although it's also possible that the header image is implemented as a background image in the CSS (again, depends on the theme, but likely that it's in YOURSITE/themes/YOURTHEMENAME/main.css). If that's the case, you need to take it out of the stylesheet and move it to be an inline style for whatever element the background image is on.
If you have a url for a site we can look at and tell us which background image you're talking about, we could probably provide even more specific answers (but really there aren't that many files in most themes -- if you do know HTML/CSS, it shouldn't be too hard to figure out where that is -- just look in the theme folder -- YOURSITE/themes/YOURTHEMENAME/).
Hope that helps.
Hello. This is the site I am working onwww.www.exposiciondedicada.com.ar... I need to put a different background to each page. I tried to use page attribute by putting those lines <img src="<?=$this->getThemePath()?>/images/header_<?php echo $c->getCollectionAttributeValue('header_image');?>.png">
OR
<style>
.header_image {
background-image:url(<?=$this->getThemePath()?>/images/header_<?php echo $c->getCollectionAttributeValue('header_image');?>.png);
}
</style>
in a new stylehseet. But I still don´t know how to connect that with every single page. Any help please?
OR
<style>
.header_image {
background-image:url(<?=$this->getThemePath()?>/images/header_<?php echo $c->getCollectionAttributeValue('header_image');?>.png);
}
</style>
in a new stylehseet. But I still don´t know how to connect that with every single page. Any help please?
You cannot put that code in a stylesheet. It has to be in the page type template file(s).
It looks like you might be using a copy of concrete5's default theme which you copied to your "themes" folder -- is this correct?
If so, what you want to do is edit this file:
YOURSITE/themes/default/elements/header.php
And put this code in that file (somewhere in the between the <head> and </head> tags):
Then all of your background images must be placed in this folder:
YORUSITE/themes/default/images/
And they must all be named "header_IMAGENAME.png" (so for example if you had 2 header images, one of flowers and one of a house, they would be called "header_flowers.png" and "header_house.png").
Finally, you must create the custom attribute in the concrete5 dashboard: Log into your site, go to Dashboard -> Pages and Themes -> Attributes. Under the "Choose Attribute Type" section, choose "select" from the dropdown menu at the bottom of the page and click "Go". Enter "header_image" (without quotes) for the handle, and "Header Image" (without quotes) for the name. Down where it says "Values", enter the image names (enter one name, click the "Add" button, enter another name, etc.). For example, if the names of the images are "header_flowers.png" and "header_house.png", you would enter "flowers" (without quotes) as the first value, and "house" (without quotes) as the second value. When you're done entering all of the values (one for each header image you put into the theme's "images" folder), click the "Add Attribute" button.
Now when you add a new page, you should see "Header Image" in the list of "Add Attributes". If you want to change the image on a page that already exists, go to it and click the "Edit Page" button in the toolbar and then click the "Properties" button in the toolbar and click the "Custom Attributes" tab.
Good luck!
It looks like you might be using a copy of concrete5's default theme which you copied to your "themes" folder -- is this correct?
If so, what you want to do is edit this file:
YOURSITE/themes/default/elements/header.php
And put this code in that file (somewhere in the between the <head> and </head> tags):
Then all of your background images must be placed in this folder:
YORUSITE/themes/default/images/
And they must all be named "header_IMAGENAME.png" (so for example if you had 2 header images, one of flowers and one of a house, they would be called "header_flowers.png" and "header_house.png").
Finally, you must create the custom attribute in the concrete5 dashboard: Log into your site, go to Dashboard -> Pages and Themes -> Attributes. Under the "Choose Attribute Type" section, choose "select" from the dropdown menu at the bottom of the page and click "Go". Enter "header_image" (without quotes) for the handle, and "Header Image" (without quotes) for the name. Down where it says "Values", enter the image names (enter one name, click the "Add" button, enter another name, etc.). For example, if the names of the images are "header_flowers.png" and "header_house.png", you would enter "flowers" (without quotes) as the first value, and "house" (without quotes) as the second value. When you're done entering all of the values (one for each header image you put into the theme's "images" folder), click the "Add Attribute" button.
Now when you add a new page, you should see "Header Image" in the list of "Add Attributes". If you want to change the image on a page that already exists, go to it and click the "Edit Page" button in the toolbar and then click the "Properties" button in the toolbar and click the "Custom Attributes" tab.
Good luck!
I really appreciate your descriptive answer.
I've followed all the explained. I can also select the attributes, and I've put all the images and codes in the correct place. But it seems there is something missing. In stead of using .png background images I am using .jpg and I changed it in the code you wrote, That it's the only change I did.
So the code in my header.php now is:
<head>
<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
<?php Loader::element('header_required'); ?>
<style type="text/css">
.header_image {
background-image: url(<?php echo $this->getThemePath(); ?>/images/header_<?php echo $c->getCollectionAttributeValue('header_image'); ?>.jpg);
}
</style>
</head>
is that correct?
I've followed all the explained. I can also select the attributes, and I've put all the images and codes in the correct place. But it seems there is something missing. In stead of using .png background images I am using .jpg and I changed it in the code you wrote, That it's the only change I did.
So the code in my header.php now is:
<head>
<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
<?php Loader::element('header_required'); ?>
<style type="text/css">
.header_image {
background-image: url(<?php echo $this->getThemePath(); ?>/images/header_<?php echo $c->getCollectionAttributeValue('header_image'); ?>.jpg);
}
</style>
</head>
is that correct?
Oh, I see what's going on.
So that code is applying the background image to the class "header_image". But that class doesn't exist in the theme's html (sorry I didn't notice that before -- the original instructions here were for a theme that had different html).
So what you want to do is change one line of that code from:
to:
And... it looks like you've got that code BEFORE the <?php Loader::element('header_required'); ?> line (I mean, you don't in the code you pasted above, but when I view the source of your site it's showing up before that), so I would check and make sure that custom code is the LAST thing before the </head> tag (just like you have it in this forum response).
Let us know if that works.
-Jordan
So that code is applying the background image to the class "header_image". But that class doesn't exist in the theme's html (sorry I didn't notice that before -- the original instructions here were for a theme that had different html).
So what you want to do is change one line of that code from:
.header_image {
to:
body {And... it looks like you've got that code BEFORE the <?php Loader::element('header_required'); ?> line (I mean, you don't in the code you pasted above, but when I view the source of your site it's showing up before that), so I would check and make sure that custom code is the LAST thing before the </head> tag (just like you have it in this forum response).
Let us know if that works.
-Jordan
I used your way and it worked! Thank you very much for this post! Your my savior! :)
