Hello Bill NY,

I would strongly suggest looking at the firebug plugin for FireFox.  It is extremely helpful for looking at the DOM for a page.  Looking at those header tabs with firebug I can see that each option on the menu is a td with the class "eve_tab".

Take a look at firebug, it should help you track everything you want down.

Cheers,

Jonmark

quote:

...looking at the firebug plugin for FireFox.

I have this plug-in and love it. I just seem to be getting stumped on manipulating this code for some reason and figured one of the programmers might have an idea what I'm doing wrong. I try not to bother you guys "Too Much" (except when I have you re-index my site because the search engine is on the fritz) but this one has me scratching my head.

Does anyone have a thought as to where I'm going wrong. I'm trying to update my site for Jan 2nd and this is one of the areas I'm playing with.

I guess I'll go back and try some more...

Here is what I came up with. It works but I have an issue with 3 tabs (red marker above them.) in Firefox and just the ADMIN TAB in Safari and IE. What do you think?

<style>
div.ev_tab, div.ev_tab_hover {
    color: #ffffff;
    font-size: 0.9em;
    padding: 3px;
    background-repeat: repeat-x;
    background-image:url('http://barthmobile.com/masthead/bg-1.png');
</style>


<style>
table.ev_container td, table.ev_container_bottom td, table.ev_container th {
    background-repeat: repeat-x;
    border-top-width: 0px;
    background-image:url('http://barthmobile.com/masthead/bg-1.png');
    font-size: 0.9em;
    padding: 5px;
</style>

I cleaned it up a little more... I think - I'm not very versed in this stuff as my primary vocation is a little more hands on and dirtier.

www.truckroadservice.com

Here is what it was

<style>
#header_links td {background-color:#000000}
table.ev_post_table table.ev_tab_table_all td.eve_tab {
background-image:url('http://barthmobile.com/masthead/bg.png');
}

.ev_tab_table_top {margin-left:0}
* {
line-height:18px;
}

</style>

<style>
div.ev_tab, div.ev_tab_hover {
    color: #ffffff;
    font-size: 0.9em;
    padding: 3px;
    background-repeat: repeat-x;
    background-image:url('http://barthmobile.com/masthead/bg-1.png');
</style>

<style>
table.ev_container td, table.ev_container_bottom td, table.ev_container th {
    background-repeat: repeat-x;
    border-top-width: 0px;
    background-image:url('http://barthmobile.com/masthead/bg-1.png');
    font-size: 0.9em;
    padding: 5px;
</style>

Here is what I condensed it down to. Red is for the tables I was trying to do - black is what I had before for the Reply Popup Window

<style>
#header_links td {background-color:#000000}
table.ev_post_table table.ev_tab_table_all td.eve_tab {
background-image:url('http://barthmobile.com/masthead/bg-3.png');
    background-repeat: repeat-x;
}

.ev_tab_table_top {margin-left:0}
* {
line-height:18px;
}

div.ev_tab, div.ev_tab_hover {
    background-image:url('http://barthmobile.com/masthead/bg-1.png');
    background-repeat: repeat-x;
}

table.ev_container td, table.ev_container_bottom td, table.ev_container th {
    background-image:url('http://barthmobile.com/masthead/bg-1.png');
    background-repeat: repeat-x;
}

</style>

Am I on the right track?

Still have the same issue with the tabs as outlined above.

(edit:to add in } at end)

Looks like I'm done for for the new forum layout for next year and thought I would post the outcome for anyone who might want to do something like this for their website.

Unless you know what a Barth is, the category image might look weird to you... but all members on our site would relate to this as it is what the body side panels were made of



To manipulate each color into its own background image you would need to use these codes in the Eve Control Panel » Display Settings » Style Editor » Custom HTML
 Insert into HEAD Tag (JS/CSS Meta tags Only)



here are the codes... you need to:  Insert into HEAD Tag (JS/CSS Meta tags Only)

<style>

div#ev_common_master_div1 div#ev_common_master_div2 table#gs_frm_id_8331087061.ubbx_cfrm_cat_tbl tbody {
background-image:url('http://barthmobile.com/masthead/side.png');
}

div#ev_common_master_div1 div#ev_common_master_div2 table#gs_frm_id_8471042172.ubbx_cfrm_cat_tbl tbody {
background-image:url('http://barthmobile.com/masthead/side.png');
}

div#ev_common_master_div1 div#ev_common_master_div2 table#gs_frm_id_7101032172.ubbx_cfrm_cat_tbl tbody {
background-image:url('http://barthmobile.com/masthead/side.png');
}

