Custom layout with Sprend Pro

Using Sprend Pro it is possible to create a custom layout for Sprend.

The custom layout will be displayed when you log in and on the download page where recipients download files you send to them.

By visiting the settings page you can upload your custom logotype and enter your own css definitions in order to give the Sprend site your own look and feel.

First we add our own logotype (“Infoflex”) with dimensions 113 x 28 pixels and white text on transparent background.

Using the css code below we can set the background color behind the logotype (“#logocontainer”) to red and set it to white for the rest of the page (“body”).

body {
  background: #ffffff;
}
#logocontainer {
  background: #cc0000;
}

You can see the results of the changes below in the screenshots at the bottom of this page.

Adding your own background image

You can also replace the background image with your own image.

We use a css media query to set the image to a scaled down variant for smaller displays (1920 px and less):

body {
  background-image: url('/images/sprend-bg-1920px.jpg');
}

@media screen and (min-width: 1921px) {
  body {
    background-image: url('/images/sprend-bg-4896px.jpg');
  }
}

Screenshots

Sprend default layout

Sprend with custom logotype

Sprend with custom background color

 

12 Responses to Custom layout with Sprend Pro

  1. Hej,
    Jag undrar hur jag byter bakgrundsbilden bakom rutan om jag vill personalisera den? I exemplet ovan har ni tex en lite suddig brun naturbild, som sedan blir vit i “infoflex”-exemplet.
    Kan du skicka instruktion så att vi kan lägga till en egen bakgrundsbild?
    Tack

    • Stefan says:

      Hej,

      du ska kunna byta ut bilden med följande kod:

      html {
      background-image: url(“http://www.example.com/files/minbakgrundsbild.jpg”);
      }

      där du byter ut url:en i exemplet ovan mot en länk där din bakgrundsbild är tillgänglig.

      Har du vidare frågor mejla gärna support@sprend.com istället.

      mvh
      Stefan

  2. Donald says:

    Hej, undrar om det finns en kod att byta färg på den gröna randen också?

    MVH
    Donald

    • Stefan says:

      Hej,

      det är “#topmenu_container”, så t.ex.

      #topmenu_container {
      background-color: #ffffff;
      }

      sätter den till vit.

  3. Hej!
    Jag har en COPYSHOP och behöver en funktion där kunderna kan ladda upp sina original som skall tryckas. Finns möjlighet att lägga upp en länk på min hemsida som kunden kan gå in i och ladda upp sina filer för tryck?

  4. Zandra Lindell says:

    Om vi köper sprend Pro, kan man då placera vår sprend på vår egen www-sida i en iframe?

    • Stefan says:

      Hej Zandra,

      Sprend Pro ger er möjlighet att påverka layout så ni kan få till en mer “avskalad” version att t.ex. placera i en iframe.

      Om det är tillräckligt bra för er är svårt att veta, men om ni registrerar er så kan ni “prova på” i 5 dagar så ni kan testa detta.

      Vi kan förlänga den perioden lite också om ni inte hinner testa färdigt på 5 dagar.

      mvh
      Stefan

  5. Jonas says:

    Sprend Pro verkar intressant men jag skulle vilja ha en lösning där vi kan hänvisa våra kunder till “vår egen” sprenduppladdningssida, typ http://www.sprend.com/foretagsnamn där vi kan visa vår logga, style och kanske någon extra information som vi vill förmedla till våra kunder.

    Går detta att ordna mot en human prislapp? :-)

    • Stefan says:

      Hej Jonas,

      denna funktion finns i kontotypen “Premium Inbox” i vår systertjänst FileCentral. Jag skickar dig ett separat mejl med mina kontaktupgifter ang detta.

      mvh
      Stefan

  6. Olle Nyåker OPTV says:

    Jag skulle vilja ha ett meddelande default under inställningar som sedan alltid visas i ämnesrad i skickat mail, i email-meddelandet och sedan även på den länkade nedladdningssidan. då blir jag glad och betalande kund

    • Stefan says:

      Hej Olle och tack för din feedback. Vi håller på att titta på lite ändringar runt detta och tar med oss dina synpunkter!

      mvh
      Stefan

Leave a Reply to Stefan Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>