Weird overlapping text in post

[meadwench]

Hey all,

I need to tap the hive mind. My forum here: http://www.gotmead.com/forum/showthread.php/24476-GotMead-Calculator-Issues-Temp-fix is getting weird overlapping text for edit/delete, reply with quote and multi-quote.

I have no idea where in heck this is coming from. If anyone can see something I can't (my eyes are crossed from looking through code at this point), I'd love some insight.

Thanks!!

Vicky Rowe

[Seven Skins]

There is an extra </div> in your postbit template, just above postfoot class try removing that.

[squidsk]

Two things to try out. One does it work on a default style with no parent. Two turn off all plugins and see if that fixes the issue. My guess is it is either a style or a mod issue.

[meadwench]

Thanks Seven Skins, I'll try that.

Squidsk, I am using the default theme, so it might be an add on. I'll have to check it out.

Vicky

--------------- Added 1443210736 at 1443210736 ---------------

Well, removed the extra </div> in both postbit and postbit legacy, and it didn't work. Disabled all mods that interact with the postbit, no change.

::sigh:: This is frustrating, I have no idea where this is coming from. On the plus side, I did manage to make a lingering advertising box disappear.

[Dave]

Seems like the placeholder image in the button contains an invalid URL:
<img id="quoteimg_243467" src="/home/meadwenc/public_html/forum/clear.gif" alt="Reply With Quote" title="Reply With Quote">

As you can see, it's an absolute path. Either delete that line from the postbit or postbit_legacy or fix the image to a correct URL.

[meadwench]

Hmm. A search of postbit and postbit legacy doesn't show that, and I searched all templates, no joy. I'll have to hunt that down somehow.

The file does exist at that location, though.

[Dave]

Yeah, but the path to that location is not right. It's using the absolute path, not the public_html path. It should be something like http://yoursite.com/forum/clear.gif. Absolute path is local filesystem path to the file.

<img id="quoteimg_{vb:raw post.postid}" src="{vb:raw vboptions.cleargifurl}" alt="{vb:rawphrase reply_with_quote}" />

Is what it looks like in the template postbit and postbit_legacy.
Go to AdminCP > Settings > Style & Language Settings > Location of clear.gif to modify the location of the clear.gif image.

[meadwench]

Thanks Dave, that did the trick.

Now I have to figure out why the RSS feed and Subscription buttons are shoved under the thread and post count buttons here http://www.gotmead.com/forum/forum.php

And here I thought staying with the default style would help me avoid this stuff.......

Thanks for your help!

[Dave]

Well for the RSS feed it's because ".notices li" has a padding that has to be removed.
Not sure about the subscription button since I can't see it as a guest.

[meadwench]

Hmm. I found this in the chrome.css file, but that is the only place it appears in my templates and styles.