div#ev_common_master_div1 div#ev_common_master_div2 table#gs_frm_id_9571032172.ubbx_cfrm_cat_tbl tbody {
background-image:url('http://barthmobile.com/masthead/side.png');
}

div#ev_common_master_div1 div#ev_common_master_div2 table#gs_frm_id_7671042172.ubbx_cfrm_cat_tbl tbody {
background-image:url('http://barthmobile.com/masthead/side.png');
}

div#ev_common_master_div1 div#ev_common_master_div2 table#gs_frm_id_948104843.ubbx_cfrm_cat_tbl tbody {
background-image:url('http://barthmobile.com/masthead/side.png');
}

div.ev_tab, div.ev_tab_hover {
    background-image:url('http://barthmobile.com/masthead/bg-b.png');
    background-repeat: repeat-x;

}

table.ev_container td, table.ev_container_bottom td, table.ev_container th {
    background-image:url('http://barthmobile.com/masthead/bg-b.png');
    background-repeat: repeat-x;

}

table.ev_com_tbl th {
    background-image:url('http://barthmobile.com/masthead/bg-y.png');
    background-repeat: repeat-x;

}
</style>

The color of the codes tell you what section was manipulated - each CATEGORY has its own frm_id_7671042172.ubbx so would need you would need to know that too.

Looks like I'm done... I hope this helps somebody...

I released the new themes on the 1st and it was well received.

We found one problem in IE. If I try to make ANY of the Content Islands with a background image it just keeps repeating the background image over and over again inside of the Island.

This page has the most Content Islands
http://barthmobile.com/eve

This page, the only Content Island is "Who's On Our Site Now"
http://barthmobile.com/eve/forums

I had the repeat background set to X
background-repeat: repeat-x;

If anyone has an idea to insert a background image into the solid blue area, I would appreciate it. I was successful in Safari & Firefox, but my users who have IE saw the repeating background image - over and over again.

Thank you for taking the time to read this, hopefully someone has an idea for helping me fix this.

Bump -

I take it that it can not be done because the codes used to generate the content island doesn't support a change?

Is there a way to manipulate it at its source?

Should I make this a Support Ticket instead?

I am bit confused what you are struggling with.  Is the issue that IE users are seeing the applied background image repeat?  Or is it that you cannot apply a background image to a content island in certain cases.

Could you link me to a page where there is a content island you are trying to apply a background image to, and could you link me to the background image you want to use?

Cheers,

Jonmark

Here is the code that I am using to change the background image of the content island





html body div#ev_common_master_div1 div#ev_common_master_div2 table#ev_portal_table tbody tr td#ev_portal_column_2 table tbody tr {
    background-image:url('http://barthmobile.com/masthead/bg-b.png');
    background-repeat: repeat-x;

}






The one on the left is what displays with Firefox and Safari - If you view it with IE it looks like the image on the right.







This is for any of the content islands I am trying to change.

Could you link me to the page where that content island is?  I want to look at its source real quick.

Cheers,

Jonmark

http://barthmobile.com/eve

it's up for now...

let me know when you're done so I can remove the offending code

Hello Bill,

I think I see what is happening here.  Your selector is actually setting a background image on all TR's, but this works in the other browsers because the background color on the TD goes over the background image on the TR.  I think you need to modify your select so that you are targetting the TD element, and then have a more specific selector for the specific TDs that should not have the background image.  Because the header row does not have a class this is surprisingly annoying, but should be something like:

 ev_bgcolor_row1

html body div#ev_common_master_div1 div#ev_common_master_div2 table#ev_portal_table tbody tr td#ev_portal_column_2 table tbody tr td {
    background-image:url('http://barthmobile.com/masthead/bg-b.png');
    background-repeat: repeat-x;
}

html body div#ev_common_master_div1 div#ev_common_master_div2 table#ev_portal_table tbody tr td#ev_portal_column_2 table tbody tr td.ev_bgcolor_row1,

html body div#ev_common_master_div1 div#ev_common_master_div2 table#ev_portal_table tbody tr td#ev_portal_column_2 table tbody tr td.ev_bgcolor_row2{
    background-image: none;
}


I havent tested this, but it looks like it should work 

