Announcement

Collapse
No announcement yet.

How to change font size of articles (vB Cloud)

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

  • How to change font size of articles (vB Cloud)

    Looking for something like is the code below to work on vB Cloud using the CSS editor.


    HTML Code:
    .cms_article_txt_content { font:{vb:stylevar content_msg_font}; color: {vb:stylevar body_color}; margin-bottom: {vb:math {vb:stylevar padding}-5}px; }

    https://forum.vbulletin.com/forum/vb...ze-of-articles

    Thank you for your help!
    www.legaljunkies.com

  • #2
    That code is taking values from the Style Variables defined in the AdminCP to set the look of article content. You can edit these style variables in the AdminCP under Styles -> Style Manager. Then for your site's Style select "Style Variable Editor" from the dropdown menu.

    You want to edit the content_msg_font, body_color, and padding style variables. If you enter their names into the search box, they will show in the list below. Click on the the style variable name to edit it.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API - Full / Mobile
    Vote for your favorite feature requests and the bugs you want to see fixed.

    Comment


    • #3
      Thank you for your reply!

      I couldnt find the "msg_font, body_color, and padding" style variables in our Style Variable Editor.

      When I search for "msg" there are no results being displayed.

      We are using default styles.
      www.legaljunkies.com

      Comment


      • #4
        Just going by the code that you posted above. Where did you get it? It may be obsolete if it is more than a couple years old.

        What is the specific text that you're trying to change? A screenshot with highlighted text would help. Or a URL with a description of the text you want to change.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API - Full / Mobile
        Vote for your favorite feature requests and the bugs you want to see fixed.

        Comment


        • #5
          I saw the code here:

          https://forum.vbulletin.com/forum/vb...ze-of-articles


          I would like to increase the default text size on the article pages, please see the screenshot.


          Attached Files
          Last edited by bestmilan; Tue 30 Jun '20, 10:53am.
          www.legaljunkies.com

          Comment


          • #6
            That code is ten years old. I doubt it is the same.

            Comment


            • #7
              You're linking to code from vBulletin 4. It is absolutely ancient and archaic. vBulletin 4 code will not work in vBulletin 5.

              To change your content font-size globally, adjust the post_content_font style variable.

              To change the font on a single article, edit the article and adjust the font size using the rich-text editor menubar.
              Translations provided by Google.

              Wayne Luke
              The Rabid Badger - a vBulletin Cloud demonstration site.
              vBulletin 5 API - Full / Mobile
              Vote for your favorite feature requests and the bugs you want to see fixed.

              Comment


              • #8
                Thank you both for the reply.

                What I have meant was that I am looking for some solution like that code to change font size.

                I adjusted the post_content_font style variable already a few days ago. It did adjust the font size globally in all forum posts but not on forum article pages. What is strange is that when I click "Edit" on the article page I can see that the page font size was adjusted within the editor box but when I click the Save button the font size is changed back to a default size. Basically what ever value I pick in the editor for the font size is lost or overwritten by a default after hitting the save button.

                ??
                www.legaljunkies.com

                Comment


                • #9
                  Will have to look at your site specifically because the value entered into the editor has specificity over what is in any CSS. So if you're selecting a size and it is being overwritten, there isn't a code you can use because it will be overwritten.

                  That said, You can't use style variables in the css_additional.css template. They will not be parsed and will cause the CSS to create errors.
                  Translations provided by Google.

                  Wayne Luke
                  The Rabid Badger - a vBulletin Cloud demonstration site.
                  vBulletin 5 API - Full / Mobile
                  Vote for your favorite feature requests and the bugs you want to see fixed.

                  Comment


                  • #10
                    Size cannot be changed in topics on your site because you have disabled this BBCode under Settings -> Options -> BBCode Settings.

                    You can use CSS like this to force a specific minimum font on the article:
                    Code:
                    .article-list .post-content {font-size: 20px;}
                    You can edit the CSS for your cloud site by clicking on Style in the Site Builder menu and then choosing the CSS Editor tab.
                    Translations provided by Google.

                    Wayne Luke
                    The Rabid Badger - a vBulletin Cloud demonstration site.
                    vBulletin 5 API - Full / Mobile
                    Vote for your favorite feature requests and the bugs you want to see fixed.

                    Comment


                    • Wayne Luke
                      Wayne Luke commented
                      Editing a comment
                      rem is generally better because it can scale across devices and screens better. Plus it is more accessible and works with browser zooming better. Though I am not sure how much of a problem that is now that Internet Explorer is a dead browser.

                      When looking at this site, it appears they have converted a lot of the font sizes to pixels (px) so trying to be consistent.

                    • In Omnibus
                      In Omnibus commented
                      Editing a comment
                      The base font size is 62.5% which equals 10px or 1.0rem ... it's all the same. The only real issue, in my experience, comes when trying to display certain fonts at irregular sizes. Having said that it is best to maintain unit consistency because different web browsers use different CSS reset values.

                    • Wayne Luke
                      Wayne Luke commented
                      Editing a comment
                      The base font size is 62.5% which equals 10px or 1.0rem ..
                      This simply makes the math between pixels and rem easier for humans and because we set it that way by default. Customers can actually change this by editing the root_font_size style variable. Most browsers actually default to a 16 pixel font size for variable width fonts and at 13 pixel font size for fixed width fonts. Users can change these values in the browser settings or by using the Zoom functionality built into the browser. For instance, my eyesight isn't what it used to be so I always set vBulletin sites to 125%. Some use extremely small fonts so they need to be set to 150% or even 175%.

                      1 REM would be the amount of space the M character would take in the specific font that you're using at the time. It is quite variable and not going to be equal to 10 pixels unless you specify that in your code. REM difffers from EM in that it is relative to the root element of the document (hence the R) and not the parent element.

                      Ideally, people would simply change the root_font_size and that would change fonts across the entire site.

                  • #11
                    Thank you Wayne!

                    I really appreciate your insights and assistance. I completely forgot about the BB Code Settings.

                    The CSS code you mentioned in your post works perfectly



                    www.legaljunkies.com

                    Comment

                    Related Topics

                    Collapse

                    Working...
                    X