Thanks to Annette for asking for written instruction on how to change out your web page’s background image as part of the elements of a take-over, which is the point of the blog post.

The other point is to dub this blog, as this is my first post to it.  It’s an idea I had moons ago (probably still while at ITM), and certainly had unrealized intentions up to now here with Entercom Digital.  Let’s realize them!  You’ll see blog posts by me in this blog categorized into a brand new category: Vortal Kombat! Tips and tricks to effectively dominate the Vortal content management system.  Kill techniques included.

On to the business side of things.

To change your page’s background image, we have to override the Vortal master.css file which holds the background style information. We’ll copy the background style and insert it locally onto the page, wrapped in the proper tags, and then change out the actual background image.  The page will load with our new background style and override the master.  Procedure below.

*****

1. Copy the BODY { } style from the master station style sheet.  I get to the master style sheet via Firefox’s Web Developer tool, conversely you can download it from the following assembled, relative URL path: /pages/YOURCALLLETTERS_alt.css

2. In Vortal3, customize the desired page and insert the copied style into an HTML box at the top of the page, preferably in the head section of the Vortal page.


3.  Remember to correctly insert the BODY { }  style inside of the <style> tags.  Here is an example of how your code should look in the HTML box:

<style type=”text/css”>
<!–
BODY {
background-color: #000000;
text-align: center;
margin-top: 0;
margin-bottom: 0;
background-image: url http://imgsrv.etmdvejef2.itm-staging.com...);
background-repeat: repeat-x;
background-position: center top;
}
–>
</style>

4. Change the background image to your new background image (which you should load into the Vortal image helper).

5. Save the HTML box, and select done on the bottom of the customize page.

6. Preview your page with the modified background image to ensure it looks correct.

*****

As we discussed on the call, simply uploading the new background image may not always be the best option for the visual integrity of your page.  You may need to adjust and override the .Main Tb { } background as well, or “massage” the background image to best work on your site.

Again, the above procedure is only for Vortal generated pages.  For your site’s Drupal or Wordpress generated pages, please send our team a ticket via the support form.

So thats that!  I wonder what my Vortal Kombat blog post tag line should be.  Any suggestions??