0
Welcome Guest! Login
0 items Join Now

SOLVED Afterbuner2 background image

Last Post
Search Topic
    • gaaragr's Avatar
    • gaaragr
    • Jr. Rocketeer
    • Posts: 23
    • Thanks: 0

    SOLVED Afterbuner2 background image

    Posted 11 years 3 months ago
    • hello everyone ,i need to add a background to my afterburner2 site.Its pattern in repeat.
      hellenic-impex.eu

      I want the background to be outside the boarded area,these are the custom rules i used so far
      #rt-top-surround .rt-container {border: 1px solid #CCC;box-shadow: 0 0 7px #AAA;border-radius: 5px;}
#rt-mainbody-surround .rt-container {border: 1px solid #CCC;box-shadow: 0 0 7px #AAA;border-radius: 5px;}
#rt-drawer .rt-container {border: 1px solid #CCC;box-shadow: 0 0 7px #AAA;border-radius: 5px;}
#rt-bottom .rt-container {border: 1px solid #CCC;box-shadow: 0 0 7px #AAA;border-radius: 5px;}
#rt-mainbody-surround .rt-block {border: 1px solid #CCC;box-shadow: 0 0 7px #AAA;border-radius: 5px;}
#rt-footer {
    background-image: url("/images/gridme_@2X.png");
background-repeat:repeat;
}
 
 
@media (min-width: 960px) and (max-width: 1199px) {
#rt-top {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
    background-color: white;
}
body {
    margin-top: 150px;
}
}
@media (min-width: 1200px) {
#rt-top {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
    background-color: white;
}
body {
    margin-top: 150px;
}
}
    • Last Edit: 11 years 3 months ago by gaaragr.
    #1061958
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Afterbuner2 background image

    Posted 11 years 3 months ago
    • You'll probobably have to add a background color to some of the other positions too - I just did a couple...
       
body {
    background-image: url("/images/sphereimp.jpg");
}
header#rt-top-surround {
    background-color: transparent;
    background-repeat: repeat;
}
div#rt-top {
    background-color: transparent;
}
div#rt-top .rt-container, div#rt-header .rt-container {
    background-color: white;
}
 
      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_fracture). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      For more information on debugging & customising with LESS/CSS please read this blog post http://www.rockettheme.com/blog/coding/1767-basics-debugging-a-customizing-with-lesscss .

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1061980
    • gaaragr's Avatar
    • gaaragr
    • Jr. Rocketeer
    • Posts: 23
    • Thanks: 0

    Re: SOLVED Afterbuner2 background image

    Posted 11 years 3 months ago
    • i used this
      body {
     background-image: url("/images/moulin.png");
}
header#rt-top-surround {
     background-color: transparent;
     background-repeat: repeat;
}
div#rt-top {
     background-color: transparent;
}
div#rt-top .rt-container, div#rt-header .rt-container, div#rt-top-surround .rt-container, div#rt-mainbody-surround .rt-container, div#rt-drawer .rt-container, div#rt-bottom .rt-container {
     background-color: white;
}

      but it wont work with rt-bottom , Am i doing something wrong?
    #1062304
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Afterbuner2 background image

    Posted 11 years 3 months ago
    • Use this code...
       
div#rt-bottom {
    background-color: transparent;
}
 

      Please invest a little time in learning to use firebug as It will save you hours on things like this.

      For more information on debugging & customising with LESS/CSS please read this blog post http://www.rockettheme.com/blog/coding/1767-basics-debugging-a-customizing-with-lesscss .



      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1062318
    • gaaragr's Avatar
    • gaaragr
    • Jr. Rocketeer
    • Posts: 23
    • Thanks: 0

    Re: SOLVED Afterbuner2 background image

    Posted 11 years 3 months ago
    • cool it worked, thx alot for your help! Im using google chrome inspect ellement. apparently is not very helpfull. I will check firebug. issue solved once again ! Thank you
    #1062320

Time to create page: 0.056 seconds