Forum - Adding an image to hug the bottom of the page

This forum is for churches and ministries using Web-Empowered Church tools or packages. If you are a WEC customer, please submit a ticket. If you are reporting a bug with one of our plugins, please email us. If you are a business entity and want help that you cannot find here, please look at our services.

Notice: we are using new forum software and most messages from last 2 years were transferred. If you had an account before, please login to post a message on the forum.

Forum » Using WEC System » Skins

Adding an image to hug the bottom of the page

Author	Message
Written on: 01/13/2011
Holly Ross Topic creator registered since: 10/22/2007 Posts: 53	I would like to add the following grass image (this is only a temporary version of the stock image which will be replaced when we purchase the license) to the bottom of my site, where the green is currently showing up. I'm aware that the green is only the background color for the whole page, but would eventually like to change to be a blue similar to the cloud background. I have created a new css style (the part in red): [code] /* @group Footer */ #grassfooter { background-position: bottom; background-image:url(images/grass_footer.jpg); background-repeat:repeat-x; } #footer { width:980px; margin:15px auto; } [/code] but I'm not sure where to code the #grassfooter div into my template. How/where do I go about doing that? Is this the best way to do this? I want the grass to show up on every page. [This article was edited 5 times, at last 13.01.2011 at 11:27.]
	Profile
Written on: 01/13/2011
Dave Slayback registered since: 11/01/2004 Posts: 488	Hi Holly, You can put that CSS in various places. I am not sure what template you are using, but here are some thoughts: if you are doing lots of CSS edits, then I would add a new CSS file in fileadmin/templates or somewhere in fileadmin (your choice). Then add this to the SETUP section of the Default Template in the root of your site: page.includeCSS.file1 = fileadmin/templates/mysite.css if you just have some CSS or just want it added to a few pages, you could add this to every +ext template on each page. Or you could even add this to your Default Template. Put it in the SETUP section: page.headerData.1000 = TEXT page.headerData.1000.value ( <style> </style> ) Hope this helps! -Dave
Dave Slayback registered since: 11/01/2004 Posts: 488	Profile WWW
Written on: 02/01/2011
Holly Ross Topic creator registered since: 10/22/2007 Posts: 53	Hi Dave, Okay I added that code to the Default Template under SETUP, but am not sure if: 1.) I need to define more than JUST that bit of red CSS code above (like do I need to specify that it IS css code anywhere?) This is probably more of a CSS question than just a TYPO3 question. 2.) Do I need to do something to "reapply" the template to my site after modifying it? My team members were modifying the template during last week's work session and couldn't get any of the changes to "apply" to the site. Is there a step other than clearing the cache that we're missing? Thanks! - Holly
	Profile
Written on: 02/08/2011
Holly Ross Topic creator registered since: 10/22/2007 Posts: 53	By the way, I'm using the Touch of Elegance skin. http://wpumc.wecbuilder.org (The grass that is currently on the front page is only there as a placeholder - actually added as an image element inside my content area.) Now I'm wondering if it would be better to add the code for the grass using typoscript in the fileadmin/: config/skins/skin_touchofelegance/typoscript/skin_typoscript.ts file instead of using CSS... Any thoughts? Direction? Code help? Thanks in advance!!
	Profile
Written on: 02/15/2011
Holly Ross Topic creator registered since: 10/22/2007 Posts: 53	We ended up putting a div tag at 100% with absolute positioning, in the typoscript file (fileadmin/: config/skins/skin_touchofelegance/typoscript/skin_typoscript.ts) [code] footer > footer = COA footer { wrap = <div id="footer" class="clear"> \| </div> 10 = TEXT 10.data = date:U 10.strftime = %Y 10.wrap = <p id="footerCopyright">©  \|  {$copyright}, {$contact}</p> 20 = TEXT 20.value = We are a Web-Empowered Church. 20.typolink.parameter = http://www.webempoweredchurch.org/ 20.typolink.ATagParams = id="footerHomeLink" 20.if.isTrue = {$enableWECFooter} 30 = TEXT 30.wrap = <div class="grassfooter"></div> 30.file= http://wpumc.wecbuilder.org/fileadmin/config/skins/skin_touchofelegance/css/images/grass_footer.png } [/code] In the mainstyles.css file, we added: [code] /* @group Footer */ .grassfooter { background-position: bottom; background-image:url(images/grass_footer.png); background-repeat:repeat-x; width:100%; height:155px; left:0px; position:absolute; } [/code] And now it works and we have grass at the bottom of the pages! http://wpumc.wecbuilder.org Thanks for your help! [This article was edited 2 times, at last 15.02.2011 at 21:07.]
	Profile