XF 1.5 font size of description line under search results/posts?

[TUG]

hi, brand new xen customer here, just completed the upgrade of our vbulletin 3.8 forums and i have to say, the ability to customize just about everything in xen is pretty incredible coming from such an old version of vbulletin.

Im amazed that i can pretty much type in what im looking for into google or search here and immediately find the location to make the change...its outstanding.

one sticking point im having (and im sure it wont be the last)...is how to adjust the font size of the line BELOW the thread title on "new posts".

most of my members are older (its a forum about timeshares) and even for me its hard to read the text under the thread title that shows the forum the thread is posted in (very important for our members).

Despite all of my search attempts i simply cant find the area to adjust this font size to make it a bit larger and more legible, hopefully someone here can point me in the right direction, thanks!

 

[TUG]

attached a screenshot so it was more clear as to what i was asking

 

[Paul B]

This guide should help with identifying individual elements for styling purposes: https://xenforo.com/community/resources/how-to.4390/

 

[TUG]

ok, using that link above it appears ive narrowed the section down to the following

style property group > discussion list > second row text
style property group > discussion list > item page nav item
style property group > discussion list > item page nav link

however any changes i make to these fields do not seem to get applied to the forum, not font size changes, not font type changes, not even color changes?

 

[TUG]

bump, ive still yet to find any field to adjust that changes the color or size of the field under the thread title.

 

[TPerry]

In CSS, for the entire line you should be able to use (in EXTRA.css)

.discussionListItem .secondRow {
font-size:10px;
}

where the font size is whatever you want. This will do the entire row. You can break that down further by examining the CSS via Chrome developer tools (or your browser equivalent).

I personally rarely use the style properties settings and try to do most of my customizations in EXTRA.css - that way it's a simple matter of keeping a backup of all my changes on my local computer. I just am sure to document each area of the code in EXTRA.css (using the CSS comment parameters) so I know what it does.

 

[TUG]

ah ha...so this is not something set within a style template?

that explains why I couldnt find it =)

thank you!

 

[TUG]

hmm, making that change to extra.css had no impact on that line on the forum... :/

 

[Steve F]

Either add !important to it like so:

.discussionListItem .secondRow {
font-size:12px !important;
}

Or be more specific with the CSS so it overwrites the default values.

.discussionList .discussionListItem .secondRow {
        font-size: 12px;
}

The latter is easier to overwrite if you ever needed to, !important can lead to undesired results if you do a lot of CSS in your style.

 

[TPerry]

Yeah, I didn't experiment with it in EXTRA.css as I've been busy working on some styling updates to my IPS site (it's harder to style for than XenForo).
The more specific you can get in your CSS designators, the better. That's one of the reasons I recommended looking at page using Chrome Developer Tools (if you use Chrome) or your browser equivalent.
As Steve said, try not to use !important if you can keep from it. My current EXTRA.css is around 500 lines.
In comparison, my IPS equivalent is about 900 lines.

 

[TUG]

no dice even after adding the !important tag.

ill try it in the discussionlist template

 

[TUG]

ok, im not sure how i managed to do this, but i now have an extra.css and an EXTRA.css file.

how does it allow 2 of them with the same name, and it appears i can only delete the lowercase one?

 

[TPerry]

Are you by chance using CloudFlare? If so, it's probably the cache there.
Same way, browser cache for your local computer may be effecting it.

 

[TPerry]

ok im clearly just retarded, it appears that nothing in the extra.css is being applied to the forum now...what could have happened here?

Be sure you are working on the correct style EXTRA.css.

 

[TUG]

yea, this is all new to me...im not sure how i managed to get two of these.

 

[TUG]

and now back to the original problem, adding that line to BOTH of these (now they are identical till i figure out why i have two)...still no change to that subtitle.

 

[Steve F]

ok, im not sure how i managed to do this, but i now have an extra.css and an EXTRA.css file.

how does it allow 2 of them with the same name, and it appears i can only delete the lowercase one?

The default file should be EXTRA.css - just in case make a copy of it in a text editor (notepad or something like notepad++) then delete the 'extra.css' one. Not sure how you've done the duplication though.

Templates are case sensitive it seems (never actually tried it before) so it is possible to have 2 though the 'extra.css' won't do anything as it isn't called that way.

I just tested this code and it works. If you want some help feel free to PM me login info or simply make sure you are editing the correct style as Tracy said above.

.discussionList .discussionListItem .secondRow {
        font-size: 12px;
}

 

[TUG]

this is exactly what im typing into extra.css

.discussionList .discussionListItem .secondRow {
font-size: 14px;
}

im guessing that perhaps one of the other lines in the extra.css file is overwriting or taking precedence?

heres the entire "sticky thread enhancement section" that contains all the other .discussionlist instructions

.discussionList .sticky {
background-color: #f7caca !important;
border: 1px solid #d88585 !important;
}

.discussionList .sticky .posterAvatar, .discussionList .sticky .stats {
background-color: #f7caca !important;
}

.discussionListItem .iconKey .sticky{
border: 0px solid #d88585 !important;
}

.discussionList .sticky .avatar img,
.discussionList .sticky .avatar .img, .avatarCropper {
border: 1px solid #d88585 !important;
}

.discussionList .sticky .title a, .discussionList .sticky .DateTime, .discussionList .sticky .EditControl {
color: #8F080A !important;
text-shadow: 0 0 0 transparent, 1px 1px 0 #fbe8e8;
}

.discussionList .sticky .username, .discussionList .sticky .pairsJustified dt {
color: #373737 !important;
text-shadow: 0 0 0 transparent, 1px 1px 0 #fbe8e8;
}
.discussionList .sticky .stats dl {
border-left: 1px solid #d48f8f !important;
border-right: 1px solid #d48f8f !important;
}

.discussionList .sticky .itemPageNav a {
background-color: #fee6e6 !important;
border-color: #dfa4a4 !important;
color: #c57c7c !important;

}
.discussionList .sticky .itemPageNav a:hover {
background-color: #fee6e6 !important;
border-color: #dfa4a4 !important;
color: #c57c7c !important;
opacity: 0.4;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
}
.discussionList .sticky .itemPageNav span {
color: #c28686 !important;
}
.discussionList .sticky .muted {
color: #373737 !important;
text-shadow: 0 0 0 transparent, 1px 1px 0 #FBE8E8;
}

 

[DGG]

To change the look of the search results, you can make styling changes directly to the "search_results.css" template.