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!

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!

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!

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!

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 6 years, 7 months ago by Mirela. Reason: html tags

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!

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!

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!

Hello,

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

Best regards!

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!

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!

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!

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!

Hello,

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

Best regards!

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!

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!

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!