Announcement

Collapse
No announcement yet.

Color value in html-modulles for any style

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Color value in html-modulles for any style

    In SMS (v.5.5.0) I have а number of widgets (html-modules) with a certain color value for the text and background. But the are many styles in SMS and these colors don't approach to all the styles.
    How can I change the html code of my html-module once to make the color of text and background change according to any chosen style? I mean a unique variable.

    Here is an example of a html-module:

    HTML Code:
    <! - start sw-rss-feed code->
    <script type = "text/javascript">
    <!-
    rssfeed_url = new Array ();
    rssfeed_url [0] = "https://news.yandex.ru/science.rss";
    rssfeed_frame_width = "100 %";
    rssfeed_frame_height = "400";
    rssfeed_scroll = "on";
    rssfeed_scroll_step = "4";
    rssfeed_scroll_bar = "off";
    rssfeed_target = "_ blank";
    rssfeed_font_size = "13";
    rssfeed_font_face = "";
    rssfeed_border = "off";
    rssfeed_css_url = "";
    rssfeed_title = "off";
    rssfeed_title_name = "<center> of News of a science </center>";
    rssfeed_title_bgcolor = "transparent";
    rssfeed_title_color = "#505659";
    rssfeed_title_bgimage = "";
    rssfeed_footer = "on";
    rssfeed_footer_name = "";
    rssfeed_footer_bgcolor = "transparent";
    rssfeed_footer_color = "#333";
    rssfeed_footer_bgimage = "";
    rssfeed_item_title_length = "200";
    rssfeed_item_title_color = "#2e7ec8";
    rssfeed_item_bgcolor = "transparent";
    rssfeed_item_bgimage = "";
    rssfeed_item_border_bottom = "off";
    rssfeed_item_source_icon = "off";
    rssfeed_item_date = "off";
    rssfeed_item_description = "on";
    rssfeed_item_description_length = "250";
    rssfeed_item_description_color = "#505659";
    rssfeed_item_description_link_color = "#333";
    rssfeed_item_description_tag = "on";
    rssfeed_no_items = "0";
    rssfeed_cache = "xxxxxxxx";
    //->
    </script>
    <script type = "text/javascript" src = "//feed.surfing-waves.com/js/rss-feed.js"> </script>
    <! - end sw-rss-feed code->
    What do I need to write instead of a line rssfeed_item_description_color = "#505659"; ?
    How can I set the value of "body_text_color" variable in html-modul to look text legible.in any style?

    Or may be change othe lines too?...
    Last edited by Dmitrij; Mon 4th Feb '19, 11:53am.

  • #2
    You can change colors for individual styles in the AdminCP under Styles -> Style manager. Select "Style Variable Editor" from the drop down menu for the style you want to change.

    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    I am not currently available for vB Messenger Chats.

    Comment


    • #3
      To get the body_text_color stylevar value, just get the applied font color of the body tag since that's where the stylevar is used.

      Code:
      rssfeed_item_description_color = window.getComputedStyle(document.body).color;

      GIPHY for vB5 AutoLinker Social Icons in Postbit Audio Player Clear Cache Cron DragDrop Upload Topic AutoUpdate Force Read Stop Links in Posts ...and more!

      Comment


      • #4
        Originally posted by Wayne Luke View Post
        You can change colors for individual styles in the AdminCP under Styles -> Style manager. Select "Style Variable Editor" from the drop down menu for the style you want to change.
        I know that and I'm not talking about that.
        My question is how to set once the color value (color of text and background) in html module so that the color will be changed automatically acording to the chosen style.
        This mechanism is already implemented in pre-installed modules of vbulletin (using variables I think) and I want to use it in modules I create.
        My english is not good but I tried to make my thought clear.

        Comment


        • Glenn Vergara
          Glenn Vergara commented
          Editing a comment
          I think my suggested solution at post #3 is what you're looking for.

      • #5
        Originally posted by Glenn Vergara View Post
        To get the body_text_color stylevar value, just get the applied font color of the body tag since that's where the stylevar is used.

        Code:
        rssfeed_item_description_color = window.getComputedStyle(document.body).color;
        That`s it! Thank you! It works perfect for the text color of module.
        But how to do the same to the color of background and links in module?


        Аnd how to make the same in other scripts? for example:

        HTML Code:
        <html>
        <head>
             <STYLE type="text/css">
                .authorsContainer{
                    width: 100%;
                    font-family: verdana;
                }
        
        ....
        
                }
                .goodAuthorsContainer h2{
                    color: #417394;
                    font-size: large;
                    font-family: Arial, Helvetica, sans-serif;
                }
        "cokor: window.getComputedStyle(document.body).color;" doesn`t work
        Last edited by Dmitrij; Tue 5th Feb '19, 4:32am.

        Comment


        • #6

          window.getComputedStyle(document.body).color; is Javascript. It cannot be used in CSS. You would have to apply it in your Javascript code.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud customization and demonstration site.
          vBulletin 5 Documentation - Updated every Friday. Report issues here.
          vBulletin 5 API - Full / Mobile
          I am not currently available for vB Messenger Chats.

          Comment


          • Dmitrij
            Dmitrij commented
            Editing a comment
            OK. And what is the code for the color of background and links in module (in Javascript code)?
            And is there an alternative code not only for Javascript?

        • #7
          Wating for an answer

          Comment


          • #8
            This is outside the scope of support. Someone like Glenn Vergara may know the answer, especially since he already answered the other part.
            MARK.B | vBULLETIN SUPPORT

            TalkNewsUK - My vBulletin 5.5.2 Demo
            AdminAmmo - My Cloud Demo

            Comment


            • #9
              Originally posted by Wayne Luke View Post
              window.getComputedStyle(document.body).color; is Javascript. It cannot be used in CSS. You would have to apply it in your Javascript code.
              Found it by myself.
              In CSS it's:
              Code:
              background: {vb:stylevar content_background};
              color: {vb:stylevar body_link_color};

              Comment


              • #10
                Those values aren't directly available to your Static HTML.

                You should really use CSS to apply colors and styles. You would do this by adding your custom CSS into the css_additional.css template or reusing vBulletin's classes. However, your example in the first post is applying style via Javascript on the fly. That is what complicates things.
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                vBulletin 5 Documentation - Updated every Friday. Report issues here.
                vBulletin 5 API - Full / Mobile
                I am not currently available for vB Messenger Chats.

                Comment


                • #11
                  Originally posted by Wayne Luke View Post
                  Those values aren't directly available to your Static HTML.
                  I used it in static HTML-modul (with <STYLE type="text/css"> code in it) and it works fine! (I'm not about the example in first post)
                  Can you publish the list of all such color variables (not only content_background, body_link_color)?

                  However, your example in the first post is applying style via Javascript on the fly. That is what complicates things.
                  Yes, and I still don't have full solution for that example for the color of links, background...
                  But I'm interested in solution not only via Javascript. It can be php-modul also.

                  Comment


                  • #12
                    You can see a list of all style variables in your AdminCP under Styles -> Style Manager. Select "Style Variable Editor" from the drop down for your style.

                    Their documentation is inline. Click on one and it will tell you where it is used.

                    The solution you're looking for is:

                    You should really use CSS to apply colors and styles. You would do this by adding your custom CSS into the css_additional.css template or reusing vBulletin's classes.
                    Translations provided by Google.

                    Wayne Luke
                    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                    vBulletin 5 Documentation - Updated every Friday. Report issues here.
                    vBulletin 5 API - Full / Mobile
                    I am not currently available for vB Messenger Chats.

                    Comment


                    • #13
                      Originally posted by Wayne Luke View Post
                      You can see a list of all style variables in your AdminCP under Styles -> Style Manager. Select "Style Variable Editor" from the drop down for your style.

                      Their documentation is inline. Click on one and it will tell you where it is used.
                      The solution you're looking for is:
                      So what code do I have to write in css_additional.css template to achieve the desired result in my HTML-modul (from the example in first post)?



                      Comment


                      • #14
                        It would depend on your complete HTML. I don't know what your rendered custom HTML is. The first post contain no useful HTML. It contains Javascript. You do not apply CSS to Javascript. You apply it to the HTML.

                        If you do not know how to write Custom CSS, there are many tutorials on the web that teach this layout language.
                        Translations provided by Google.

                        Wayne Luke
                        The Rabid Badger - a vBulletin Cloud customization and demonstration site.
                        vBulletin 5 Documentation - Updated every Friday. Report issues here.
                        vBulletin 5 API - Full / Mobile
                        I am not currently available for vB Messenger Chats.

                        Comment


                        • #15
                          I have a module with <iframe>

                          HTML Code:
                          <iframe src="" height="700" name="rezenz" width="99%"
                          align="center"></iframe>
                          How can I set text color (from default vbulletin document style) for the document that opens in iframe window?
                          Maybe with JS?
                          Last edited by Dmitrij; Mon 4th Mar '19, 2:24am.

                          Comment

                          Related Topics

                          Collapse

                          Working...
                          X