Need to add custom CSS Class for some controls like section, columns, buttons etc

Web IT Solutions LLP
378 Posts
Web IT Solutions LLP posted this 17 October 2017

Dear Sir,

Important,

I like to add some animation to section sections, columns, section, buttons etc. Could you please let us know how ???

Your already refered URL - https://answers.themler.io/questions/108005/add-css-class-and-id-to-containers

I didnt unserstand your point which says as below, can you eleborte step by step how to overirde the existing class of Themler for specific section.

-------------------------------Your Point Starts----------------------------------------
Hi,

Now it is possible for the Section only. But actually each element has the unique class name already. To see it, use the inspect element feature in your browser. Then you can add that CSS code under the Home >> Settings >> Additional CSS.

Sincerely,
Hella
-------------------------------Your Point Ends----------------------------------------

I like to implement the animatio of the same - http://ianlunn.github.io/Hover/

Kindly requesting your assistance pleae...

Waiting for your valuable reply,

Thanks & Regards
Suffian Ahmed

Dear Sir, Important, I like to add some animation to section sections, columns, section, buttons etc. Could you please let us know how ??? Your already refered URL - https://answers.themler.io/questions/108005/add-css-class-and-id-to-containers I didnt unserstand your point which says as below, can you eleborte step by step how to overirde the existing class of Themler for specific section. -------------------------------Your Point Starts---------------------------------------- Hi, Now it is possible for the Section only. But actually each element has the unique class name already. To see it, use the inspect element feature in your browser. Then you can add that CSS code under the Home >> Settings >> Additional CSS. Sincerely, Hella -------------------------------Your Point Ends---------------------------------------- I like to implement the animatio of the same - http://ianlunn.github.io/Hover/ Kindly requesting your assistance pleae... Waiting for your valuable reply, Thanks & Regards Suffian Ahmed
Vote to pay developers attention to this features or issue.
7 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 30 October 2017

Hi,

Sorry for the delay in responding. As far as I remember, you had some similar case regarding adding the animation to some specific element and you have succeeded in that task. Please let me know if you need any further help with this.

Sincerely,
Hella

Hi, Sorry for the delay in responding. As far as I remember, you had some similar case regarding adding the animation to some specific element and you have succeeded in that task. Please let me know if you need any further help with this. Sincerely, Hella
Web IT Solutions LLP
378 Posts
Web IT Solutions LLP posted this 30 October 2017

Dear Hella,

Yes, you are right.

But i need your support regarding <img thing... how to add static images from my own projects. the senerio as i told you earlier. the same we are listing again below, please read my issue below, actually i have some css animations for images, like hover effects. the image><img tag will always supports dynamic path in html control and as you said we know its not supported. but, still i am looking for some solutions like i will keep one page lets says upload.html under main menu. in that upload.html page i will add some image lets named as (file name of .jpg file) image1.jpg & image2.jpg. in><img html tag the src path shell we give the dynamic value as "~/image1.jpg" or "/images/image1.jpg" or at final the dynamic full published path as "http://www.domainname.com/images/image1.jpg&quot; but, the dynamic relative path once published every image under "images" folder will append some dynamic key values to all file names which we could not figure it. ex. bc68e7bd2e2555914d33643255f41ee4_image1.jpg we need some solutions to trick the above request. we have implemented some hover animations for testing purpose, i will share the live link http://naorangdawakhana.com/more/load.html the above page load.html has some html controls, in which we have added some><div html script. in which we are pointing dynamic .jpg image path from live domain. but we like some alternative for the same as requested above. sanple code as below, html script. in which we are pointing dynamic .jpg image path from live domain. but we like some alternative for the same as requested above. sample url in which we have updated dynamic full path .jpg image file in html control. but, instead we like to add the></div><img src images from our own projects uploaded one.

sample website page for your reference - http://naorangdawakhana.com/more/load.html

please suggest some alternative solution for the same.

regards
suffian ahmed
src images from our own projects uploaded one. sample website page for your reference - http://naorangdawakhana.com/more/load.html please suggest some alternative solution for the same. regards suffian ahmed
src images from our own projects uploaded one. sample website page for your reference - http://naorangdawakhana.com/more/load.html please suggest some alternative solution for the same. regards suffian ahmed src images from our own projects uploaded one. sample website page for your reference - http://naorangdawakhana.com/more/load.html please suggest some alternative solution for the same. regards suffian ahmed

