1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Increase font size in two areas

Discussion in 'Styling and Customization Questions' started by jauburn, Dec 9, 2013.

  1. jauburn

    jauburn Well-Known Member

    How can I increase the font size in the following two columns? The first column is the Latest column on forumhome. The second is from the Posts or Recent Posts widget of the [bd] Widget Framework.

    Thanks!

    font-size.jpg
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    You will need to request styling help from the author of [bd] Widget Framework.
     
  3. jauburn

    jauburn Well-Known Member

    Actually not.

    Text size in those two columns is controlled by

    Style Properties -> Forum / Node List -> Node Last Post and
    Style Properties -> Sidebar, text size

    I'm having trouble finding the style property that controls the following text, however, under each message:

    reply.jpg
     
  4. Tracy Perry

    Tracy Perry Well-Known Member

    .message .ReplyQuote, .hashPermalink, .report, .ip, .delete, .edit, .like, .deleteSpam, .warn, .messageSimple .postComment, .messageSimple .like

    Sample code I have to make them look like buttons (it can probably be cleaned up - @Shelley did a fantastic job on hers) but these give a hover effect on them on my site.

    Code:
    /* Make buttons for posts/edits */
    .message .ReplyQuote, .hashPermalink, .report, .history, .ip, .delete, .edit, .like, .deleteSpam, .warn, .messageSimple .postComment, .messageSimple .like  {
    
        -moz-box-shadow:inset 0px 1px 0px 0px #fcf8f2;
        -webkit-box-shadow:inset 0px 1px 0px 0px #fcf8f2;
        box-shadow:inset 0px 1px 0px 0px #fcf8f2;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #754d09), color-stop(1, #ab8241) );
        background:-moz-linear-gradient( center top, #754d09 5%, #ab8241 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#754d09', endColorstr='#ab8241');
        background-color:#754d09;
        border-radius:6px !important;
        border:1px solid #dba64b;
        display:inline-block;
        color:#ffffff;
        padding:6px 24px;
        text-decoration:none !important;
        text-shadow:1px 1px 0px #cc9f52;
    
        font-family: Monda;
        font-size: 10px;
        margin-top: 3px;
        padding: 3px 7px;
        text-align: center;
    }
    .message  .muted a:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ab8241), color-stop(1, #754d09) );
        background:-moz-linear-gradient( center top, #ab8241 5%, #754d09 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ab8241', endColorstr='#754d09');
        background-color:#ab8241;
            text-decoration:none !important;
    }
    
    
    .memberList .ip a, {
    color: white;
    }
    .message .publicControls a, .privateControls a {
    color: white !important;
    }
    
    .message .publicControls a:hover, .privateControls a:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eac380), color-stop(1, #754d09) );
        background:-moz-linear-gradient( center top, #eac380 5%, #754d09 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eac380', endColorstr='#754d09');
        background-color:#eac380;
    }
    
    
    .message .unlike, .messageSimple .LikeLink .item .control .unlike{
        background: url("styles/default/xenforo/gradients/gloss.png") repeat-x scroll center bottom #D14836;
        border: 1px solid #FFFFFF;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 0 1px #B2B2B2;
        color: white;
        display: block;
        font-size: 11px;
        margin-top: 0px;
        padding: 3px 7px;
        text-align: center;
        text-shadow: 1px 0 2px #4E6008;
    }
    
     
    Last edited: Dec 9, 2013
  5. jauburn

    jauburn Well-Known Member

    Thanks. I really don't them to be buttons, though. I just want to know how to make the text larger.
     
  6. Tracy Perry

    Tracy Perry Well-Known Member

    The same CSS tags that I use to make the buttons will allow you to adjust the font size. All you have to do is remove the button related stuff below them and use the CSS code for font-size.

    I draw your attention to the code segment below (taken directly from my post). I've modified it to what you can play with... the fonts will be enormous in the example below. Also, it should remove the underline when you hover over it.

    Code:
    /* Make buttons for posts/edits */
    .message .ReplyQuote, .hashPermalink, .report, .history, .ip, .delete, .edit, .like, .deleteSpam, .warn, .messageSimple .postComment, .messageSimple .like {
    font-size:200px;
    text-decoration: none;
    }
    
     
    jauburn likes this.

Share This Page