I am able to switch between the bluevoltage & darkster themes from the samples.
I have added the following to both theme.css
img2 {
-webkit-box-reflect: below 0px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), color-stop(0.9, transparent), to(rgba(255, 255, 255, 0.5))) !important;
box-shadow: rgb(0 0 0) 4px 3px 5px;
border-radius: 16px;
background-repeat: no-repeat;
}
I have added an image and set the elementClassName to img2 ( I added Important as well )
The css is not applied. How ever the element shows as class=img2
If I paste the CSS into the img2 in the inspector I get the reflection I am after. So I presume the CSS is correct.
https://rockstruck.com/testCSS/rocksTruck.html
Click the list controls to select either of the first 2 themes.
I see nowhere a reference to theme.css.
procedure TForm7.WebListControl1ItemClick(Sender: TObject;
AListItem: TListItem);
begin
WebListcontrol1.ItemIndex := AListItem.Index;
if WebListcontrol1.ItemIndex = 0 then
Application.RemoveCSS('themecss')
else
Application.InsertCSS('themecss',AListItem.Text+'/theme.css');
end;
This changes the theme
I inspected the DOM and could not see the class img2
Also, in the CSS, to reference a class you have to start the selector with a "." or if you want to select an element by its ID, you have to start the selector with a "#". As you've said you're using a class, then it should look like this...
.img2 {
I have changed to .img2 but still doesn’t work.
The Css theme is changed ok on the list click.
Why wouldn’t the img2 class get applied
I’m obviously missing something simple here.
If I use
procedure TForm7.WebFormCreate(Sender: TObject);
begin
Application.InsertCSS('themecss','bluevoltage/theme.css');
end;
I see the css applied.
If I use
procedure TForm7.WebListControl1ItemClick(Sender: TObject;
AListItem: TListItem);
begin
WebListcontrol1.ItemIndex := AListItem.Index;
if WebListcontrol1.ItemIndex = 0 then
Application.RemoveCSS('themecss')
else
Application.InsertCSS('themecss',AListItem.Text+'/theme.css');
end;
I see the theme change but it loses my CSS(.img2)
Any ideas?
Hmmm... I've never tried swapping themes in the way you're doing here. But I'd be sure to check that the .img2 selector is defined in all the themes that you're switching between. Might also want to check that the theme's CSS file is being properly loaded after you make changes, and not cached by the browser.
When you look in the developer tools (like F12 in Chrome) you should be able to see a reference to the CSS file that is used to provide the style for your image element. So after changing themes, the new theme should be showing up in the <head> section of your document, and the new theme.css file should be showing up as the file associated with that element when you look at it in the inspector.
I looked at the site briefly, and I noticed that changing to the darkster theme (and the others on the list) would add the CSS file to the <head> section, but the bluevoltage option didn't for some reason - maybe there's a typo in the bluevoltage folder name or something??
Actually, I think I see the problem --- in your code, if you select the first item, you're removing your theme entirely for some reason. Maybe just remove that condition and see if you're able to get what you're after:
procedure TForm7.WebListControl1ItemClick(Sender: TObject;
AListItem: TListItem);
begin
Application.InsertCSS('themecss',AListItem.Text+'/theme.css');
end;
Or if you truly want an option of having no theme applied, add 'No Theme' as the first item in the list and use the code as you originally had it, and things should line up properly. The "ItemIndex=0" condition would then arise when "No Theme" is selected, whereas right now that condition arises when "bluevoltage" is selected, which is probably not what you intended.
That works okay. The code was copied from one of the TMS Web samples ( so strange).
But switching between the the second and third loses my CSS ( both contain the .img2 CSS )
Switching to the first one show .img2 CSS
The CSS in the second and third has the .img2 CSS added in the same place??????
Odd. Make sure that the CSS file that you are expecting is the one that actually appears in the <head> of the document when you select it. You can then check if that particular CSS file has the .img2 selector defined. Also remember to do a hard refresh after changing the contents of any CSS files that you're referencing.
Still struggling to understand what is going on.
I have opened the TMSWeb_Themes demo.
Added a WebImageControl
set its ElementClassName = img2
Added the .img css to bluevoltage/theme.css
procedure TForm3.WebFormCreate(Sender: TObject);
begin
WebListcontrol1.ItemIndex := 0;
Application.InsertCSS('themecss','bluevoltage/theme.css');
end;
CSS is
.img2 {
-webkit-box-reflect: below 0px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), color-stop(0.9, transparent), to(rgba(255, 255, 255, 0.5))) !important;
box-shadow: rgb(0 0 0) 4px 3px 5px;
border-radius: 16px;
background-repeat: no-repeat;
}
When I run this I don't see the css applied to the image. The same procedure works in my app.
I just tried it and it seems to have worked? Can you send a screenshot? I added an image to WebPanel3 and the CSS is applied (rounded, mirrored). I didn't change anything in the application at all and just updated the bluevoltage/theme.css by adding your .img2{} to the very bottom of the file.
Quick checklist... Not sure how else to approach it. I'm sure you've done these already, many times!
- Check that the bluevoltage\theme.css has the new CSS and that the file has been saved.
- Check that the browser has been given a hard-refresh.
- Just to be extra-sure, try a different browser.
- Try putting the CSS at the very beginning. If something else changed in the CSS (like a closing } was deleted) then the CSS you're adding will not be processed.
- Try adding it to a different theme file. Maybe the bluevoltage\theme.css on your system has a different error of some kind like I mentioned in 4)
Thanks Andrew,
I'm using chrome. Control F5 worked also opening in Edge also worked.......
Is there a way to force TMS Wed to do the hard-refresh
Not that I'm aware of. It becomes a bit of a habit after doing it a few thousand times! Also, hopefully, you won't spend all your days editing CSS so it won't be as much of an issue on a regular basis. The same thing can happen sometimes with the JavaScript files that are generated. Where you're updating your app code but nothing seems to be changing in the browser. Then you do a hard-refresh and all is well again. Especially important when testing on different devices.
There are a few tricks, like adding an extra ?abc123xyz sort of random extra bits to the CSS or JS filenames (where that string is generated randomly or in some kind of sequence) so that each time your app runs it thinks it is getting a different filename. But that's counter to having these files cached which is usually what you want, once it is in production at least.
I'm not sure why but if I remove the Debug folders (Win32 & TMSWeb) then recompile the CSS works. All the other methods ?33=555 Hard refresh etc don't apply the CSS consistently.
I have uploaded a version here : TMS Web Project
Looking cool. I have copied the WebResponsiveGridPanel from Rock's Story Tab to the Guides Tab. When switching the sizing is different. I can't see which setting is causing this ( or why ) as I copied and pasted????
Sorry, I don't think that URL is working?
