anyone with more internet experience than me

[don]

got an idea how to get the topic icons to display real big next to post titles when you're on the forum index? basically want to replace the dumb word balloons next to threads with anime girls

[peng]

so right click > inspect (red highlight) is a feature on most modern browsers, and this is what i use to fuck around with styling on webpages

from a casual glance im guessing something is injecting the orange highlight custom like based off of settings you have control of

the <dt> level though is the wrong place to put it. if you can move it just 2 lines higher (well, 1 in real life, the ::before is something chrome is injecting) to the <dl> tag, the cuties will replace the bubbles entirely

if this isn't possible let me know and i can draft up a strategy where its based on the <dt> tag, but when you move the style to the <dl> tag the cutie replaces the chat bubble entirely so i would encourage trying it

problem is from here the chat bubbles are only like 40x40, so if you replace it with a cutie everything is just too small and squishy
here is a quick series of changes to make to the CSS file that drives a forum to increase the size of the bubble/cutie:

forum/styles/simplicity_gray/theme/stylesheet.css?assets_version=3

line 2087ish, make the min-height go up: (this value increases the vertical size of the posting row)
dl.row-item dt, dl.row-item dd {
min-height: 100px;
}

line 2065ish, make the padding-left go up: (this value moves the subject text over so the cuties will not have text over them)
dl.row-item dt .list-inner {
padding-left: 91px;
position: relative;
padding-top: 5px;
padding-bottom: 5px;
}

line 2053ish, make background-size go up: (this value increases the size of the cutie)
dl.row-item {
background-position: 10px 50%;
background-repeat: no-repeat;
background-size: 70px;
}

the end result would look something like this:


now you can make them even bigger by adjusting the values above, but then the text looks really weird and small by comparison
so if you want to do more the right side of the inspect screen will have an interactive style editor section that will look like this (on most browsers)

and it will let you type in new values for the CSS settings. so here ive got the cutie/chat bubble size highlighted. so if 70px isnt big enough, you can increase it to 80px, 90px by typing and see how that looks, and then also hunt down other values in related fields.

[don]

much thanks, I should be able to edit the stylesheets pretty easy. I'll give it a shot tomorrow

[peng]

Here's another attempt i did where i used a browser plugin to load a custom css ontop of what the page loads

preserves the bubbles since they convey some information worth hanging onto

li.row dl.row-item {
height: 115px;
}

li.row dl.row-item dt {
background-size: auto 100px !important;
height: 110px;
background-position: 10px 50%;
}

dl.row-item dt .list-inner
{
padding-left: 100px;
}

dl a.row-item-link
{
left: 91px;
}

dl.row-item {
background-position: 100px 50%;
}