Thursday, May 23, 2013
   
Text Size
Login

Adding a selectable background to a Yootheme template

Print

Last Updated on Tuesday, 04 December 2012

Applies to:
  • Joomla 2.5.8
  • Yootheme Template 2012

What?
For any web-developer who can program in PHP/HTML, this would be easy to hard-code and override. However, the article below demonstrates how to make this an option that your client can switch off/on using the Joomla Admin Panel.

How?
For demo purposes, I'm going to add the background "Ambient Turquoise". Yootheme uses CSS files to do this so we'll need to modify the XML file and add some files that this will select.
  1. Modify \templates\<yootheme_template>\config.xml add the select option "Ambient Turquoise" to the end of the list:

    1.  <fields name="Profiles"> 
    2.            <field name="Style" type="separator" /> 
    3.            <field name="style" type="styles" default="" label="Style" description="Select the style variation." /> 
    4.            <field name="background" type="list" default="grey" label="Background" description="Select the background."> 
    5.                 <option value="grey">Grey</option> 
    6.                 <option value="dots">Dots</option> 
    7.                 <option value="tartan">Tartan</option> 
    8.                 <option value="lines">Lines</option> 
    9.                 <option value="dark_squares">Dark Squares</option> 
    10.                 <option value="light_squares">Light Squares</option> 
    11.                 <option value="mosaic">Mosaic</option> 
    12.                 <option value="turquoise">Turquoise Color</option> 
    13.                 <option value="ambientturquoise">Ambient Turquoise</option> 
  2. Add a \templates\<yootheme_template>\css\background\ambientturquoise.css file. Note the same filename as in the option value of the previous step.

    1.  body#page {  
    2.       background: #f4f5f5 url(../../images/background/ambientturquoise/ambientturquoise.jpg) 0 0 no-repeat;  
    3.  } 
  3. If using an image, create a folder and add the image matching the path in the previous step: \templates\<yootheme_template>\images\background\ambientturquoise\ambientturquoise.jpg
  4. Test by logging into the Joomla Admin Panel > Extensions > Template Manager > Styles > "Select the Background" > Save/Apply
  5. Done!

Additional Note
  • I do not work for Yootheme.
  • I did not post this to Yootheme forums because you have to be a paying member to access these and I tend to piggyback on my client's subscriptions.
  • This information does not come from Yootheme forums.
  • I am too lazy to answer/update my solutions in 3rd-party forums.

Comments   

Annie
# Annie Thu, 29th November 2012
Hey - thanks so much for doing this! YooTheme should have this clear explanation on their own website. If they do, I couldn't find it.
Programmers always seem to forget that what is kindergarten for them is university for others - especially people who struggle with code
Like | Dislike | 0 Reply | Reply with quote | Quote
Add Comment

Name:

Email:

Website:

Message:



Human Check:

Security code
Refresh

Please type what you see in the image above:

Main Menu

Latest Posts

  • Joes Revolver Map (JRM)

    • Fri 17-May-13
      Hmmm... Sounds like a problem with the identifier. Was it working before and has there been a change ...
      Joel Lipman  
    • Fri 17-May-13
      Hello Joel: Yes, I do have it published on all pages of the site. I just went back to Revolver maps to ...
      Bill Duncan  
    • Fri 17-May-13
      Hi Bill, From the developers of RevolverMaps, "the module would need to be published on every page ...
      Joel Lipman  
    • Fri 17-May-13
      Hi Bill, I'll investigate further as you're not the first to say this happens. In the meantime, simply ...
      Joel Lipman  
    • Fri 17-May-13
      Its a great extension. But when I set it up I only show my presence on the 3D map and no other visitors ...
      Bill Duncan

Joes Word Cloud

Copyright © 1999-2013 Joel Lipman .Com

Restore Default Settings