The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Status Icon Alignment

View previous topic View next topic Go down

Solved Status Icon Alignment

Post by Espectra on February 13th 2015, 9:50 pm

Technical Details

Forum version : PunBB
Position : Founder
Concerned browser(s) : Mozilla Firefox, Internet Explorer
Screenshot of problem : http://i38.servimg.com/u/f38/19/13/94/76/topics10.png ; http://i38.servimg.com/u/f38/19/13/94/76/forums10.png
Who the problem concerns : All members
When the problem appeared : This has always been a problem, but changing the icons made it more prominent.
Forum link : http://rivals-of-trust.forumotion.com ; http://www.rivalsoftrust.com/#!apply/ctzo


Description of problem

Topic and Forum status icons are misaligned. None of the potential solutions I've seen in other topics have given a satisfactory result. The alignment and open space for icons is different on the Forum list vs. the Topic list, making global margin adjustments inadequate. Adjusting the cell width/height in the AP only adjusts the Forum Status icon, and only on the right side, meaning I can't use this to correct a global margin adjustment. Resizing the icons fixes the overlap but can't fix the alignment issue without the icons being too small to distinguish easily.

Additionally, I'd like to align the second line of title text with the first on long topic titles, if possible.


Last edited by Espectra on February 14th 2015, 6:47 am; edited 1 time in total

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by _Twisted_Mods_ on February 14th 2015, 2:02 am

this should work for icons .. but as for the taxt i am unable to see it as a guest

acp>display>colors>css
add code below and save

Code:
.status{margin-left:-50px!important;}

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by Espectra on February 14th 2015, 2:29 am

Thank you, Twisted. That did indeed place my icons where they need to be.

Do you need a guest admin account? I have one created, if you need it.

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by _Twisted_Mods_ on February 14th 2015, 2:32 am

sure if you could pm me the info

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by Espectra on February 14th 2015, 2:34 am

Done. Let me know if I can do anything else to assist.

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by _Twisted_Mods_ on February 14th 2015, 3:07 am

ok so because of the images ..the lil yellow ball thats before the title ..the text will not align correct when it wraps around because it to big

so you can hide the overflow if you wish .. other then that i have no idea what to do

Code:

.topictitle {
    text-align: left !important;
    white-space: pre;
}


_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by Espectra on February 14th 2015, 3:12 am

Woops! Nope, that didn't work. That actually moved the title down to the next line instead. With the icons properly in place, now, it isn't such a major issue...

But now that the icons are in place, I noticed another problem. The Forum Title is not centered with its icon vertically, and I'm positive that the reason is because there is no description, which would normally be on the second line. I would rather not put a description in. Is there a way that I can properly center that title on the Y axis?

Thanks again for your help, Twisted. You're a blessing.

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by _Twisted_Mods_ on February 14th 2015, 3:54 am

well this is about best i could come up with

add this to your css
Code:

.pun table td.tcl{height:unset!important;}
.pun table td.tcl .topic-title{ white-space: nowrap;display:block}
.pun table .tdtopics a[href*="/u"]{margin}
.status{margin-top:5px}
.pun table .tdtopics img[src*="/partic10.png"]{position: absolute;margin-left: -5px;margin-top:35px;}

also you will have to go in your
acp>templates>general>topics_list_box
click Edit

find
Code:

{topics_list_box.row.PARTICIPATE_POST_IMG} 
{topics_list_box.row.TOPIC_TYPE} 
and remove the

Code:
 

save

when page refreshes click publish Add

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by Espectra on February 14th 2015, 4:03 am

Okay, I found the Participate post image reference, but I can't find one called TOPIC_TYPE. I'll post to you what I have in that section... maybe you can see something I'm missing.

