Style all buttons

bgreen1217
bgreen1217 Community Member Posts: 16
Apologies if this has been asked before (I'd be surprised if it hasn't) but a quick search didn't provide the answer I'm looking for.

If I change the styling of a button, how do I then commit that change across all the buttons in my project?

Lets for example say I want to change the colour of the down state.. obviously for the sake of continuity I want all my buttons to have the same coloured down state. Surely I don't have to change each individual button manually?

Thanks all :)

Comments

  • klaatu
    klaatu Community Member Posts: 988
    Unfortunately, Lectora does not use CSS to style buttons and four images are created for each even if they are exactly the same. 

    Some attributes can be changed when multiple buttons are selected, however, states is not one of them. I suggest you create one button exactly how you want them all to look then use "Save as default" in the style menu so that subsequent inserted buttons will hold that style.
  • bgreen1217
    bgreen1217 Community Member Posts: 16
    Holy 1995 Batman! That's some serious dark ages stuff right there.

    Considering Lectora spits out web code (html, css, js etc) yet doesn't leverage current fundamental web dev principles such as inheriting styles with the use of classes, really puts the product in perspective.

    With regards to "button templates", given you can 'Save as default' and 'Reset Default', does it not make sense to also have 'Assign Default' so at the very least you can apply your "saved as default" button template at any point? It's not going to fix the bigger issue (1 gazillion image files created for buttons) but it would at least save a little time.

    I don't want to have a dig at Lectora simply to vent frustration, nor do I want to invoke a defensive response. But I think it's a genuine concern that we're building courses for the modern web using an application that is fundamentally inefficient and doesn't adhere to modern web development practices.  The Trivantis website is built with classes and media queries, so why is Lectora generating a gazillion absolutely positioned id's and images for buttons?

    At a guess I'd say it's because as new features have been added to the software, they've been built to work with it's existing (now outdated) core functions. These complex relationships have created an overwhelming dependency which makes it incredibly difficult (if not impossible) to change the core functions of the software.

    I understand the decision to create Lectora Online from a financial perspective, but I can't help but wonder what Lectora Desktop could've been if the funds were invested in developing (or re-developing) the pre-existing application so it generated files based on current web development principles.. and ideally, was future proofed to evolve with web coding developments as the internet moves forward.

    *end rant*

    ... now to spend the rest of my day changing each individual buttons 'over' state background colour. I might time it and see how long 600 buttons take to change in Lectora.. one thing's for certain, it'd be a lot easier doing this...

    .my-button:hover, .my-button:focus { background-color:#73C9E6; }

     

     
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    If you are talking about 600 buttons, it'd be easier to just open the .awt file in Notepad++, Sublime or any other text editor and do a mass replace. The button info is stored there in plain text, just change it to whatever you need. The XML for text buttons is pretty self-explanatory:
    <textbutton id="39" ontop="true" parent="2" proportional="false">
              <name>Button</name>
              <lastupdated>1474340829</lastupdated>
              <possize>
                <point>
                  <x>295</x>
                  <y>231</y>
                </point>
                <size>
                  <cx>120</cx>
                  <cy>40</cy>
                </size>
              </possize>
              <cssclasses/>
              <opacity>100</opacity>
              <autosize>0</autosize>
              <type>20100</type>
              <linestyle>0</linestyle>
              <strokewidth>1</strokewidth>
              <strokecolor>0963B1</strokecolor>
              <text>Click Here</text>
              <textcolor>FFFFFF</textcolor>
              <fontsize>16</fontsize>
              <fontstyle>0</fontstyle>
              <textalignment>1</textalignment>
              <fontfamily>Lucida Sans Unicode</fontfamily>
              <handledata>
                <controlpoint value="50"/>
              </handledata>
              <shapefillinfo bevelheight="0" color="009E0F" fillstyle="0" gradientangle="270"/>
              <action id="44" on="mouseclick" parent="39">
                <name>OnMClkNone</name>
                <lastupdated>0</lastupdated>
                <actionitem actiontaken="none">
                  <browserWnd/>
                </actionitem>
              </action>
              <type>20100</type>
              <overstate ontop="false" proportional="true">
                <name/>
                <lastupdated>0</lastupdated>
                <possize>
                  <point>
                    <x>0</x>
                    <y>0</y>
                  </point>
                  <size>
                    <cx>-1</cx>
                    <cy>-1</cy>
                  </size>
                </possize>
                <cssclasses/>
                <opacity>100</opacity>
                <autosize>0</autosize>
                <type>0</type>
                <linestyle>0</linestyle>
                <strokewidth>1</strokewidth>
                <strokecolor>0963B1</strokecolor>
                <text/>
                <textcolor>FFFFFF</textcolor>
                <fontsize>16</fontsize>
                <fontstyle>0</fontstyle>
                <textalignment>1</textalignment>
                <fontfamily>Lucida Sans Unicode</fontfamily>
                <handledata/>
                <shapefillinfo bevelheight="0" color="CF2A27" fillstyle="0" gradientangle="270"/>
              </overstate>
              <downstate ontop="false" proportional="true">
                <name/>
                <lastupdated>0</lastupdated>
                <possize>
                  <point>
                    <x>0</x>
                    <y>0</y>
                  </point>
                  <size>
                    <cx>-1</cx>
                    <cy>-1</cy>
                  </size>
                </possize>
                <cssclasses/>
                <opacity>100</opacity>
                <autosize>0</autosize>
                <type>0</type>
                <linestyle>0</linestyle>
                <strokewidth>2</strokewidth>
                <strokecolor>0963B1</strokecolor>
                <text/>
                <textcolor>FFFFFF</textcolor>
                <fontsize>16</fontsize>
                <fontstyle>0</fontstyle>
                <textalignment>1</textalignment>
                <fontfamily>Lucida Sans Unicode</fontfamily>
                <handledata/>
                <shapefillinfo bevelheight="0" color="00FFFF" fillstyle="0" gradientangle="270"/>
              </downstate>
              <disabledstate ontop="false" proportional="true">
                <name/>
                <lastupdated>0</lastupdated>
                <possize>
                  <point>
                    <x>0</x>
                    <y>0</y>
                  </point>
                  <size>
                    <cx>-1</cx>
                    <cy>-1</cy>
                  </size>
                </possize>
                <cssclasses/>
                <opacity>60</opacity>
                <autosize>0</autosize>
                <type>0</type>
                <linestyle>0</linestyle>
                <strokewidth>1</strokewidth>
                <strokecolor>0963B1</strokecolor>
                <text/>
                <textcolor>FFFFFF</textcolor>
                <fontsize>16</fontsize>
                <fontstyle>0</fontstyle>
                <textalignment>1</textalignment>
                <fontfamily>Lucida Sans Unicode</fontfamily>
                <handledata/>
                <shapefillinfo bevelheight="0" color="FF00FF" fillstyle="0" gradientangle="270"/>
              </disabledstate>
            </textbutton>
  • klaatu
    klaatu Community Member Posts: 988
    Benjamin, I totally concur. I would prefer Lectora publish to straight  standard HTML5 following modern best practices. I also get how Trivantis has to cater to non web designer/programmers. I think they do a pretty good job of striking a balance but things like the weight of unnecessary images and usage of inline styling can be very frustrating (and limiting - I don't like being limited). Hopefully future versions will modernize.

    Regarding the default button style template. If you have already created a certain style for a button you can select it and save it as the new default.

     
  • bgreen1217
    bgreen1217 Community Member Posts: 16
    Sergey.... you've liberated me man! I had no idea I could edit the .awt files in a text editor, I thought they'd be obfuscated, I'm glad I thought wrong. Thanks a million. Really, that'll save me so much time in future.

    Darrel I also believe Trivantis strikes a good balance in catering for technie/non techie users, better than any other application in this space in my opinion (it's a big part of the reason I chose Lectora in the first place) but I don't think that sentiment bears much relevance to the issue of Lectoras approach in generating and laying out content. That is to say, it's completely feasible for an application to be accessible to non techies and code adept users, while generating quality code that adheres to modern web standards. Companies are doing it in the web development space, there's no reason why eLearning should be so far behind.

    Thanks both, I appreciate your assistance.

    BG

     
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    Glad I could help, BG! Welcome to the wonderful world of direct mass-editing in AWT. The only thing you cannot properly do is actually replace texts because they are in RTF format (non-human readable).

    Make sure you back up the AWT file before you edit it.
  • bgreen1217
    bgreen1217 Community Member Posts: 16
    Thanks Sergey, It's like I've been given a completely new interface to interact with my course content, the Lectora 'WYSIWYG' approach and the Sublime Text 'Tweakers paradise' approach. Side by side it's a pretty good setup to work around some of the limitations of the software itself.

    Make sure you back up the AWT file before you edit it. <--- Always a valid comment ;)