Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Background image on Special pages help with CSS or code?
#1
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.
Reply
#2
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 {

}
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply
#3
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;
}
Modern UI Admin for GetSimple
Watch the demo. Install this plugin. Use this CSS. Enjoy.
Reply
#4
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?
Reply
#5
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?
Reply
#6
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.
Reply
#7
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.
Reply
#8
I like sals solution.
Thanks
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply
#9
so sweeeeT & such simple & pure Smile ThX SaL
Reply




Users browsing this thread: 1 Guest(s)