Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Folie – Architecture Template

background imageMobile
    • 7 years, 3 months ago Bels_06
      Participant

      Expired

      Hi

      Please can you tell me how to change the background image in Folie – Architecture template.

      https://www.belsandpeter.com/images/folie_architecture.png

      I can change the colour in styling but I cannot change the image – cannot find where.

      I can change the image in the row but not the background.

      Also the same for the home page. I would like to change the background image and the codeless slider images will then become the bacKground as in the template.

      Thanks
      Belinda

    • 7 years, 3 months ago Mirela
      Participant

      Hello,

      This is the home slider. To change it’s images go to Codeless slider slide settings. Click on the slide number you want to change the image of. Then click on the row settings of that slide. After row options are unfolded in the left sidebar, go to Design > BACKGROUND IMAGE and change the background image here. See screenshots:
      https://postimg.org/image/z76xnn6j9/
      https://postimg.org/image/8y48nroet/

      Let us know.

      Best regards!

    • 7 years, 3 months ago Bels_06
      Participant

      Expired

      Morning

      No unfortunately it does not work for me.

      I have included a screen recording of me changing the background colour and then taking it off and the demo image is still in the background and my new slider images are there but I can’t change the background image. You say to click on the row but there is no row to click.

      This should be simple but it is not.

      https://drive.google.com/file/d/1MQIgD9DkkwqJS_tjTQYfUkKNLyAa9pSY/view

    • 7 years, 3 months ago Mirela
      Participant

      Hello,

      Sorry for the late reply.
      I checked and this is what i see now: https://postimg.org/image/do4qq33w5/
      You can catch the slide’s row options and then go on to it’s background image and edit it out.
      I see you have set up all slides with your own images. Let us know if you need further help.

      Best regards!

    • 7 years, 3 months ago Bels_06
      Participant

      Expired

      Morning

      Please see my screen recording.

      I followed your instructions and you can see that the folie demo background is still there – how do I change it to my background image.

      https://drive.google.com/file/d/1lEwL7SzTG43KN0ImVMd4B72g3_sFcozk/view

      Thanks
      Belinda

    • 7 years, 3 months ago Mirela
      Participant

      Hello,

      Sorry for the late reply.
      I added this css into your Additional Css menu:

      .header_container.header-left {
      	z-index: 9999 !important;
      }
      #viewport {
      	padding-left: 0px !important;}
      .swiper-slide.cl-slide.cl-slide-animation.animation--none.swiper-slide-active {
          width: 1584px !important;
      }

      See screenshot: https://postimg.org/image/ln4juz0z9/
      Please check and let us know.

      Best regards!

    • 7 years, 3 months ago Bels_06
      Participant

      Expired

      Great – but now there is something funny happening with the hoem page – the images are only showing half at a time. pLease let me know how to fix that.

      Is there nowhere I can change the background image other than using additional CSS – this template is not very user friendly.

      Cheers
      Belinda

    • 7 years, 3 months ago Bels_06
      Participant

      Expired

      Sorry Also the background image should not move – remain static like in the demo link

      Cheers

    • 7 years, 3 months ago Bels_06
      Participant

      Expired

      This is the demo I am refering to. I want my background image to do the same – remain static when you scroll up.

      Home

    • 7 years, 3 months ago Mirela
      Participant

      Hello,

      1-The latest css function is not to change the background image. But to make it fullwidth. The front page uses a slider, so the images you have to change are the slider background images. I have already explained in prior replies how to change it’s image:
      “To change itโ€™s images go to Codeless slider slide settings. Click on the slide number you want to change the image of. Then click on the row settings of that slide. After row options are unfolded in the left sidebar, go to Design > BACKGROUND IMAGE and change the background image here. See screenshots:
      https://postimg.org/image/z76xnn6j9/
      https://postimg.org/image/8y48nroet/
      ”

      For every background image (be it in a slider or simple page backgorund), just go to the Row Settings of that element and change it there.

      2-For the home slider images, i just increased the width in the latest css:

      .swiper-slide.cl-slide.cl-slide-animation.animation--none.swiper-slide-active {
          width: 1584px !important;
      }

      to 1600px. Please clear cache, the images are not cut anymore.

      3-The demo you have selected, has no issue setting up the style as the online demo. Your site has been thru a lot of custom changes, so the fastest and easier way to get what you want is to import demo data again. So all options will be reset to the default ones of this demo.
      Just rename the current pages (example, from ‘home’ to ‘home1’) so the pages with the same names, will not be replaced with the new demo pages. By importing the same demo again, your current pages will still be there. Only some other pages will be added and also the settings will be reset.
      I strongly suggest to reset as it will fix a lot of things in your site. I tested this demo 3 times already and the issue you have in your page do not happen.

      Let us know.

      Best regards!

    • 7 years, 3 months ago Bels_06
      Participant

      Expired

      Ok – I will have to work through your points

      1 – I just don’t understand your point 1. I know how to change the slider images – I dont understand why only half the images are displaying – see screen shot.

      https://www.belsandpeter.com/images/home_screenshot.jpg

      2 – For when you say…
      For every background image (be it in a slider or simple page background), just go to the Row Settings of that element and change it there…
      Please see the screen recording and you can see that I am unable to click onto the row to change the background.

      https://drive.google.com/file/d/1mk9XlIEfkh5KB_E5N9JDRdL-hr7MWO6U/view

      Please help

    • 7 years, 3 months ago Bels_06
      Participant

      Expired

      Hi with regards to point 1 I am having the same issue that I had a couple of months ago. I cannot click onto the row to be able to edit the codeless slider.
      Your solution in an earlier post was to just add another codeless slider underneath and move it above the old slider and delete the old slider – well I can add another codeless slider and move it but I cannot delete the old slider as i cannot click onto the row to delete.

      Im getting very tired of this problem as the template is not working as it should be.

    • 7 years, 3 months ago Bels_06
      Participant

      Expired

      This reply has been marked as private.
    • 7 years, 3 months ago Bels_06
      Participant

      Expired

      I can change the background image but to be clear I want a different background for different pages is that possible?

    • 7 years, 3 months ago Mirela
      Participant
      This reply has been marked as private.
    • 7 years, 3 months ago arturolucio
      Participant

      Expired

      Hi,
      I’ve just bought Folie template to use as my personal portfolio, and I’m not a web programmer, so it may be a silly question, but I’d like to know If, using Dark Photography, when I click on the image, in the home page, it could be opened on a page or an overlay with a video from vimeo and some info.

      thanks!

      • This reply was modified 7 years, 3 months ago by Mirela. Reason: html tags
    • 7 years, 3 months ago Mirela
      Participant

      Hello,

      The images in the demo homepage are a gallery. If you click on the image, it will open wide in a lightbox, but not link to a page.
      You can use portfolio to open image to pages, or single images to set a custom link to open in new page. You can add vimeo video in single media as well.

      Let us know.
      Best regards!

    • 7 years, 3 months ago arturolucio
      Participant

      Expired

      This reply has been marked as private.
      • 7 years, 3 months ago arturolucio
        Participant

        Expired

        This reply has been marked as private.
    • 7 years, 3 months ago Mirela
      Participant

      Hello,


      @arturolucio
      ,
      You can find the video tutorials link in theme’s profile in Themeforest (screenshot) and or here directly: https://www.youtube.com/watch?v=JW3DvWEsm3M&list=PLVU592YreiCUae1wz5uUNCt0jTN_Uiiyy

      This topic has another author, please open your own topic and let us know what else we can help you with. This topic has a different author which is able to see all private replies.

      Best regards!

    • 7 years, 3 months ago Bels_06
      Participant

      Expired

      Hi Mihaila

      Thanks adding the code for each page’s background is working thanks.

      I do you see where the pad id is? If I create another page how will I know its ID.

      Thanks

    • 7 years, 3 months ago Bels_06
      Participant

      Expired

      sorry how do you see the page id

    • 7 years, 3 months ago Mirela
      Participant

      Hello,

      You can see each page’s id by opening inspect element in your browser. For Chrome, you can open it by pressing F12 from your keyboard.
      The id is at the top of the page code. See screenshot: https://postimg.org/image/gqocbnrdj/

      Best regards!

    • 7 years, 2 months ago Bels_06
      Participant

      Expired

      Hi

      With the new updates I am no longer able to make any changes to my additional CSS as that tab is no longer. I need to change the background of Estate -> page-id-517.

      I have added a background for that page already but now need to change it. Before I just when to the code and made the change but now I cant find the code – please tell me where the additional CSS code that I have added is.

      Thanks

    • 7 years, 2 months ago Mirela
      Participant

      Hello,

      You can add additional css in Customize > General > Custom Codes.

      Best regards!

    • 7 years, 2 months ago Bels_06
      Participant

      Expired

      Thanks I have tried that but the image remains the same – I need to see the additional css i have already entered – but it is no longer their for me to edit the code.

      This was the code
      body.page-template-default.page.page-id-517 { background-image: url(https://dev.fergusonarchitects.co.za/wp-content/uploads/2018/04/estate_new.jpg); }

      I now need it to be
      body.page-template-default.page.page-id-517 { background-image: url(https://dev.fergusonarchitects.co.za/wp-content/uploads/2018/04/estate_new-1.jpg); }

      thanks

    • 7 years, 2 months ago Mirela
      Participant

      Hello,

      Try editing the new css to this:

      body.page-template-default.page.page-id-517 { 
      background-image: url(https://dev.fergusonarchitects.co.za/wp-content/uploads/2018/04/estate_new-1.jpg) !important;
       }

      It will overwrite the old css.

      Best regards!

    • 7 years, 2 months ago Bels_06
      Participant

      Expired

      Thank you, that works.

      So there is not other way to see the code already added? to make changes you have to write more code and not just simply change it?

    • 7 years, 2 months ago Mirela
      Participant

      Hello,

      The additional styles that you add through the new feature get stored into a custom post type, that’s why they aren’t affected by themes updates or migrations. It is a good way of adding small CSS changes, but if you’re about to make larger style changes, creating a child theme is still the best way to add custom CSS.

      I suggest you check out the wordpress forum for similar requests. If you need help customizing the current css, let us know so we can help you.

      Best regards!

    • 7 years, 2 months ago Bels_06
      Participant

      Expired

      Morning

      Please can you give me the Css code, to add to my background image on each page, to align them center-center

      for example – what do I add to the below CSS to center-center align

      body.page-template-default.page.page-id-517 {
      background-image: url(https://dev.fergusonarchitects.co.za/wp-content/uploads/2018/04/estate_new-1.jpg) !important;
      }

      Thanks

    • 7 years, 2 months ago Mirela
      Participant

      Hello,

      You add this attribute: position: center center !important;
      So the result css would be this:

      body.page-template-default.page.page-id-517 {
      background-image: url(https://dev.fergusonarchitects.co.za/wp-content/uploads/2018/04/estate_new-1.jpg) !important;
      background-position: center center !important;
      }

      Best regards!

    • 7 years, 2 months ago Bels_06
      Participant

      Expired

      Thanks

      What I am trying to do is make the mobile pages look right and at the moment it is not working. Any suggestions?

      this is what my abput us page looks like on a iphone.

      https://belsandpeter.com/images/mobile_about_us.jpg

      I need the image to resize and appear properly. How do i get that right on the iphone. All other devices it looks ok.

      Cheer belinds

    • 7 years, 2 months ago Medrit
      Participant

      Hello,

      The first row has the background image set to fullwidth and all the other elements jump over the first row. The layout you have chosen has that structure on mobile.

      If you add this piece of code you will get the result shown in the screenshot provided below.

      @media (max-width: 480px){
      .page-id-30 .row.cl_row-sortable.cl_row-fullheight.cl_row-flex.cl_row-cp-middle.cl-col-tablet-none {
      min-height: 23vh !important;
      }
      .page-id-30 body.page-template-default.page.page-id-30 {
      background-image: url(https://dev.fergusonarchitects.co.za/wp-content/uploads/2018/04/about_us_new.jpg);
      background-size: contain;
      background-position: top center !important;
      }
      }

      See screenshot:

      https://ibb.co/nNKxXS

      If you mean something else let us know.

      Best regards!

    • 7 years, 2 months ago Bels_06
      Participant

      Expired

      Hi unfortunately not what I need.

      I would like the image to resize proportionally to the device – in other words at the moment you can only see a section of the image – I want to be able to see the whole image on a mobile and ipad like you do on a computer screen.

      The image needs to resize with the size screen it is being displayed on.

      Thanks

    • 7 years, 2 months ago Medrit
      Participant

      Hello,

      Can you please provide a screenshot of the result it shows after you made the changes.

      Best regards!

    • 7 years, 2 months ago Bels_06
      Participant

      Expired

      The results are exactly like your screenshot but that is not what I want – the image the the words about us are written on is not sized correctly – you only see a portion on the image – I want to see the whole image.

      Sorry another problem – my codeless slider is not working properly – it is remain on the first slide and not changing. – Please help

    • 7 years, 2 months ago Medrit
      Participant

      Hello,

      Try this please, maybe you forgot some piece of code.

      @media (max-width: 480px){
      .page-id-30 .row.cl_row-sortable.cl_row-fullheight.cl_row-flex.cl_row-cp-middle.cl-col-tablet-none {
      min-height: 23vh !important;
      }
      body.page-template-default.page.page-id-30 {
      background-image: url(https://dev.fergusonarchitects.co.za/wp-content/uploads/2018/04/about_us_new.jpg);
      background-size: contain;
      background-position: top center !important;
      }
      }

      See the screenshot below:

      https://ibb.co/fWnZU7

      Best regards!

    • 7 years, 2 months ago Bels_06
      Participant

      Expired

      Great thanks

      About us is working well but all the other pages are doing this

      https://belsandpeter.com/images/mobile_contact_us.jpg
      https://belsandpeter.com/images/mobile_commercial.jpg

      Can I change the height somehow – don’t understand why about us is working nicely but all the other pages are doing this.

    • 7 years, 2 months ago Mirela
      Participant

      Hello,

      That’s because in the given css there is this part: .page-id-30
      This is a page’s id. And thus, restricts this css to be effective only on that page. To have the same effect in all other pages, just remove this “.page-id-30” from the code above.
      Let us know.

      Best regards!

    • 7 years, 2 months ago Bels_06
      Participant

      Expired

      This is the code I used for commercial page

      @media (max-width: 480px){
      .page-id-519 .row.cl_row-sortable.cl_row-fullheight.cl_row-flex.cl_row-cp-middle.cl-col-tablet-none {
      min-height: 23vh !important;
      }
      body.page-template-default.page.page-id-519 {
      background-image: url(https://dev.fergusonarchitects.co.za/wp-content/uploads/2018/04/commercial_new.jpg);
      background-size: contain;
      background-position: top center !important;
      }
      }

      and this is what it looks like

      https://belsandpeter.com/images/mobile_commercial.jpg

      is the code Wrong?

    • 7 years, 2 months ago Bels_06
      Participant

      Expired

      I have the same problem on ipad – can I use the same code but change the max-width: value? what is it for ipads or tablets?

    • 7 years, 2 months ago Mirela
      Participant

      Hello,

      To add custom css for ipad/tablet layouts, please change the max-width value to 1024px. It will be like this:

      @media (max-width: 1024px){
      /--your css here---/
      }

      -The commercial page seems to have padding added to the row containing image. You can either remove the padding from row settigns, or if you want to remove it only for mobile, then add this code:

      @media (max-width: 480px){
      #cl_row_5ad9cff3074463-52959281 {
          padding-bottom: 0 !important;
          padding-top: 0 !important;
      }}

      See screenshot: https://ibb.co/kWpeZ7

      Best regards!

Viewing 40 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password