• 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

jauburn

Well-known member
#1
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
 

jauburn

Well-known member
#3
You will need to request styling help from the author of [bd] Widget Framework.
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
 

Tracy Perry

Well-known member
#4
Actually not.

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

View attachment 62747
.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:

Tracy Perry

Well-known member
#6
Thanks. I really don't them to be buttons, though. I just want to know how to make the text larger.
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;
}