Help with blog styling

[TheLastSuperman]

Originally Posted by HM666

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 .

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

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

[kh99]

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:

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

<div class="ajax_tag_edit_container">

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

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

[HM666]

Originally Posted by John Lester

EDIT:

Found it!

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.

Originally Posted by TheLastSuperman

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 .

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

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

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

Originally Posted by kh99

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:

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

<div class="ajax_tag_edit_container">

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

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

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?

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:

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

None of those work.

[kh99]

Originally Posted by HM666

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.

[kh99]

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):

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.

[John Lester]

Originally Posted by HM666

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

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

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.

[TheLastSuperman]

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

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

[HM666]

Originally Posted by kh99

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.

No problem.

Originally Posted by John Lester

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

<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

Originally Posted by TheLastSuperman

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

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

[kh99]

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

div[id^="blogtagmenu_"] {
	background-color:transparent !important;
	border-width: 0px !important;
}

[John Lester]

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