Code:
<!-- BEGIN single_selection -->
            <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />&nbsp;
            <!-- END single_selection -->
            {topics_list_box.row.ICON}&nbsp;
            {topics_list_box.row.NEWEST_POST_IMG}
            {topics_list_box.row.PARTICIPATE_POST_IMG}
            <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>&nbsp;
            {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}&nbsp;
            {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
            <!-- BEGIN switch_description -->
            <br />
            &nbsp;{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            <!-- END switch_description -->

Is there something else I'm supposed to be finding here? Sorry for my ignorance.

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by _Twisted_Mods_ on February 14th 2015, 4:09 am

no idk y its not there but just do what i stated above to the one you could find

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by Espectra on February 14th 2015, 4:28 am

Okay, I completed both of those, but the results are a bit unexpected.

http://i38.servimg.com/u/f38/19/13/94/76/topics11.png
http://i38.servimg.com/u/f38/19/13/94/76/forum15.png

As you can see from these images, the Topic Titles are... a bit of a mess. I like the concept of forcing the "by <Name>" to the second line, and I like having the Participate icon there with it... but this solution throws the whole thing off-center, and the Participate icon is a bit too high. I'm sure this is just a matter of adjusting some of the margin numbers, but... I don't know which ones are which.

Additionally, this had no effect at all on the Forum Title, which is the one that was off-center to start with.

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by _Twisted_Mods_ on February 14th 2015, 5:24 am

ok i think i got it pretty much good now ..remove the
remove

Code:
&nbsp;


from in same template as before and should be all
Code:
{topics_list_box.row.ICON}&nbsp;

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by Espectra on February 14th 2015, 5:29 am

EDIT:

Well, I thought it fixed my Forum Title, but somehow my CSS stylesheet... did something weird and adjusted my coding after I changed my template. So I fixed the coding and... well, my Forum Title is still off-center, and my topic titles look like this:



I'm just having no luck with code tonight.

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by _Twisted_Mods_ on February 14th 2015, 5:54 am

lol i switch the css .. look at it now and tell me what u want different

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by Espectra on February 14th 2015, 5:58 am

Oooh. That was you. Well, that would explain why the code was different. >.> My apologies for undoing what you did, and thank you for redoing it.

So... having the two icons overlap is not all that unpleasant, actually. I don't mind it. But if they're going to overlap, I'd like their borders to line up. I know... I'm picky. Is there a way to get the Participate Icon just slightly north so that its edge lines up with the blue border of the status icon?

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by _Twisted_Mods_ on February 14th 2015, 6:06 am

ok look now see it thats what you wanting

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by Espectra on February 14th 2015, 6:29 am

Ah, nope. But it's good to know that the position can be adjusted.

I was actually looking for the two icons to be more closely overlapping... with the Participate icon's lower, right border lining up with the Status icon's lower right border. Let me see if I can give you a picture example...



Obviously I just cut and moved in Paint, but that gives you a rough idea of where I want it... only with the borders of both icons lining up.

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by _Twisted_Mods_ on February 14th 2015, 6:35 am

ok that should be how u wanted it.. and yes you can move it anywhere inside that box that its contained in

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by Espectra on February 14th 2015, 6:45 am

That's amazing. Thank you sooooooo much, Twisted. I owe you more than one.

For the sake of anyone else having this particular issue, I'm providing the finalized code below:

Code:
.status {
    margin-top: -12px;
   margin-left:-50px!important;
}
.pun table td.tcl{height:unset!important;position: relative !important;}
.pun table .tdtopics img[src*="/partic10.png"] {
    position: absolute;
 margin-left: -25px;
margin-top: 13px;
}

It won't be the same for everyone else, as everyone else will have to make some adjustments to the numbers. Other forum designers will want to note that this has to be used in conjunction with a template change that removes the buffer between the two icons and the topic title in order for the effect to display properly.

Thank you again, Twisted. You've been so much help, and you're absolutely incredible.

Espectra
Forumember

Female Posts : 48
Reputation : 1
Language : English

http://rivals-of-trust.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by _Twisted_Mods_ on February 14th 2015, 6:50 am

your welcome ..glad i could help

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Status Icon Alignment

Post by _Twisted_Mods_ on February 14th 2015, 6:51 am

Topic solved and archived

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum