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.

Sticky & Announcements overlap with topic title

View previous topic View next topic Go down

Solved Sticky & Announcements overlap with topic title

Post by adukes_007 on September 4th 2014, 9:00 pm

If you look at the link below you see where I have text overlapping in the Sticky, Announcement section.

http://www.turbohkforums.com/f27-general-discuss

I had used css on the topic title so that long titles would display as aligned in the forum index if they run to a secong line.

I tried to edit the general template to space things out but I'm having issues. How should I add a few   codes after the Sticky text?

I'm talking about the topic-list-box template


Last edited by adukes_007 on September 5th 2014, 2:26 am; edited 1 time in total

adukes_007
Forumember

Male Posts : 229
Reputation : 1
Language : English
Location : Alabama- Forrest Gump Land

http://www.turbohkforums.com

Back to top Go down

Solved Re: Sticky & Announcements overlap with topic title

Post by Ange Tuteur on September 4th 2014, 9:16 pm

Hello adukes,

The problem comes from this rule in your Stylesheet
Display > Colors > CSS stylesheet
Code:
a.topictitle {
  margin-left: -10px !important;
}

This is adding a negative margin to the left of topic titles causing them to overlap other elements.

If you want to align the header title with the topic titles adjust the header title's left padding :
Code:
table.ipbtable th.forum2 { padding-left:15px; }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Sticky & Announcements overlap with topic title

Post by adukes_007 on September 4th 2014, 9:26 pm

I changed the left margin to -10 to line up the first and second line of a long topic title.

Without it there was an uneven offset when the topic title was 2 lines or greater.

adukes_007
Forumember

Male Posts : 229
Reputation : 1
Language : English
Location : Alabama- Forrest Gump Land

http://www.turbohkforums.com

Back to top Go down

Solved Re: Sticky & Announcements overlap with topic title

Post by Ange Tuteur on September 4th 2014, 9:44 pm

Are you talking about this ?


Because it still looks uneven with -10. The results of using negative margins usually aren't beneficial, as it can cause elements to go outside of their containers or overlap elements. The only way to prevent the text overlapping those labels is to remove the negative margin.

Also if you want to try and better align the text of these titles display them as a block-level element :
Code:
a.topictitle { display:inline-block }
( use inline to prevent elements from breaking to the next line, however, note that on smaller displays elements will break when necessary )

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Sticky & Announcements overlap with topic title

Post by adukes_007 on September 4th 2014, 10:46 pm

That offset is exactly what I'm talking about. I tried what you suggested and it didn't look good.

Right now the negative margin is -6. It closed part of the offset without overlapping. When there is a new post icon or participant icon it looks great. Without an icon there is always a gap.

I was thinking that adding more whitespace via   in the template would allow a -11 margin to over lap the excess whitespace.

adukes_007
Forumember

Male Posts : 229
Reputation : 1
Language : English
Location : Alabama- Forrest Gump Land

http://www.turbohkforums.com

Back to top Go down

Solved Re: Sticky & Announcements overlap with topic title

Post by Ange Tuteur on September 4th 2014, 10:49 pm

I'll see what I can come up with. I'll look over the templates, if it's not modifiable by the templates we can try some JavaScript if you want.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Sticky & Announcements overlap with topic title

Post by adukes_007 on September 4th 2014, 11:00 pm

solution
Templates-General-Topics_list_box
Remove the   Between participant icon and title.
Remove   Between last new post icon and title topic.

Go to display-colors- css and add the following.
Set the left margin to -3px or -4px for a.topictitle.

You can edit your image with an image editor to add more whitespace to the participant icon and last new topic icon.

Solved.

adukes_007
Forumember

Male Posts : 229
Reputation : 1
Language : English
Location : Alabama- Forrest Gump Land

http://www.turbohkforums.com

Back to top Go down

Solved Re: Sticky & Announcements overlap with topic title

Post by SLGray on September 5th 2014, 3:01 am

Thanks for posting the solution.

Topic solved and archived


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


SLGray
Administrator
Administrator

Male Posts : 35677
Reputation : 2375
Language : English
Location : United States

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