Tutorial Adding more backgrounds to Navi template

Discussion in 'Subrion CMS Templates' started by Gleb S., Mar 7, 2014.

  1. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Greetings everyone!

    Today I am going to show you how to add more backgrounds to Navi template style switcher and Admin Dashboard (template config).

    1. First, add some background images here: [root]/templates/navi/img/backgrounds/
    Ideal resolution for large background is 1920x700. For tiled backgrounds, use whatever resolution you like.

    2. Now we need to tell Subrion CMS that we have some cool backgrounds and we want them to appear in admin dashboard and style switcher.
    Open this file: [root]/templates/navi/info/install.xml
    Find this code:
    Code (Text):
    <config group="template_navi"
                name="navi_background"
                type="select"
                order="3002"
                multiplevalues="mountains,clouds,wood,triangles,dark-lines"
                description="Background">mountains</config>
    And add a name for your background like this:
    Code (Text):
    <config group="template_navi"
                name="navi_background"
                type="select"
                order="3002"
                multiplevalues="mountains,clouds,wood,triangles,dark-lines,floral,your-name-here"
                description="Background">mountains</config>
    Also change this part:
    Code (Text):
    <config group="template_navi"
                name="navi_backgrounds"
                type="hidden"
                order="3002"
                description="Backgrounds">mountains,clouds,wood,triangles,dark-lines,floral</config>
    To this:
    Code (Text):
    <config group="template_navi"
                name="navi_backgrounds"
                type="hidden"
                order="3002"
                description="Backgrounds">mountains,clouds,wood,triangles,dark-lines,floral,your-name-here</config>
    I've added 'your-name-here' where needed.

    Now we need to reinstall Navi template. After this you can check template config page and see that our background was added. Also, style switcher already knows that we have new background available!

    One thing left: CSS styles.
    Open this file: [root]/templates/navi/css/user-style.css and add this lines of code:
    Code (Text):
    header.your-name-here {
        background: url('../img/backgrounds/your-name-here.jpg') 0 0 no-repeat;
    }
    your-name-here - name of your background and config that was added previously in step 2.

    Code for tiled backgrounds:
    Code (Text):
    header.your-name-here {
        background: url('../img/backgrounds/your-name-here.jpg') 0 0 repeat;
    }
    And you are done!
  2. Eleanna

    Eleanna Member

    Exactly what I was looking for, thanks!
  3. Eleanna

    Eleanna Member

    We made 2 new back ground images, both the recommended size of 1920 x 700. When we load the first one, no problems, the full image is shown. When we load the second one, the bottom 25% or so of the image gets cut off? The offending image is attached. You can see the result here: www.outsidetheboks.com.
    Any ideas?

    Attached Files:

  4. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hi, Eleanna!

    Add this css property to your background:
    Code (Text):
    header.otb1 {
    background: url('../img/backgrounds/otb1.jpg') 0 0 no-repeat;
    background-size: 100% auto;
    }
    This should solve your issue.
  5. Eleanna

    Eleanna Member

    Hi Gleb,

    afraid not, still chopping off the bottom 25% or so, but only on this header, which is of course the one we want to use...
  6. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Well, you can set this property:
    Code (Text):
    background-size: 100% 100%;
    But your background will be squeezed.

    Why background is chopping?
    The point is that your header has some height that is less than your background.
    When we set background to '100% auto', we tell browser to stretch image horizontally and keep proportion.
    When setting '100% 100%', background is stretched to width and height of header..

    My advise here is: make your image smaller and set background position to center.
  7. Eleanna

    Eleanna Member

    It would seem that the proportions 1920x700 (2.75/1) are wrong, no matter how small we make it, it keeps chopping. But only on this image, for some reason... Looks like we'll have to do this all over again, using less height. You wouldn't know how many pixels less this "some height that is less than your background is? Could save a lot of guess work...
  8. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Actually, height of header is set to auto. In your case header height is 430px. Height depends on slider height.

    Thanks!
  9. Eleanna

    Eleanna Member

    We have redone the image to a height of 430px, and now it takes it. I can't figure out why it would not resize the original of this, while it did resize the others... But it looks respectable now though. Thanks for your help.
  10. It worked great for me when using Subrion 3.1.8
    When I upgraded to Subrion 3.2.5 it does not work now.
    I noticed /info folder is gone but the two files are the same.
    I assumed I could follow your instructions without the /info folder.

    I have my own directories and do not use /img/backgrounds.

    For testing purposes, I put my images in the /img/backgrounds folder
    and edited user-style.css to only look for one image. It failed.
    header.bg {
    background: url('../img/backgrounds/bg.jpg') 0 0 no-repeat;
    background-size: 100% auto;
    }

    The only difference, I put my picture first in the menu.

    <config group="template_navi"
    name="navi_background"
    type="select"
    order="3002"
    multiplevalues="bg,mountains,clouds,water"
    description="Background">mountains</config>
    <config group="template_navi"
    name="navi_backgrounds"
    type="hidden"
    order="3002"
    description="Backgrounds">bg,mountains,clouds,water</config>
    Vasily_B. likes this.

Share This Page