Looking to insert a background image into my tabs

Product: Eve Community
I have manipulated the coding on my Post popup window and would like to do the same on my tabs for the main part.



Here is the code that I used to adjust this.

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

I would like to do the same for the box that I circled in red. I am trying to get a gradient effect for my tabs and it doesn't seem possible when my only option is a single color.



Does anyone have a thought on how to manipulate this code?

"Host of Barthmobile.com"

Original Post
Votes (0)

Activity Stream

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.

Topic Assigned

This topic has been assigned to Jonmark Weber by Jonmark Weber.
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?
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");
}

Question Answered

This action was taken by Lori.

Question Unanswered

This action was taken by 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

Question Answered

This action was taken by Jonmark Weber.
To follow up on this question, please click here.
×
×
×
×
×