Dear Hella, Yes, you are right. But i need your support regarding &lt;img thing... how to add static images from my own projects. the senerio as i told you earlier. the same we are listing again below, please read my issue below, actually i have some css animations for images, like hover effects. the image&gt;&lt;img tag will always supports dynamic path in html control and as you said we know its not supported. but, still i am looking for some solutions like i will keep one page lets says upload.html under main menu. in that upload.html page i will add some image lets named as (file name of .jpg file) image1.jpg &amp; image2.jpg. in&gt;&lt;img html tag the src path shell we give the dynamic value as &quot;~/image1.jpg&quot; or &quot;/images/image1.jpg&quot; or at final the dynamic full published path as &quot;http://www.domainname.com/images/image1.jpg&quot; but, the dynamic relative path once published every image under &quot;images&quot; folder will append some dynamic key values to all file names which we could not figure it. ex. bc68e7bd2e2555914d33643255f41ee4_image1.jpg we need some solutions to trick the above request. we have implemented some hover animations for testing purpose, i will share the live link http://naorangdawakhana.com/more/load.html the above page load.html has some html controls, in which we have added some&gt;&lt;div html script. in which we are pointing dynamic .jpg image path from live domain. but we like some alternative for the same as requested above. sanple code as below, html script. in which we are pointing dynamic .jpg image path from live domain. but we like some alternative for the same as requested above. sample url in which we have updated dynamic full path .jpg image file in html control. but, instead we like to add the&gt;&lt;/div&gt;&lt;img src images from our own projects uploaded one. sample website page for your reference - http://naorangdawakhana.com/more/load.html please suggest some alternative solution for the same. regards suffian ahmed src images from our own projects uploaded one. sample website page for your reference - http://naorangdawakhana.com/more/load.html please suggest some alternative solution for the same. regards suffian ahmed src images from our own projects uploaded one. sample website page for your reference - http://naorangdawakhana.com/more/load.html please suggest some alternative solution for the same. regards suffian ahmed src images from our own projects uploaded one. sample website page for your reference - http://naorangdawakhana.com/more/load.html please suggest some alternative solution for the same. regards suffian ahmed
Support Team
Support Team posted this 31 October 2017

Hi,

The default Themler functionality cannot be changed. Themler renames images when uploads them. This functionality cannot be changed. There is no solution.

If you already have uploaded image to the server you can call it in the HTML control:
<img src="/images/about.png" alt="">
In this case Themler does not upload image and does not rename it, as the result. In this case HTML control uses EXISTING image. You just need to specify valid path to this image (absolute or relative).

So, the solution is to manually upload images and use HTML controls to show these images. In this case Themler will not affect image names.

Thank you,
Olivia

Hi, The default Themler functionality cannot be changed. Themler renames images when uploads them. This functionality cannot be changed. There is no solution. If you already have uploaded image to the server you can call it in the HTML control: `<img src="/images/about.png" alt="">` In this case Themler does not upload image and does not rename it, as the result. In this case HTML control uses EXISTING image. You just need to specify valid path to this image (absolute or relative). So, the solution is to manually upload images and use HTML controls to show these images. In this case Themler will not affect image names. Thank you, Olivia
Web IT Solutions LLP
378 Posts
Web IT Solutions LLP posted this 31 October 2017

Is there any way to fix this by uploading to the local project HTML Themler Source File itself with out uploading to server... ?

Regards
Suffian Ahmed

Is there any way to fix this by uploading to the local project HTML Themler Source File itself with out uploading to server... ? Regards Suffian Ahmed
Web IT Solutions LLP
378 Posts
Web IT Solutions LLP posted this 31 October 2017

Dear Olivia,

We know the images rename file name once we export the project, we have implemented as below,

<img src="../assets/images/1411b2446a4a20522572b05a0906b7d4_Skin.jpg" alt="Smiley face">

Above trick is working i think so. We are gettingi the result. We have added the skin.jpg image in the same page (will check in different page and different main & sub menu page) and exported the HTML Project once.. As we exported the project it will build the image file path under "assets" folder with new image name which is renamed as 1411b2446a4a20522572b05a0906b7d4_Skin.jpg and as we refresh the project WOW the added image is appering in the above script HTML Control Successfully.

