Background image on Special pages help with CSS or code? - Printable Version +- GetSimple Support Forum (http://get-simple.info/forums) +-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3) +--- Forum: Plugins (http://get-simple.info/forums/forumdisplay.php?fid=13) +--- Thread: Background image on Special pages help with CSS or code? (/showthread.php?tid=3590) |
Background image on Special pages help with CSS or code? - sarnaiz - 2012-09-26 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/CML/style.css?v=3.1.2 #news { background: url(http://s418104665.onlinehome.us/data/uploads/siteImgs/bkgrd-news.jpg)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. Background image on Special pages help with CSS or code? - shawn_a - 2012-09-26 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 { } Background image on Special pages help with CSS or code? - sal - 2012-09-26 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 (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 image on Special pages help with CSS or code? - sarnaiz - 2012-09-26 shawn_a Wrote:Maybe the plugin can be modified to put a news class on the body tag. Thank you for this! Do you have an idea of where I would need to add this? Background image on Special pages help with CSS or code? - sarnaiz - 2012-09-26 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 . 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? Background image on Special pages help with CSS or code? - sarnaiz - 2012-09-26 sarnaiz Wrote:shawn_a Wrote:Maybe the plugin can be modified to put a news class on the body tag. 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. Background image on Special pages help with CSS or code? - sarnaiz - 2012-09-26 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 . 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/uploads/siteImgs/bkgrd-news.jpg)no-repeat top left; } Thank you for your help Sal. Background image on Special pages help with CSS or code? - shawn_a - 2012-09-27 I like sals solution. Thanks Background image on Special pages help with CSS or code? - evan70 - 2012-09-27 so sweeeeT & such simple & pure ThX SaL |