Page 1 of 1

modify the theme by code

Posted: Thu Dec 07, 2017 4:59 pm
by pf shadoko
hello,
I'm trying to change the theme by code.

problem:
when I modify the theme after creating windows and gadgets
it's okay, but what is created next keeps the initial theme.

Code: Select all

Procedure css()
!$("body").css("font", "30px time");
!$("body").css("color", "#f00");

!$(".spiderwindow").css("background-color", "#aaf");
!$(".spiderwindow").css("border-radius", "8px");
!$(".spiderwindow").css("border", "0px");
!$(".spiderwindow").css("box-shadow", "4px 4px 16px 0px #000");

!$(".spiderwindow-content").css("background-color", "#88f");
!$(".spiderwindow-content").css("border-radius", "0 0 8px 8px");

!$(".dijitButtonNode").css("box-shadow", "4px 4px 16px 0px #000");
!$(".dijitButtonNode").css("background", "#8f8");
EndProcedure

Procedure fenetre(i)
    OpenWindow(i,i*100,i*50,200,200,"FenĂȘtre "+Str(i))
    TextGadget(-1,10,10,180,30,"Texte")    
    ButtonGadget(-1,10,40,180,30,"bouton",#PB_Button_Toggle) 
EndProcedure

For i=0 To 2:fenetre(i):Next
css()
For i=3 To 5:fenetre(i):Next

Re: modify the theme by code

Posted: Thu Dec 07, 2017 8:10 pm
by Peter

Code: Select all

Procedure SetNewStyle()
  
! var elHead = document.getElementsByTagName('head')[0];
! var elStyle = document.createElement('style');
! elStyle.type= 'text/css';
! elHead.appendChild( elStyle );

! elStyle.innerHTML = '' + 
!   '' + 
!   ' body {' + 
!   '   font: 30px time; ' + 
!   '   color: #f00; ' + 
!   ' }' +
!   '' +
!   ' .spiderwindow { ' +
!   '   background-color: #aaf;' +
!   '   border-radius: 8px;' +
!   '   border: 0px;' +
!   '   box-shadow: 4px 4px 16px 0px #000;' +
!   ' }' + 
!   '' +
!   ' .spiderwindow-content { ' +
!   '   background-color: #88f;' +
!   '   border-radius: 0 0 8px 8px;' +
!   ' }' +
!   '' +
!   ' .dijitButtonNode { ' +
!   '   box-shadow: 4px 4px 16px 0px #000 !important;' +
!   '   background: #8f8 !important;' +
!   ' }';

EndProcedure

Procedure fenetre(i)
  OpenWindow(i,i*100,i*50,200,200,"FenĂȘtre "+Str(i))
  TextGadget(-1,10,10,180,30,"Texte")    
  ButtonGadget(-1,10,40,180,30,"bouton",#PB_Button_Toggle) 
EndProcedure

SetNewStyle()

For i=0 To 2:fenetre(i):Next
For i=3 To 5:fenetre(i):Next
Greetings ... Peter

Re: modify the theme by code

Posted: Fri Dec 08, 2017 1:26 pm
by pf shadoko
Thank you very much Peter
you are indispensable on the spiderbasic forum
thanks to you, I will be able to customize the SB interface "easily".

PS:
for the class ". dijitButtonNode", properties are defined with the term "! important":
why?
how to know when to add this term ?