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.

Thread description and PM title margin problem

View previous topic View next topic Go down

Solved Thread description and PM title margin problem

Post by OMMA on March 30th 2014, 4:40 am

Thedescription ofthreads and the titles to PMs are overlapped by the icon. How can I moved them a little to the right away from the icon?

Thread pic:

PM pic:

Site URL: http://omma.forumotion.com/






Last edited by OMMA on April 2nd 2014, 1:27 am; edited 1 time in total

OMMA
Forumember

Male Posts : 59
Reputation : 1
Language : English
Location : USA

http://omma.forumotion.com

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by Pizza Boi on March 30th 2014, 8:03 am

Hi Very Happy

I see no problem, actually:



The alignment is fine for me; however, are you using px values for the CSS in regards to the threads because a value differs for every member, depending on their screen resolution so there is no 'actual' equality when either using px or % values.

There is a plug-in for evening things out, though, I forgot what its called but I think it has 'monkey' in the name. It enables the uneven portion sorted out depending on what the forum should really look like.

I'm sorry to say that even if we do adjust it with px or %, the adjustment MIGHT only be just for a small portion of the group; however, maybe it only appears as well as a non-member, so if ever, please provide me a test account so I can check fully Smile .

By the way, I really like the page thumleft!

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by OMMA on March 31st 2014, 6:59 am

That's because the screen you posteddoesn't show my problem. Its only the titles. My problem is the description under the titles which I showed in the other pics.

Thanks for the compliment.

OMMA
Forumember

Male Posts : 59
Reputation : 1
Language : English
Location : USA

http://omma.forumotion.com

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by Pizza Boi on March 31st 2014, 9:59 am

Hi Very Happy

You are using punBB, right? Well, here, first off, access your ACP < Display < Templates < General < topic_list_box < Find this portion:

