Weird overlapping text in post

[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.

[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 [DATE]1443323669[/DATE] at [TIME]1443323669[/TIME] ---------------

.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 [DATE]1443324535[/DATE] at [TIME]1443324535[/TIME] ---------------

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

--------------- Added [DATE]1443324640[/DATE] at [TIME]1443324640[/TIME] ---------------

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 [DATE]1443329171[/DATE] at [TIME]1443329171[/TIME] ---------------

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.