Posts: 88
Threads: 19
Joined: May 2012
Hi,
I am almost done with coding up this site thanks to previous help I have received here. But I have run into a snag with using a different background for each section. I suspect there is a better way to do what I am trying to do with code rather than CSS, but I do not know how to do it. Of course if CSS is the best, that's fine too.
http://s418104665.onlinehome.us/index.php
The sections are working fine using the id and the background img CSS, however in the News section using I18N special pages I am not able to figure out how I will be able to insure each news page will have the same background as the parent.
My CSS is using this for now
http://s418104665.onlinehome.us/theme/CM...ss?v=3.1.2
#news {
background: url(
http://s418104665.onlinehome.us/data/upl...)no-repeat top left;
}
I would rather not have the client edit the CSS every time they create a new page as I have done. Plus I have the problem of the news pages that are created having the correct background.
Any help with how to code this would be much appreciated as I am not a programmer. I have searched through the forum, but I'm not finding anything to help me figure this out.
Thank you.
Posts: 6,266
Threads: 181
Joined: Sep 2011
Maybe the plugin can be modified to put a news class on the body tag.
Or you can use jquery to add it
$('body').addClass('news');
body .news {
}
Posts: 161
Threads: 6
Joined: Jan 2010
In my GetSimple templates, on the body element I usually add an ID using the page's slug (like you do, however I prefix mine with "d-" to avoid ID collisions) and also add the page's parent slug as a class (also prefixed with "p-") which helps to style sections .
Code:
<body
id="d-<?php echo get_page_slug(false); ?>"
class="p-<?php echo (get_parent(false) != '') ? get_parent(false) : 'orphan' ?>">
(I've put the attributes on their own line here for readability, they'd normally be on the same line. I also add the body's ID as a class in an effort to avoid the (apparent) bad practice of using ID's in CSS selectors.)
So say you had that in place, it would just be a matter of tweaking your CSS to this:
Code:
#d-news, .p-news {
background: url(/data/uploads/siteImgs/bkgrd-news.jpg) no-repeat top left;
}
Posts: 88
Threads: 19
Joined: May 2012
shawn_a Wrote:Maybe the plugin can be modified to put a news class on the body tag.
Or you can use jquery to add it
$('body').addClass('news');
body .news {
}
Thank you for this! Do you have an idea of where I would need to add this?
Posts: 88
Threads: 19
Joined: May 2012
sal Wrote:In my GetSimple templates, on the body element I usually add an ID using the page's slug (like you do, however I prefix mine with "d-" to avoid ID collisions) and also add the page's parent slug as a class (also prefixed with "p-") which helps to style sections .
Code:
<body
id="d-<?php echo get_page_slug(false); ?>"
class="p-<?php echo (get_parent(false) != '') ? get_parent(false) : 'orphan' ?>">
(I've put the attributes on their own line here for readability, they'd normally be on the same line. I also add the body's ID as a class in an effort to avoid the (apparent) bad practice of using ID's in CSS selectors.)
So say you had that in place, it would just be a matter of tweaking your CSS to this:
Code:
#d-news, .p-news {
background: url(/data/uploads/siteImgs/bkgrd-news.jpg) no-repeat top left;
}
So each news page is getting an id, but that's the solution, adding a class so that I don't have to have a line of css for every id that is generated as a new page is created. Duf! *forehead slap* Using the parent page as the class is even better!!!
Where would I add this? In the head.inc.php file?
Posts: 88
Threads: 19
Joined: May 2012
sarnaiz Wrote:shawn_a Wrote:Maybe the plugin can be modified to put a news class on the body tag.
Or you can use jquery to add it
$('body').addClass('news');
body .news {
}
Thank you for this! Do you have an idea of where I would need to add this?
I'm thinking since I'm using special pages I would need to add it into the base page, in the view window. This is a very elegant solution too if it works.
Posts: 88
Threads: 19
Joined: May 2012
sarnaiz Wrote:sal Wrote:In my GetSimple templates, on the body element I usually add an ID using the page's slug (like you do, however I prefix mine with "d-" to avoid ID collisions) and also add the page's parent slug as a class (also prefixed with "p-") which helps to style sections .
Code:
<body
id="d-<?php echo get_page_slug(false); ?>"
class="p-<?php echo (get_parent(false) != '') ? get_parent(false) : 'orphan' ?>">
(I've put the attributes on their own line here for readability, they'd normally be on the same line. I also add the body's ID as a class in an effort to avoid the (apparent) bad practice of using ID's in CSS selectors.)
So say you had that in place, it would just be a matter of tweaking your CSS to this:
Code:
#d-news, .p-news {
background: url(/data/uploads/siteImgs/bkgrd-news.jpg) no-repeat top left;
}
So each news page is getting an id, but that's the solution, adding a class so that I don't have to have a line of css for every id that is generated as a new page is created. Duf! *forehead slap* Using the parent page as the class is even better!!!
Where would I add this? In the head.inc.php file?
Woohoo! Worked like a charm.
<body
id="<?php get_page_slug(); ?>"
class="p-<?php echo (get_parent(false) != '') ? get_parent(false) : 'orphan' ?>">
I used this so that I still get my id and it adds the class of the parent name. I liked your use of the prefix.
#news, .p-news {
background: url(
http://s418104665.onlinehome.us/data/upl...)no-repeat top left;
}
Thank you for your help Sal.
Posts: 6,266
Threads: 181
Joined: Sep 2011
I like sals solution.
Thanks
Posts: 59
Threads: 0
Joined: Mar 2012
so sweeeeT & such simple & pure
ThX SaL
Download
