0
Welcome Guest! Login
0 items Join Now

ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down. Read our Farewell Blog Post for more details.

SOLVED Custom rt-header background per menu item?

Last Post
Search Topic
    • AndyBo's Avatar
    • AndyBo
    • Hero Rocketeer
    • Posts: 309
    • Thanks: 2

    SOLVED Custom rt-header background per menu item?

    Posted 14 years 3 weeks ago
    • Hi there,
      I am using latest versions of Joomla 1.6 and Tachyon template...

      I'm trying to add a nice background to {rt-header} which changes depending on the menu-item selected. I am using this approach I found in another thread...
      1. In the template-parameters turn the page-suffix-feature to "on"
      2. choose different "page-suffixes" for different menu-items like "bg-page-1", "bg-page-2" etc.
      3. create a folder called "backgrounds" in the images-folder of your template and put your images into it.
      4. add this to your css (I would use the style-css-files)
      body.bg-page-1 {background: url(../images/backgrounds/img-sky.jpg) no-repeat 50% 0;}
      body.bg-page-2 {background: url(../images/backgrounds/img-fire.jpg) no-repeat 50% 0;}
      5. clear your cache ...

      I did steps 1-3. For Step 4 I added this to header-light.css
      rt-header {background: url(../images/backgrounds/mypic.jpg) no-repeat 50% 0;}

      Then of course I did Step 5.... But the new image refuses to show....
      Have I missed something? Anything special I need to know about rt-header?

      Desparate for some help!
    • Last Edit: 14 years 3 weeks ago by AndyBo.
    #656362
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3230
    • Custom work done

    Re: SOLVED Custom rt-header background per menu item?

    Posted 14 years 3 weeks ago
    • If this is a site that is online could you please supply a link so we can better diagnose the issue?
      It makes our suggestions more accurate if we see the actual coding of your site.
    #656386
    • AndyBo's Avatar
    • AndyBo
    • Hero Rocketeer
    • Posts: 309
    • Thanks: 2

    Re: SOLVED Custom rt-header background per menu item?

    Posted 14 years 3 weeks ago
    • Hi Dan - Thanks for being there :D



      Right now I've removed my attempts at coding the CSS change - but I guess you're more interested in seeing the site as it is now anyway to help with some clues maybe?

      Thanks - Andy
    • Last Edit: 9 years 5 months ago by Kat05.
    #656389
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3230
    • Custom work done

    Re: SOLVED Custom rt-header background per menu item?

    Posted 14 years 3 weeks ago
    • Okay...
      Step1 - You need a background image, you can resize it to 1663px wide (width of template) and at least 800px high.

      Step2 - create a folder in in your site -> templates/rt_tachyon_j16/images/page_backgrounds

      Step3 - Make sure Template Manager -> Advanced -> Page Class Suffixes is set to YES

      Step4 - Go to the page you want the special background. Using Firebug (preferred) or the browsers "View Page Source" option, look at this line
      <body class="bodylevel-high modulehover-1 readonstyle-button fixedheader-0 font-family-helvetica font-size-is-large menu-type-fusionmenu col12 option-com-content menu-ciasa" style="position: relative; min-height: 100%; top: 0px;">
      The menu-ciasa is the Page Class Suffix for the CIASA page.

      Step5 - Using Firebug find the CSS path for the background image. In your case it would be div#rt-body-background. This element tag is used for all the templates page backgrounds. So we have to make it specific for the CIASA page. That's where menu-ciasa comes on. You would preface the background element tag with our page class suffix so it looks like this:
      .menu-ciasa div#rt-body-background
      Now that we have specified our element we need the CSS code for that element. Modifying the original code for div#rt-body-background we have:
      {background: url(/"../images/page_backgrounds/swimming.jpg") no-repeat scroll 0 0 transparent;}
      Putting it all together we have our CSS code:
      /* Page Backgrounds */
.menu-ciasa div#rt-body-background {background: url("../images/page_backgrounds/swimming.jpg") no-repeat scroll 0 0 transparent;}
      The
      /* Page Backgrounds */
      is too help remind you this is your code and if you ever upgrade the template it makes it easier to find custom code changes that have to be carried over to the new CSS files.
      So this is what it should look like when your done:
      This image is hidden for guests.
      Please log in or register to see it.
    #656426
    • AndyBo's Avatar
    • AndyBo
    • Hero Rocketeer
    • Posts: 309
    • Thanks: 2

    Re: SOLVED Custom rt-header background per menu item?

    Posted 14 years 3 weeks ago
    • Dan,

      THANK YOU so much..... GENIUS.... This works. This works.... :cheesy: :cheesy: :cheesy:

      Your explanation is so thorough and geared to teaching and not just instructing - I really appreciate all that effort and have learnt something permanently too. Awesome. Thank you again....

      Hey that's also a real nice swimming background you found!!!!!! Do you happen to have a copy - I scoured google images for sometime looking for something like that with no luck!
    #656439
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3230
    • Custom work done

    Re: SOLVED Custom rt-header background per menu item?

    Posted 14 years 3 weeks ago
    • I don't know what the copyright implications would be for you but here is the source of the image ->
    • Last Edit: 9 years 5 months ago by Kat05.
    #656588
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29363
    • Thanks: 956
    • Volunteer

    Re: SOLVED Custom rt-header background per menu item?

    Posted 14 years 3 weeks ago
    • Nice post Dan :-)
    #656590
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3230
    • Custom work done

    Re: SOLVED Custom rt-header background per menu item?

    Posted 14 years 3 weeks ago
    • About your header, try this code in your header-light.css:
      .ciasa div#rt-header {
  background: url("../images/backgrounds/ciasa.jpg") repeat-x scroll 50% 0 transparent;
  height: 80px;
}
 
      Then go check this link to see how repeat works ->
      This is a valuable resource 8)
      Moving this post to the solved forum.
    • Last Edit: 9 years 5 months ago by Kat05.
    #656592
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3230
    • Custom work done

    Re: SOLVED Custom rt-header background per menu item?

    Posted 14 years 3 weeks ago
    • This thread has been locked as the original issue has been marked as SOLVED
      This image is hidden for guests.
      Please log in or register to see it.
      .
      We do this to make sure that similar issues are at the top of the board queue where they have the best chance of being seen by moderators and helpful members.
      We ask that you please start a new thread with a relevant title in the appropriate forum -> CLICK HERE
    #656593

Time to create page: 0.094 seconds