vb.org Archive - Help with blog styling

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)

- - Help with blog styling (https://vborg.vbsupport.ru/showthread.php?t=317677)

Help with blog styling

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. :(

Looks like it's one of the tag_edit templates, maybe tag_edit_ajax_popup.

Quote:

Originally Posted by kh99 (Post 2539821)

Looks like it's one of the tag_edit templates, maybe tag_edit_ajax_popup.

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&amp;contenttype=vBBlog_BlogEntry&amp;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. :(

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

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'm not sure, but I'd guess that element.style means that those attributes come from the style="..." in one of the tags.

Thanks. :( Still have not found it. Its got to be somewhere. Is there a separate tag.css file or something in the files somewhere?

Quote:

Originally Posted by John Lester (Post 2540065)

According to Lynne it's not in any css file.

https://vborg.vbsupport.ru/showpost....58&postcount=2

From thread ... https://vborg.vbsupport.ru/showthread.php?t=266697

ok but I searched for both element.style & the actual code that Firebug shows it to be neither is showing. :(

When you searched did you search in templates for blogtagmenu_1_menu ?

Quote:

Originally Posted by John Lester (Post 2540147)

When you searched did you search in templates for blogtagmenu_1_menu ?

Yes it does not give anything at all. The 1_menu part is probably indicating my blog since I'm the only one on there & my blog id would be blog 1. Searching for blogtagmenu also does not render any results that give css coded into the template. So I'm at a loss I have no idea where to find this and I HAVE to change it.

EDIT:

Found it! :D

Template = tag_edit_ajax_popup

Quote:

Originally Posted by HM666 (Post 2540073)

ok but I searched for both element.style & the actual code that Firebug shows it to be neither is showing. :(

I'm up late working on two modifications one for a clients site so I won't call you a silly rabbit for your oversight (I'm exhibiting that now on these mods lol) I will however laugh with you not at you and say "well of course you can't find element.style, here's why" https://www.drupal.org/node/229348#comment-754511 and no worries we all learn something new everyday :cool:.

https://getfirebug.com/wiki/index.php/Style_Side_Panel

So do as John Lester mentioned and check out Lynne's info.

Well, as has been pointed out a few times now, you're looking at template tag_edit_ajax_popup. I guess the part that's confusing you is that the outer div is marked as class class="ajax_tag_edit_container", but that doesn't exist in any of the CSS templates (which I admit seems strange - I'm guessing someone didn't quite finish the style). The CSS has been put in the style attribute of that tag, so it looks like this:

HTML Code:

<div class="ajax_tag_edit_container" style="background-color:white;color:black;padding:10px;padding-top:0px;border:2px solid black;">

OK, since you're making your own style anyway, edit that template and take out the style attribute, so that it looks like this:

HTML Code:

<div class="ajax_tag_edit_container">

Then make it in to CSS and put it in one of the existing CSS templates:

Code:

.ajax_tag_edit_container {

        background-color:blue;

        color:black;

        padding:10px;

        padding-top:0px;

        border:2px solid black;

}

I really don't know much about making custom skins, so I don't know where you'd want to put it. I guess not in additional.css since that's for user changes. Maybe in blog.css if that's the only place it's used. The tag editing code seems to be common to forum threads, but I don't see any way to get that popup in the forum.

Anyway, now you can change it.

Quote:

Originally Posted by John Lester (Post 2540209)

EDIT:

Found it! :D

Template = tag_edit_ajax_popup

I have already edited that as said in the first couple of posts. Editing that template does NOT change anything regardless of what everyone seems to think.

Quote:

Originally Posted by TheLastSuperman (Post 2540210)

I've never run into element.style before in all the years I've done this. Never had that come up.

Quote:

Originally Posted by kh99 (Post 2540225)

HTML Code:

<div class="ajax_tag_edit_container" style="background-color:white;color:black;padding:10px;padding-top:0px;border:2px solid black;">

OK, since you're making your own style anyway, edit that template and take out the style attribute, so that it looks like this:

HTML Code:

<div class="ajax_tag_edit_container">

Then make it in to CSS and put it in one of the existing CSS templates:

Code:

.ajax_tag_edit_container {

        background-color:blue;

        color:black;

        padding:10px;

        padding-top:0px;

        border:2px solid black;

}

The extra code added is mine. I always add it into the template first to make sure it works, its a process that I go through. once I'm sure everything works I then place it into the additional.css template. That being said that does NOT change the white part that I wanted to change no matter where you put it. :(

UPDATE: Another member on a different site found where this code is at. Its in the clientscript/vbulletin_ajax_tageditor.js file. I could edit the file and it works but this would mean that I cannot overwrite the js file in the future or lose the edit and it also means that this will show no matter what skin I have on the site, which if in the future I decide to add a light colored skin this will present a problem. Does anyone know the css that I can use from this js code?

Code:

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="#ffffff";this.divobj.style.border="1px solid #000000";this.divobj.style.padding="10px";document.body.appendChild(this.divobj);

I need to know the div name to use for placing this in my additional.css instead of editing a core js file. I've tried the following:

Code:

.divobj, #divobj, .divobj.style, & #divobj.style

None of those work. :(

Quote:

Originally Posted by HM666 (Post 2540231)

I have already edited that as said in the first couple of posts. Editing that template does NOT change anything regardless of what everyone seems to think.

OK, sorry. I tried what I posted before posting and it does actually work for me. But I guess you're getting a popup generated by js for some reason?

Edit: No, I'm sorry, I'm just catching up with what you were asking: you want the white border of the popup to be transparent. And it's obvious from the picture that you already have managed to change the color of the rest of the popup background. So yeah, that part seems to be in that .js file. Sorry it took me so long to understand. So what I said above is wrong, I *didn't* get it to work, I misunderstood what you were asking.

OK, as I mentioned in the edit above, I'm sorry I didn't understand this sooner. I think we all misunderstood what you were asking. But I think there is a way to do it (obviously the 'color:blue' is just a test):

Code:

div[id^="blogtagmenu_"] {

        color:blue !important;

}

But apparently this is CSS 3, so I don't know what that means as far as browsers that support it.

Quote:

Originally Posted by HM666 (Post 2540231)

I have already edited that as said in the first couple of posts. Editing that template does NOT change anything regardless of what everyone seems to think.

I don't THINK that it works, I tested it on a vanilla skin on a live site and KNOW that it works. I edited the code below (shown with the border removed) and was able to change colors, remove it completely (another edit to the code will affect the outside small black border), and I don't know how to make it transparent but if I can remove it then I could do so if I knew how :D

Code:

<div class="ajax_tag_edit_container" style="background-color:white;color:black;padding:0px;padding-top:0px;border:0px solid black;">

Quote:

Originally Posted by HM666;2540231
[B

UPDATE:[/b] Another member on a different site found where this code is at. Its in the clientscript/vbulletin_ajax_tageditor.js file. I could edit the file and it works but this would mean that I cannot overwrite the js file in the future or lose the edit and it also means that this will show no matter what skin I have on the site, which if in the future I decide to add a light colored skin this will present a problem. Does anyone know the css that I can use from this js code?

If you ever figure this out that would be awesome, because the editor's css can't be overwritten via additional.css so hopefully if you find what works it will work on that as well.

Try adding this to additional.css template in your custom style:

Code:

#blogtagmenu_1_menu, .ajax_tag_edit_container {

background:#000000 !important;

color:#ffffff !important;

}

Change #00000 from black to your bg color for that area and change #ffffff to whatever font-color you want.

Worked for me on 4.2.1 but let us know ;).

Quote:

Originally Posted by kh99 (Post 2540232)

No problem. :)

Quote:

Originally Posted by John Lester (Post 2540267)

Code:

<div class="ajax_tag_edit_container" style="background-color:white;color:black;padding:0px;padding-top:0px;border:0px solid black;">

If you ever figure this out that would be awesome, because the editor's css can't be overwritten via additional.css so hopefully if you find what works it will work on that as well.

This has been solved with some js added at the end of a couple of templates dealing with the blog. Its answered in this thread: http://ozzmodz.com/showthread.php/72...h-blog-styling

Quote:

Originally Posted by TheLastSuperman (Post 2540319)

Try adding this to additional.css template in your custom style:

Code:

#blogtagmenu_1_menu, .ajax_tag_edit_container {

background:#000000 !important;

color:#ffffff !important;

}

Change #00000 from black to your bg color for that area and change #ffffff to whatever font-color you want.

Worked for me on 4.2.1 but let us know ;).

Again as I said before that does not work. Like Kevin said I'm trying to change the white NOT the inner. I have the inner part changed already. I wanted the white dark, but its been solved at the link above. Thanks for the help guys. :)

Glad you got it figured out. For future reference, if someone wants to do it with CSS, it can be done like this:

Code:

div[id^="blogtagmenu_"] {

        background-color:transparent !important;

        border-width: 0px !important;

}

I'm happy it's been resolved :) Good job ozzy :) Also wanted to thank Kevin for the css as it's given me an idea about editing the editor without editing a core file ;)

Quote:

Originally Posted by John Lester (Post 2540369)

I'm happy it's been resolved :) Good job ozzy :) Also wanted to thank Kevin for the css as it's given me an idea about editing the editor without editing a core file ;)

Yeah there are parts that simply will not edit on that either unless you change core files.

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01232 seconds Memory Usage 1,844KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (14)bbcode_code_printable (4)bbcode_html_printable (14)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (21)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: