• OzzModz is no longer taking registrations. All registrations are being redirected to Snog's Site
    All addons and support is available there now.

Help with blog styling

HM666

New member
I'm working on a custom skin for a site I'm gonna launch soon and I need some help finding the CSS to change some tag code. I want to make the white background in the popup in the screen shot be transparent so I need to know where to edit the CSS to do this. I cannot find it anywhere.
 
Yeah I've posted here and on vb.org about this. Its super hard to find this damn thing. And the white is annoying me lol. Here is what I posted over there don't know if that would help or not.

Looks like it's one of the tag_edit templates, maybe tag_edit_ajax_popup.
(kh99 on vbulletin.org)

Yeah already edited the tag_edit_ajax_popup template,

Code:
<div class="ajax_tag_edit_container" style="background-color:#281f28;border:1px solid #5a022b;border-radius:8px;padding:10px;color:#ffffff;">
<form action="threadtag.php?do=managetags" method="post" name="vbform">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" width="100%" border="0">
<tr>
	<td class="tcat"> </td>
</tr>
<tr>
	<td align="center">
	<div class="panel">
		<div align="$stylevar[left]">

		<fieldset class="fieldset">
			<legend style="color:yellow;">$vbphrase[edit_tags]</legend>
			<div style="padding:$stylevar[formspacer]px">
				<if condition="$tag_manage_options">
					<div style="padding-bottom:$stylevar[formspacer]px">$vbphrase[uncheck_tag_remove_bold_you]</div>
					<ul class="floatcontainer" id="tag_edit_list">
						$tag_manage_options
					</ul>
					<hr size="1" style="color:$stylevar[tborder_bgcolor]; background-color:$stylevar[tborder_bgcolor]" />
				</if>

				<div style="float: $stylevar[right]">
					<if condition="$show['add_option']"><div style="visibility:hidden">text</div></if>
				</div>

				<if condition="$show['add_option']">
					<div> <span class="shade">($vbphrase[separate_tags_using_comma])</span></div>
                                        <div id="tag_add_wrapper">
					<input type="text" class="bginput" name="taglist" id="tageditinput_$contentid" size="50" style="width:200px" tabindex="301" />
                                        </div>
					<if condition="$show['tag_limit_phrase']">
						<if condition="!$tags_remain">
							$vbphrase[cannot_add_tags_remove_first]
						<else />
							<phrase 1="$tags_remain">$vbphrase[you_may_add_x_tags]</phrase>
						</if>
						$vbphrase[tags_visible_all_users]
					</if>
				</if>
				</div>
		</fieldset>

		</div>
	</div>

	<div style="margin-top:$stylevar[cellpadding]px">
		<input type="hidden" name="do" value="managetags" />
		<input type="hidden" name="s" value="$session[sessionhash]" />
		<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
		<input type="hidden" name="contenttype" value="$contenttype" />
		<input type="hidden" name="contentid" value="$contentid" />
		<input type="hidden" name="url" value="$url" />
		<img src="$stylevar[imgdir_misc]/progress.gif" id="tageditprogress_$contentid" class="inlineimg" style="display:none" alt="" />
			<input type="button" id="tageditsubmit_$contentid" name="tagsubmit" class="button" value="$vbphrase[save_changes]" accesskey="s" tabindex="302" />
			<input type="button" class="button" value="$vbphrase[cancel]" id="tageditcancel_$contentid" accesskey="c" tabindex="303" />
	</div>
	</td>
</tr>
</table>
</form>
</div>
<div id="tag_add_wrapper_menu" class="vbmenu_popup" style="display:none"></div>

but I could find that code in there, only the inner box. Its right before that template starts. Using Firebug its this code:

Code:
<div id="blogtagmenu_1_menu" style="width: 300px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); padding: 10px; position: absolute; z-index: 50; clip: rect(auto, auto, auto, auto); left: 239px; top: 492px; display: none;">

But of course there are vb variables so you cannot just look it up by the code alone.

The actual template code is:

Code:
<span id="blogtagmenu_{vb:raw blog.blogid}"><a href="threadtag.php?{vb:raw session.sessionurl}do=manage&contenttype=vBBlog_BlogEntry&contentid={vb:raw blog.blogid}"><img src="{vb:stylevar imgdir_misc}/blog/tag_edit.png" border="0" class="inlineimg" id="blogtag_{vb:raw blog.blogid}" alt="{vb:rawphrase edit_tags}" /></a></span

I think, I'm not completely sure.

There is no call for "blogtagmenu" or "blogtagmenu_" in any of the CSS in the templates and I tried adding it to the additional.css template to no avail. :(
 
Also there is CSS but I cannot find it anywhere in the templates this is what I need to change but I have no idea where to find it:

Code:
element.style {
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #000000;
    clip: rect(auto, auto, auto, auto);
    display: none;
    left: 312px;
    padding: 10px;
    position: absolute;
    top: 638px;
    width: 300px;
    z-index: 50;
}
 
I found everything you have already, but I do not know. The css element.style is where it is in firebug, but as far where to change it in the templates or stylevars, is a PITA.
 
*Sigh* agreed. I really wish they would have not made vBulletin so code bloated when they released vB4. :(
 
I did some searching and the only place I can find any reference to blogmenu is in includes/xml/product-vbblog.xml . This is what I found. Maybe you can edit here.

Code:
span id="blogtagmenu_{vb:raw blog.blogid}"><a href="threadtag.php?{vb:raw session.sessionurl}do=manage&contenttype=vBBlog_BlogEntry&contentid={vb:raw blog.blogid}"><img src="{vb:stylevar imgdir_misc}/blog/tag_edit.png" border="0" class="inlineimg" id="blogtag_{vb:raw blog.blogid}" alt="{vb:rawphrase edit_tags}"
 
I did some searching and the only place I can find any reference to blogmenu is in includes/xml/product-vbblog.xml . This is what I found. Maybe you can edit here.

Code:
span id="blogtagmenu_{vb:raw blog.blogid}"><a href="threadtag.php?{vb:raw session.sessionurl}do=manage&contenttype=vBBlog_BlogEntry&contentid={vb:raw blog.blogid}"><img src="{vb:stylevar imgdir_misc}/blog/tag_edit.png" border="0" class="inlineimg" id="blogtag_{vb:raw blog.blogid}" alt="{vb:rawphrase edit_tags}"

Thanks but I had posted that code in the first post. It has nothing to do with the css I'm afraid. I just disabled the tags in the blog area because I cannot find it. :(
 
Found it. The CSS is being set via clientscript/vbulletin_ajax_tageditor.js. About halfway through the line. Do a search for 300px and it will take you straight to it.
 
Ahhhh Haaaa, so you can add this to the end of the blog_show_entry template

Code:
<script type="text/javascript">
vB_AJAX_TagEditor.prototype.display = function(B) {
    if (B.responseXML) {
        var A = B.responseXML.getElementsByTagName("error");
        if (A.length) {
            alert(A[0].firstChild.nodeValue)
        } else {
            if (!this.divobj) {
                this.divobj = document.createElement("div");
                this.divobj.id = this.divname;
                this.divobj.style.display = "none";
                this.divobj.style.width = "300px";
                this.divobj.style.background = "[COLOR=#ff0000]red[/COLOR]";
                this.divobj.style.border = "1px solid #000000";
                this.divobj.style.padding = "10px";
                document.body.appendChild(this.divobj);
                this.vbmenu = vbmenu_register(this.vbmenuname, true);
                YAHOO.util.Dom.get(this.vbmenu.controlkey).onmouseover = "";
                YAHOO.util.Dom.get(this.vbmenu.controlkey).onclick = ""
            }
            this.divobj.innerHTML = B.responseXML.getElementsByTagName("tagpopup")[0].firstChild.nodeValue;
            YAHOO.util.Event.on(this.edit_submit, "click", this.submit_tag_edit, this, true);
            YAHOO.util.Event.on(this.edit_cancel, "click", this.cancel_tag_edit, this, true);
            YAHOO.util.Event.on(this.divobj, "keydown", this.tagmenu_keypress);
            if (YAHOO.util.Dom.get("tag_add_wrapper_menu") && YAHOO.util.Dom.get(this.edit_input)) {
                tag_add_comp = new vB_AJAX_TagSuggest("tag_add_comp", this.edit_input, "tag_add_wrapper");
                tag_add_comp.allow_multiple = true;
                var C = B.responseXML.getElementsByTagName("delimiters")[0];
                if (C && C.firstChild) {
                    tag_add_comp.set_delimiters(C.firstChild.nodeValue)
                }
            }
            this.vbmenu.show(YAHOO.util.Dom.get(this.vbmenuname));
            YAHOO.util.Dom.get(this.edit_input).focus();
            YAHOO.util.Dom.get(this.edit_input).focus()
        }
    }
};
</script>

And change red as needed, this way it is packaged up without any file changes.
 
Found it. The CSS is being set via clientscript/vbulletin_ajax_tageditor.js. About halfway through the line. Do a search for 300px and it will take you straight to it.

Awesome! Thanks. It does work if I change the hard code in the js file. Guess I'll just have to not upgrade in the future. Don't want to lose the edit. :(
 
I have no clue I do not code JavaScript at all. I install it and can edit it but I do not create code for it. So that is why I stated that. I would need to find what div name I could use if there is one to apply the code into the additional.css template.
 
I installed ozzy's code from here in an ad module, the configured the module to display on certain style and it worked perfectly. This way, it would only affect the custom style and leaves open the option to restyle by editing the javascript in the ad module.
 
Ahhhh Haaaa, so you can add this to the end of the blog_show_entry template

Code:
<script type="text/javascript">
vB_AJAX_TagEditor.prototype.display = function(B) {
    if (B.responseXML) {
        var A = B.responseXML.getElementsByTagName("error");
        if (A.length) {
            alert(A[0].firstChild.nodeValue)
        } else {
            if (!this.divobj) {
                this.divobj = document.createElement("div");
                this.divobj.id = this.divname;
                this.divobj.style.display = "none";
                this.divobj.style.width = "300px";
                this.divobj.style.background = "[COLOR=#ff0000]red[/COLOR]";
                this.divobj.style.border = "1px solid #000000";
                this.divobj.style.padding = "10px";
                document.body.appendChild(this.divobj);
                this.vbmenu = vbmenu_register(this.vbmenuname, true);
                YAHOO.util.Dom.get(this.vbmenu.controlkey).onmouseover = "";
                YAHOO.util.Dom.get(this.vbmenu.controlkey).onclick = ""
            }
            this.divobj.innerHTML = B.responseXML.getElementsByTagName("tagpopup")[0].firstChild.nodeValue;
            YAHOO.util.Event.on(this.edit_submit, "click", this.submit_tag_edit, this, true);
            YAHOO.util.Event.on(this.edit_cancel, "click", this.cancel_tag_edit, this, true);
            YAHOO.util.Event.on(this.divobj, "keydown", this.tagmenu_keypress);
            if (YAHOO.util.Dom.get("tag_add_wrapper_menu") && YAHOO.util.Dom.get(this.edit_input)) {
                tag_add_comp = new vB_AJAX_TagSuggest("tag_add_comp", this.edit_input, "tag_add_wrapper");
                tag_add_comp.allow_multiple = true;
                var C = B.responseXML.getElementsByTagName("delimiters")[0];
                if (C && C.firstChild) {
                    tag_add_comp.set_delimiters(C.firstChild.nodeValue)
                }
            }
            this.vbmenu.show(YAHOO.util.Dom.get(this.vbmenuname));
            YAHOO.util.Dom.get(this.edit_input).focus();
            YAHOO.util.Dom.get(this.edit_input).focus()
        }
    }
};
</script>

And change red as needed, this way it is packaged up without any file changes.

This worked thanks Chris. I did not see this post until it was pointed out to me, I missed it looking at the other posts in the thread. :( But this solved my issue.
 
Not a problem, I was glad when replicant pointed out where it was, cause nothing else I tried worked.
 
Back
Top