Creating Own WFB Theme - Adding CSS...

User 2656757 Photo


Registered User
5 posts

Hi, I tried to add my own override CSS file to a theme I made ...

Reason: I want my Overrides separate from the Original CSS code ... allowing for easy re-apply if theme is updated & also helps to keep my clarity on any changes I make!

Steps
    I created a new theme: copying .fbt, unzipping, etc.
    I Put my Override CSS file in the Theme CSS folder
    I Put a Link Statement in the Form HTML to the CSS File

When I used my new theme, all worked well, except the CSS File I put in the Theme CSS folder did not get carried over into the Exported Code (when I did the File > Export > Manual Server Setup).

Did I miss something -or- does it only pickup the "default.css" ???

Thanks ahead of time! :P
Attachments:
User 187934 Photo


Senior Advisor
20,271 posts

Hi Larry,
One to to look for is to make sure your style sheet link in the head of the page is below the form builders own style sheet link. Even then your not guaranteed a full override because some of the rules in the original may be pointing to the class or id below what your override styling is pointed at.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2656757 Photo


Registered User
5 posts

Hi Eric, Thanks for your reply ... From looking around I know you are well respected here!

Yes, everything works great in testing my changes (manually overriding WFB output folders & files) before I packaged into a theme. And I have my override style sheet link 2nd to the "default.css".

It is just that the "override.css" file that I put in the Theme "css" folder ... does NOT get put in resultant folder structure from the "Manual Server Setup" Export ?

It is in my Theme Folder package ... but it does not come out the other end during the Export ?
User 187934 Photo


Senior Advisor
20,271 posts

How did you go about altering the theme?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2656757 Photo


Registered User
5 posts

I followed steps exactly (as far as I know) as shown in http://www.coffeecup.com/help/articles/creating-your-own-web-form-builder-themes/

A couple extra things I did though was to:
1) Put an additional "css file" in the "theme > NewThemeName > css" folder (see attachment on 1st post)

2) I updated the js file (js_to_native_api.js) that creates the Form HTML, so that the 2nd css link will automatically be there

I have a feeling I might be the 1st to do this ... and maybe the extra file does not get moved around, even though it is in the same folder as the "default.css"
User 187934 Photo


Senior Advisor
20,271 posts

I have never altered a theme. I have attempted altering a SCCP theme using the same technique and it always corrupted the files. Did you try altering form after export?
Have you uploaded the form so we can look at it?
I'm not totally sure you can add additional files. That's what I was trying to do. I know you can alter the existing ones.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2656757 Photo


Registered User
5 posts

Hi Eric,

Yes, I started out by altering after the Export .... Everything worked great!

I think that is the thing, I can't add additional files!

For my New Theme to work, all I have to do is add that additional file "xxxx.css" back into the folder ... and everything works as expected.

Thanks anyways for your help ... I appreciate it!
User 187934 Photo


Senior Advisor
20,271 posts

I wish it would work the way you want as that's what I was thinking was possible but it appears that you can't add your own additions to themes only alterations to existing ones. I have made many forms with customizations after export. I actually do some customizations to forms after export then put them in the actual fb when I have enough to make it worth making a new one or when I need additional validation rules. It's not bad replacing alterations after export if you save snippets of the code with comments for easy replacement.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2656757 Photo


Registered User
5 posts

Ok, thanks Eric ... I appreciate your time!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.