.notices li {
background: {vb:stylevar notices_background};
font-size: {vb:math {vb:stylevar font.fontSize}-1}{vb:stylevar font.units};
color: {vb:stylevar body_color};
padding:{vb:math {vb:stylevar padding}/2} {vb:stylevar padding};
margin-bottom:{vb:math {vb:stylevar padding}/2};

That padding stylevar is set to 10. If I change the stylevar, it messes with all the padding on everything. Argh....this should not be so hard to find!

[billstelling]

Well, to be honest. you are going about skinning your site in the wrong way. You should avoid any template modifications as much as possible and use the vars and additional.css to style the site as apposed to changing the stylevars descriptors within the templates.

Also, the area you are modding is bound by % in overlapping ways and if you add an element that adds width or height it will break the layout with how the bits combine to the thread, rss, threadbit and post count.

While the shadowing is cool and I get what you are going for there, you need to learn some of the best practices for vB so as to avoid a lot of headaches in the future. One of the biggest rules, and one I can not stress enough, is you NEVER modify the base vB style.

To use the base theme as a template, add anything to addition.css so that it sees it as a changed theme. /*new style*/ That will work just fine for what we want to do, allow for the default style to be downloaded.

After adding to the add.css you can download the xml and then upload it giving it a new name and setting it to be its own style and not a child of any other style. You can then start modding that one and your stock style will be there to use to troubleshoot any problems you might have with a mod not adding things to the menus and such due to any template modifications you might have had to make to change the layout of vB aside form vars modding and css.

You also want to copy the default images folder, rename it, and then point the images section of the vars to the new folder. As with the base style, you should leave the default graphics alone and use a newly created one for your graphics.

If you want to poke around on my test site feel free. I do heavy modifications and styling to vB and it might give you a few ideas with what you would like to do, you can check it out here. (http://billstelling.com/)

[meadwench]

Thanks for the info, Bill, it makes sense. This is how I do the main site in WP, running a child theme off the main theme, so I can modify that, and leave the main alone. I would love to do that here as well.

So where does the addition.css file get stored, is that in the db too? I exported the default xml, and re-imported it as a separate theme called GM Theme (no parent). It shows up as a theme in the back end, but not as a choice in the front end for me to go in and see results when I change things. I don't want anything fancy, just to get the colors to more or less match the main site, and have the layout not overlap.

Looking at my stylevar, the only items changed besides colors are the logo image, favicon, sidebar width and logo padding. This is why I'm stumped on the overlapping areas.

Is there a detailed best practices you would recommend for me to read? I've noticed that most of the VB documentation I've found so far is fairly minimal, and doesn't really help much. Hence my post here.

You'll likely notice I have very few posts, mainly because I can usually google up a solution to most things I need and do it on my own. I only post when I'm at wits end.

Thanks for the input. I'm still at a loss why the tiles are overlapping in the forum list for post count and RSS. I didn't touch anything in that area for sizing or padding, so I'm wondering what the heck is going on.

[billstelling]

The overlapping is caused by the elements for that div being divided by percentages. You have to take that into account when modding some of the core vb stuff. Adding shadow to them adds several pixels around each element breaking the percentage figures.

Additional.css is listed with the templates for the themes and is not a part of the vars. Its under CSS Templates. expand that by double clicking and you will see additional.css in it's cat.

[meadwench]

Darn it, I didn't mod the core vb stuff, that is the frustrating thing. I have no idea where this shadow code originates or where to find it.

I checked the CSS files, and chrome.css was altered, so I reverted it. Other than that, no css changes have been made. I do have code in the additional.css, but all that is in there right now is padding for the header ad-2.

[billstelling]

I would have to get in there and take a look to see what is going on.. The default has shadowing built in but it can be turned off in the vars. Something was added that is causing it.

--------------- Added 1443323669 at 1443323669 ---------------

.notices li {
background: #D0D0D0 none repeat scroll 0% 0%;
font-size: 12px;
color: #3E3E3E;
padding: 5px 10px;
margin-bottom: 5px;
box-shadow: -2px 2px 2px #000;
text-align: left;
clear: both;
}

That appears to be the cause.. forumhome-rollup.css line 1

[meadwench]

Isn't that the code for the notices? I would have thought that the forumstats and forumactionlinks would have been the issue. I've been looking around in forumbits.css trying to see if there was something going on there (though it isn't showing as having been altered).

I'll go look at this, can't hurt to see what's going on...

--------------- Added 1443324535 at 1443324535 ---------------

Hmm. No forumhome-rollup.css file in the templates. There is a forumhome.css, but no reference to notices in there.

--------------- Added 1443324640 at 1443324640 ---------------

The only reference to .notices li is in chrome.css. The code is

.notices li {
background: {vb:stylevar notices_background};
font-size: {vb:math {vb:stylevar font.fontSize}-1}{vb:stylevar font.units};
color: {vb:stylevar body_color};
padding:{vb:math {vb:stylevar padding}/2} {vb:stylevar padding};
margin-bottom:{vb:math {vb:stylevar padding}/2};

[billstelling]

the rollup covers all the .css files in the templates for "forumhome". When I look at the code I get what is showing for the site and not what is coded on the site per-say.

But it is showing it as being called for .notices li. Like I said, without taking a look it's a bit hard to track stuff down. vB is coded much different than a typical web site and there are a lot of global elements to contend with and not just style sheets and html.

It could have been done in the vars or any number of templates that tie into it. You just cant tell in some cases without actually seeing what was done in the vars and templates..


background: {vb:stylevar notices_background};

that one suggests that it was added to the vars for notices background..

[meadwench]

Yeah, checked that stylevar, and it's just a color, no other vars set.

Argh. It's like trying to navigate without a map, compass or gps while wearing a blindfold, I swear. I've checked vars, and the only altered things in there are shadow colors. So back to css, I do see shadow code in several of the css files, but this one seems to be the most relevant in forumbits.css.

.forumbit_post .forumrow, .forumbit_nopost .forumhead, .forumbit_nopost .forumrow, .forumbit_post .forumhead, .forumbits .forumhead {
<vb:if condition="$stylevar['textdirection'] == 'rtl'">
-moz-box-shadow: 2px 2px 2px {vb:stylevar forumbits_shadow_color};
-webkit-box-shadow: 2px 2px 2px {vb:stylevar forumbits_shadow_color};
box-shadow: 2px 2px 2px {vb:stylevar forumbits_shadow_color};
<vb:else />
-moz-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
-webkit-box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
box-shadow: -2px 2px 2px {vb:stylevar forumbits_shadow_color};
</vb:if>
}


I hate to go messing around with the shadowing that appears in half a dozen css files. ::sigh:: And of course, I seem to be the only person who has ever had this issue, at least so far as my GoogleFu is showing.

Also, I just wanted to say, thanks for taking time to help me dig on this. I hate it when I can't figure things out and am forced to post about it, I have always been able to figure it out by researching. Not so much this.

[billstelling]

Just wrap
<vb:comment></vb:comment>
tags around any html in the temlates you do not want to be used.

and for css use
/*css-code*/

that way you are not removing anything and you can try things out without breaking your theme. When ever I work on a template or css I save all the content to notepad while I am working so I can just put the code back as it was before I started in case of a fubar..

--------------- Added 1443329171 at 1443329171 ---------------

You know, it would only take about hour to just rebuild it from scratch.. It would be easier than trying to sort it out as it is pretty much the base style with the header and some color changes.

Most wont answer about it because of the complexity with styling and the fact that there are several ways to go about modding or creating styles. I do realize your want to learn it and to be able to make it what you want, but it is a very complicated product and it takes years to master. With the right mentor you can get up to speed pretty quickly, but it still takes months of doing to really get your head wrapped around it.

vB4 is obsolete, like many of the other board types, but it can't be helped and has more to do with the changes in how dynamic sites are built these days compared to just a few years ago. Style sheets are being phased out and the styling is being handled within the js now to achieve on the fly style transitions within elements. It's sort of coming full circle.. But that's a whole different subject..

As your a noob, and I like bread, I'll help you out with getting your theme sorted out if you want. Try and teach you a few things as well.. You just need to create an admin account for me so I can get to the backend and work on the theme.

Also there are some awesome people here and once you really get into it you will see what I mean.. So don't be afraid to ask anything. Pretty much every post here gets a response from several of the gurus..:)

[meadwench]

LOL, not really a noob, just never had the time to dig deep into 4.x. I could pretty much take 3.x apart, and hung onto it for a long time because I had it set up the way I liked.

I'd love some help, and very appreciative of your offer. I'll ping you privately. This, and my mysterious disappearing header ad (it blinks it on load, then goes away) are making me crazy.

[billstelling]

Noob to 4 I meant.. Was a bit late and I see today I was rambling a bit, I hate when I do that.. lol :)

[meadwench]

Eh, no worries. I do appreciate the insights. I never dug into 4 as much as I did 3. Just didn't have the time. I was an employee with a 9-5 job then. Now I'm a business owner, and much less free time, LOL.