Code:
<h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>
            {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}
            {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
            <!-- BEGIN switch_description -->
            <br />
                          {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            <!-- END switch_description -->

Now add this before {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}:

Code:
<p class="description">
and </p> after it.

Now, save and publish it and go to your Display < Color < Stylesheet and post this code:

Code:
p.description {
position: relative;
left: 30px;
}

You can adjust 30px to any number you want or in percentage or em value. Oh, and don't forget to save it Smile .

Hope they work!

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by OMMA on April 2nd 2014, 1:40 am

Yes I'm using punBB. Thank you for your help. The code you gave me works. 26px put the description perfect. Unfortunately it pushed the titles to topics in other parts of the forum over too.



If there is no way around this then thats cool and I appreciate what you've done so far. This just leaves the similar problem with PMs which I also posted an image of in the original post.

Oh and if I may ask could this same type of fix work for the participate image (red dot) next to he topic icon?



I tried to do it myself so I wouldnt be asking too much but I did something wrong. Embarassed I used the same code but changed "description" to "participate img". I placed the <p > text < /P> part before and after the part that says PARTICIPATE IMG like you told me to do the description and it kinda worked. I was able to move the dot around but it moved the title and description over and below it so I deleted my edit and put it back. lol

OMMA
Forumember

Male Posts : 59
Reputation : 1
Language : English
Location : USA

http://omma.forumotion.com

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by Pizza Boi on April 2nd 2014, 10:16 am

Hi Very Happy

I have posted my answer in bold and red color.

@OMMA wrote:Yes I'm using punBB. Thank you for your help. The code you gave me works. 26px put the description perfect. Unfortunately it pushed the titles to topics in other parts of the forum over too.



If there is no way around this then thats cool and I appreciate what you've done so far. This just leaves the similar problem with PMs which I also posted an image of in the original post.

Because the position is relative, it will affect the entire area. If you wish, you can change relative to another type of position (Try experimenting on the following): static, absolute, inherit, fixed, and initial. Each position has its correspondents so you have to manually add other positioning functions such as top, bottom, left, or right. Or if that doesn't work, add ID's to the title, date, etc. (They all must be different) and manually style them in the CSS (I recommend using the console -F12 in keyboard- to prevent yourself from always editing the CSS and keep on submitting).

Oh and if I may ask could this same type of fix work for the participate image (red dot) next to he topic icon?

Yes, but you have to use the method I posted above as well.



I tried to do it myself so I wouldnt be asking too much but I did something wrong. Embarassed I used the same code but changed "description" to "participate img". I placed the <p > text < /P> part before and after the part that says PARTICIPATE IMG like you told me to do the description and it kinda worked. I was able to move the dot around but it moved the title and description over and below it so I deleted my edit and put it back. lol

It is actually my fault, I have forgotten that relative position affects the entire space as well, so declaration of independent ID's is a must OR if it already has a class/ID then you just have to adjust them yourself.

If you are unable to achieve this, let me see if I can work something out because I am trying to delete my test forum soon so I can make a new one, but I am also using that said forum to help another person here in Forumotion at the moment (Should be done soon, though and I'm a bit lazy using another email address... give me 1 to 3 days tops for this).

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by OMMA on April 4th 2014, 4:06 am

I actually already experimented with those other positions before you suggested to do that. lol The results are the same. It seems in some parts of the forum the descriptions are in the right place but in others like in the pic I posted in the original post its jammed next to the icon. When I move them over it also moves the descriptions in the other threads over so it fixes the descriptions that were jammed but moves those that weren't out of position.

As for the participate image (red dot) question, like I said I tried using the same method but failed. Embarassed I need to know the correct code.

Take your time man I understand. You are helping me and that's all that's important and once again thank you for that. Peace

OMMA
Forumember

Male Posts : 59
Reputation : 1
Language : English
Location : USA

http://omma.forumotion.com

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by Xan. on April 4th 2014, 9:54 am

Maybe try moving your icons over?

right now they're set at margin:-32px in your css. But I found if you make them -40 they move over enough to see your description without moving outside the forum bounds. This is the part I tweaked:

.pun table .tdtopics .status {
margin-left: -32px;
}

Or if you don't like working with negative numbers, try increasing the margin-right.

You might also want to try working with your description paragraph's margins and padding instead of trying to position them manually. That's always messy.

Xan.
New Member

Posts : 6
Reputation : 1
Language : English

http://hogwartslives.forumotion.com/

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by Pizza Boi on April 4th 2014, 12:22 pm

Hi Very Happy

@OMMA wrote:I actually already experimented with those other positions before you suggested to do that. lol The results are the same. It seems in some parts of the forum the descriptions are in the right place but in others like in the pic I posted in the original post its jammed next to the icon. When I move them over it also moves the descriptions in the other threads over so it fixes the descriptions that were jammed but moves those that weren't out of position.

As for the participate image (red dot) question, like I said I tried using the same method but failed. Embarassed I need to know the correct code.

Take your time man I understand. You are helping me and that's all that's important and once again thank you for that. Peace

Aight, give me a few days and I'll post all the solutions I can think of with these. I'll try declaring independent names with them.

@Xan. wrote:Maybe try moving your icons over?

right now they're set at margin:-32px in your css. But I found if you make them -40 they move over enough to see your description without moving outside the forum bounds. This is the part I tweaked:

.pun table .tdtopics .status {
margin-left: -32px;
}

Or if you don't like working with negative numbers, try increasing the margin-right.

You might also want to try working with your description paragraph's margins and padding instead of trying to position them manually. That's always messy.

Thing is, everything gets moved for my screen, they have to be individually done and I'll work on it.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by OMMA on April 11th 2014, 7:00 pm

Not rushing. Just checking on the progress.

OMMA
Forumember

Male Posts : 59
Reputation : 1
Language : English
Location : USA

http://omma.forumotion.com

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by Pizza Boi on April 11th 2014, 7:03 pm

Hi Very Happy

I just remembered this thread (Don't have the time for this atm). Please let others do it x_x, I'm fairly busy with a lot of things at the moment =x. I'm really sorry.

You can try declaring individual ID's if it does not work and then re-adjust your forum width.

Really sorry Sad .

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by OMMA on April 23rd 2014, 7:13 pm

I decided to deal with the offset of topic descriptions. Its not too bad looking but I still would like a solution to the offset of PM titless. Anyone?

Pic:

Site URL: http://omma.forumotion.com/

OMMA
Forumember

Male Posts : 59
Reputation : 1
Language : English
Location : USA

http://omma.forumotion.com

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by Pizza Boi on April 23rd 2014, 7:44 pm

Hi Very Happy

Hmm... in your templates Post & Private Messages < privmsgs_body < Find this portion:

Code:
<a href="{listrow.U_READ}" class="topictitle">{listrow.SUBJECT}</a> {listrow.L_BY} {listrow.FROM} - {listrow.DATE}

Replace it by:

Code:
<a href="{listrow.U_READ}" class="topictitle" id="titlemove">{listrow.SUBJECT}</a> {listrow.L_BY} {listrow.FROM} - {listrow.DATE}

And then add this in your CSS:

Code:
#titlemove {
 position: relative;
 left: 10px;
}

Either use left or right and change the px value. Sorry for not helping with the previous.

Edit: See if this works for the original problem you have:

Code:
h2.hierarchy .forumtitle {
position: relative;
left: 30px !important;
}

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by OMMA on April 25th 2014, 7:18 pm

Thanks for your time. Thefirst code worked but it only moved the title. The author and date stayed in place so the title now overlaps them.

The second code moved the titles. It was the description that I wanted moved.

OMMA
Forumember

Male Posts : 59
Reputation : 1
Language : English
Location : USA

http://omma.forumotion.com

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by Pizza Boi on April 25th 2014, 10:18 pm

Hi Very Happy

Did you disabled title descriptions? If so, really sorry TT that I gave wrong codes Sad .

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by OMMA on April 28th 2014, 4:52 pm

@Pizza Boi wrote:Hi Very Happy

Did you disabled title descriptions? If so, really sorry :TT:that I gave wrong codes Sad.

Regards,
Pizza Boi

No I did not disable title descriptions. Also, I deleted the code as soon as it didn't give me the desired results so its OK it was wrong. Taking the time to help me is appreciated so no big deal.Wink Still looking for the solution to my PM problem when you get time tho.

OMMA
Forumember

Male Posts : 59
Reputation : 1
Language : English
Location : USA

http://omma.forumotion.com

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by Ange Tuteur on April 28th 2014, 8:00 pm

Hello omma,

Try this for the placement on the icon in pm :
Display > colors > CSS stylesheet
Code:
.pun table .tcl.tdtopics .status {
  position:relative;
  margin-left:-30px;
  margin-right:20px;
}

Adjust the -30px to move the icon to the left, adjust the 20px to add spacing between the title and icons.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by OMMA on April 30th 2014, 3:54 am

@Ange Tuteur wrote:Hello omma,

Try this for the placement on the icon in pm :
Display > colors > CSS stylesheet
Code:
.pun table .tcl.tdtopics .status {
  position:relative;
  margin-left:-30px;
  margin-right:20px;
}

Adjust the -30px to move the icon to the left, adjust the 20px to add spacing between the title and icons.

This worked thanks a lot. :wouhou: Not 100% perfect but good enough to satisfy me. What I mean is the code moved the pm titles over but it also moved thread titles over too far. I had to adjust the margin-right down to 6px to make the thread titles' position desirable but by doing thisit kinda jams the pm titles back against the icon again. Not all the way tho as there is stilla tiny space sothe icons don't overlap the title which is what matters. If there is a code that can move the pm titles by themselves without bothering the thread titlesthat would be awesomebut if not I'm OK with the current results. Thanks a lot for your time guys. Solved

OMMA
Forumember

Male Posts : 59
Reputation : 1
Language : English
Location : USA

http://omma.forumotion.com

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by Pizza Boi on April 30th 2014, 10:30 am

Hi Very Happy

I experimented in my forum and this should do it:

Code:
tbody tr td a.topictitle {
position: relative;
left: 30px;
}

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by OMMA on May 2nd 2014, 1:22 am

Unfortunately that didn't work. It not only moves both the pm titles and thread titles, it also only moves the title. The author and date stay put sothe titleoverlaps them. Thank you for your time tho. Wink

How do I mark this as solved?

OMMA
Forumember

Male Posts : 59
Reputation : 1
Language : English
Location : USA

http://omma.forumotion.com

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by Pizza Boi on May 2nd 2014, 2:16 am

Hi Very Happy

Just edit your first post and there should be a solved icon. I'm sorry I didn't manage to help much Sad .

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Thread description and PM title margin problem

Post by SLGray on May 2nd 2014, 4:09 am

Topic Solved & Archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36735
Reputation : 2447
Language : English
Location : United States

http://ztwds.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