Wanna give it a try?

It does work - thank you for your help...

I don't understand what that means but I will try to figure it out.

After a few hours I noticed a slight problem... It messes up the CSS cornering on some of the other areas - It does this on all browsers I checked.

I have left it like that for now so you can see it. If it is a major hurdle to overcome, I'll just uncheck the cornering option. By unchecking that, it won't offset the end.

I find it odd how it affected other areas?



edit: insert image.

Hello,

The issue is that the new td selector that I gave you is more specific than the one that you are using to set the rounded corner on the right of those two tables.  I would recommend either simplifying the previous selector I gave you or try this new selector, which should set the background image on the top right corner of those two elements.

html body div#ev_common_master_div1 div#ev_common_master_div2 table#ev_portal_table tbody tr td#ev_portal_column_2 table tbody tr td.ev_tr_groupee_corner,
html body div#ev_common_master_div1 div#ev_common_master_div2 table#ev_portal_table tbody tr td#ev_portal_column_2 table tbody tr td.ev_tr_corner {
    background-image: url("http://barthmobile.com/masthead/top_right.png");
}

Jonmark,

That worked perfectly. I checked it with Firefox, Safari & IE.

Thank you for your help on this.

bill ny

Since the upgrade earlier this month I've had a "Slight Problem" with my background images. Maybe something like this would take care of the problem.



I know you have a suggestion area - but trying to explain all of this in another area is a little cumbersome and I was hoping to get a little guidance.

Since the upgrade I have background image bleed through in the area where the Email A Friend and the Star Rating go.

Here is what I had for a background image



Because it is now one big field I decided to add a section below it to make it look more like the main forum area - http://barthmobile.com/eve/forums

here is my design.



I then had to adjust the "top Right Corner" to make this work.



The problem now is it takes the image and messes up the bottom area by only using the bottom of that bgw.png image instead of the top - this seems like an odd behavior.

Here are 2 examples of what happened.




Here is the link to that post

http://barthmobile.com/eve/for...1087061/m/8513923657

Here is a link to a post in a forum that I didn't change.

http://barthmobile.com/eve/for...1087061/m/7713936957

Good morning Bill,

What I suspect might be your problem is that on topic pages the header area was expanded vertically so that we could include more data and tools in that area.

I suspect that this is the root cause of your problem, though I am unsure what the page is supposed to look like?  Is the first screen shot the desired effect, and the second one broken?  I suspect this is the case but just want to confirm before investigating.

Cheers,

Jonmark

Good Morning Johnmark,

The desired effect would be the top of the second image and the bottom of the first image.

Or, this image that I put together from the two images.



Bill

I was thinking about this a little and I think I have something that would work - I would like to try it out before you start jumping through hoops for me.



because it is using the bottom of the image to populate the lower pane I think this might work without coding.

That should work.  Another thing you could do is this:

table.ev_container_bottom td {
    background-position: center top;
    border-bottom-width: 1px;
}

The page that has the darker blue in the header under the login bar is different because it is using a different style than the other page.  That style is using a different image.

I know it is using a different image - I was showing you what my problem was so I left it like that. I'll try the image manipulation and see how that goes - then I'll try the coding if it doesn't work out.

Feeling better today I hope?

Hey Bill,

No problem, I was not trying to be critical, just making sure we were both on the same page.  Either your image change or the CSS should work for you.  I tested the image change using FireBug on your site and it worked like a charm.

As far as my cold, no, its actually stepped up a bit more today.  My head is still pretty clear which allows me to work, but I have quarantined myself in my office to protect my co-workers as much as I can.

Thanks for asking,

Jonmark

Jonmark,

No problems, I know you weren't being critical - I was just trying to clarify for you. Sorry if it sounded like that.

I opted to change the image and all is better now - thank you for the help on this.

The reason why I asked for coding help was I thought it was unexpected behavior to see the bottom of an image insert itself into a background image with the codes I was using - Apparently I was wrong on this.

After I thought about it I opted to go with an image change that would render in the background whether the background image showed up on the top or the bottom of the box. Figured it might render one way in Firefox and another in IE and possibly another in Opera - why take chances I guess.

Also, if you opt to make the lower box bigger I'm already set for you.

Bill

Hey Bill,

Great job and good thinking on the image change.

Got to love cross browser compatibility.

I will go ahead and close this up again.

Cheers,

Jonmark