Theme Template

Hi All,

I’ve adjusted the colours through theme manager but the example here is not updating, even with a refresh. It’s as if another theme style is overriding any changes, is there something else I need to look at? Bit confused.

Thanks
M

Try clearing your cache and temporary files @CAB_uk, then reload the page again after restarting your browser.

When using bootstrap themes you should make sure you have selected to use the bootstrap local and not cdn.

Also in the project options , the same bootstrap versions should be selected as design framework.

Thanks both, I’ve done that… still the same… I’ve got a feeling I’ve got something muddled up in my settings…

Is there anything jumping out to you? Have I confused the Bootstrap 4 & 5?

Much appreciated
M

Yes indeed you have mixed bootstrap 4 & 5

Both should be the same bootstrap 5

Also change the framework of the existing page to bootstrap 5 as well.

Hello all,

I’m pulling my hair out :see_no_evil: - I’ve purchased this theme - Vuexy - all I simply want to do is brand and change the colours. I’ve gone to the Theme Manager in Wappler, and anything I do does not affect the colours.

I am a newbie, so I guess the first question I’d like to ask, using the HTML Verson and with Bootstrap 5 (that they provide) is it right that I should be able to to change the colours via the Theme Manager. - I’m asking this to make sure I’m in the right area… - I’m also wanting to change the font to Open Sans.

Should I be asking Vuexy support, I’m just not sure what or where I need to be looking. If anyone has done a video with a start out on this Theme, I’d be grateful to watch, or I’ll make one myself if I can get a bit of support for others to share.

Do point me if I’m missing something - I’ve followed the guidance in the thread above but getting nowhere.

Thanks
Mik

Hi Mik, unfortunately that is not the intended use of theme manager. It is for customizing a base Bootstrap file. It’s not going to help you with third party templates. Actually, Wappler itself, is not intended for use with third party templates. Usually easier to. recreate them from scratch than to edit them.

This doesn’t mean what you are trying to do is impossible. It will just take more work and CSS/Bootstrap knowledge. Here is a link to get you started on using custom bootstrap set ups.

Seeing as how the theme you bought is based on bootstrapvue this mat not even help you and you may have to contact the provider for assistance on what files you need to edit and how. But there will not be a ‘Wappler way’ to do this.

1 Like

You could try right clicking on the element (in your browser) you wish to change the style for and click inspect to get the class name, then open the style for your theme and search for it, there you will be able to change any of its attributes.

The font you may have to include in the style, and apply it, again to the attribute within the style file for the theme, probably easiest to use Google Fonts…

We have implemented Vuexy for a client. And like Dave has pointed, BS Theme Manager plays small part in that.
Main changes need to be done on Vuexy theme’s CSS files. And also JS files if you want to customize some component stuff.

Thanks all - really helpful :+1::+1:

1 Like

@CAB_uk I have the same theme and yesterday I ran into the same problem. The documentation says that the theme can be customized using a file at assets/css.

In the Wappler settings, I specified the path to this file.

Then you need to add a class to the element and set styles for it.

On the styles tab, you can make sure that the styles have been added to the desired file.

Hi there,

Thank-you so much for this… I’ve been having an absolute nightmare with the theme, so much that I’ve not been able to use it. I reached out to the Vuexy Devs and was signposted to a doc that did not make sense.

The documentation talks about NPM and Gulp - neither of which I’ve been able to install. In wappler terminal I get a % rather than the $ and met with errors. So, I’ve given up.

I just simply want to change the purple to blue and just cannot seem to get to it. However I’ll take a look at your screen shots this afternoon and see if that fixes it.

Thanks all, really appreciate this :slight_smile:

M

Take a loot at this documentation about setting custom paths for customised themes:

See if this helps?

You need to set this path to the themes Bootstrap and JS files, otherwise it will just use the standard bootstrap files resptively, and only include your style.css file. More often than not most themes of this nature customise the bootstrap css file… Then after setting the above insure the style.css if directed at your themes style.css or equivalent. I’d recommend restarting Wappler after setting the above to force the changes to take effect, which may not be entirely necessary but only takes ten seconds…

Thanks everyone particularly @Dave @kirilljablonscky

I’ve followed the steps and managed to be able to access the correct relevant css file. Changing the values does indeed reflect in the preview.

It might be obvious, but is there a quick way to go through all of the html files and replace the colour #6610f2 with another value? - I guess that what I was hoping the theme manager would do - changing one value would filter through the whole website using a same css file.

I’m definitely making some progress so thanks - I just did not appreciate how difficult it would be, I’m determined to stick with Wappler, it has so much to offer, a fantastic app with a brilliant community.

Merry Christmas all, and have a fab day.

Hugs
M

2 Likes

Well done for sticking with it, you will get there. You can use the Search ability of Wappler to carry out a search and replace action within your Project. Simply click on the magnifying glass icon in the panel on the left. Enter what you want to find and replace it with. Remember to backup first just as a precaution!

:slight_smile:

1 Like

In order to change the main color of the theme, it is enough to change it in one file. Most likely, then you will have to use Gulp. Here are the instructions.