Note: On every export the image name will be same as 1411b2446a4a20522572b05a0906b7d4_Skin.jpg

Kindly find the screenshop attached. Hope this senerio in my case works with out any trouble. This is with out uploading the images to server and pointing the absolute path like ex. www.domainname.com/images/image1.jpg

Need your assistance on the same ASAP. Waiting for your valuable reply.

Regards
Suffian Ahmed

Dear Olivia, We know the images rename file name once we export the project, we have implemented as below, <img src="../assets/images/1411b2446a4a20522572b05a0906b7d4_Skin.jpg" alt="Smiley face"> Above trick is working i think so. We are gettingi the result. We have added the skin.jpg image in the same page (will check in different page and different main & sub menu page) and exported the HTML Project once.. As we exported the project it will build the image file path under "assets" folder with new image name which is renamed as 1411b2446a4a20522572b05a0906b7d4_Skin.jpg and as we refresh the project WOW the added image is appering in the above script HTML Control Successfully. Note: On every export the image name will be same as 1411b2446a4a20522572b05a0906b7d4_Skin.jpg Kindly find the screenshop attached. Hope this senerio in my case works with out any trouble. This is with out uploading the images to server and pointing the absolute path like ex. www.domainname.com/images/image1.jpg Need your assistance on the same ASAP. Waiting for your valuable reply. Regards Suffian Ahmed
Web IT Solutions LLP
378 Posts
Web IT Solutions LLP posted this 31 October 2017

One more point i like to add it. the above img tag script with relative path of the image showing in the themler project at the time of designing only if the page is in main menu (if the page is moved to sub menu then the images are not reflecting in the design at the time of development).

script with relative path of the image showing in the themler project at the time of designing only if the page is in main menu (if the page is moved to sub menu then the images are not reflecting in the design at the time of development).

<img src="../assets/images/1411b2446a4a20522572b05a0906b7d4_Skin.jpg" alt="Smiley face">

If Load page keepet under sub menu Click -> Load then images are not reflecting in the development area. Images are reflecting to the img tag under html control. it is saved and exported one time. the images are exported to assets/images folder and its picking directely in design environment.

see the images for your reference. with main page and with sub child page screen shot attached.

And, after exporting the HTML Projects the reverse order its showing. I mean in the main page its missing since we have used ../ the images are not reflecting in the page at the time time after exporting the projects (load.html file). Why ???

need your clarification on the same asap. why ???

regards
suffian ahmed

One more point i like to add it. the above img tag script with relative path of the image showing in the themler project at the time of designing only if the page is in main menu (if the page is moved to sub menu then the images are not reflecting in the design at the time of development). script with relative path of the image showing in the themler project at the time of designing only if the page is in main menu (if the page is moved to sub menu then the images are not reflecting in the design at the time of development). <img src="../assets/images/1411b2446a4a20522572b05a0906b7d4_Skin.jpg" alt="Smiley face"> If Load page keepet under sub menu Click -> Load then images are not reflecting in the development area. Images are reflecting to the img tag under html control. it is saved and exported one time. the images are exported to assets/images folder and its picking directely in design environment. see the images for your reference. with main page and with sub child page screen shot attached. And, after exporting the HTML Projects the reverse order its showing. I mean in the main page its missing since we have used ../ the images are not reflecting in the page at the time time after exporting the projects (load.html file). Why ??? need your clarification on the same asap. why ??? regards suffian ahmed

Last edited 31 October 2017 by Web IT Solutions LLP

Web IT Solutions LLP
378 Posts
Web IT Solutions LLP posted this 31 October 2017

After publishing the page under hosting LIVE its working fine. But, its failing when we run the file under our browser from the exported project path.

http://naorangdawakhana.com/load.html

Find the attachment screenshot (online & offline page run) for clarification. Sorry for multiple tickets and request & inconvinceces from our end.

Regards
Suffian Ahmed

After publishing the page under hosting LIVE its working fine. But, its failing when we run the file under our browser from the exported project path. http://naorangdawakhana.com/load.html Find the attachment screenshot (online & offline page run) for clarification. Sorry for multiple tickets and request & inconvinceces from our end. Regards Suffian Ahmed
You must log in or register to leave comments