Hi,

Does anyone know the best way to change the dolphin 7 background to a background image so I can upload a background image instead of just the white?

Thanks.

Good question..

I installed a couple of templates and each one has a different background image, so I assume you have to change it in the template code, but don't know where.

Anyone know?

/templates/base/css

common.css

body {
font-family:Verdana,Arial;
font-size:11px;
color:#333333;
background-color:#589CBC;
margin:0px;
padding:0 0 50px 0;   
}

change to

body {
font-family:Verdana,Arial;
font-size:11px;
color:#333333;
background-image:url(../images/YOUR-IMG.gif );
margin:0px;
padding:0 0 50px 0;   
}

Note the uploaded image should be in

/templates/base/image

templates/base/css/common.css

The body css element. There you can change color. You can also add a css background image property like background-image:url('mybackgr.jpg')

Hmmm, answered while i was typing my answer. Figures.

let's see if they can figure it out

thanks

Awesome!  Thanks.  You guys rock.  I really love this forum.

My expertise is SEO, not php and css.  Hopefully I can contribute in some way back to members.

I will frequently check the forums to see if I can ever lend a hand with SEO issues/questions.

Hi there.

I just tried it but it only changes the background in the content field? Can someone tell me how to give the whole site a new background including the header?

Thanks in advance for your help!

Best Regards

Gabriel

For some odd reason mine does not change.....

Actually, now that I've tried it, mine does not change either.

I've tried both changing it to a image, and even just changing the color code.

I don't know what it might be changing, if anything, but it defintely didnt' change the main white color of my site to something else.  I couldn't find any changes this made.

Do you have any ideas?  Am I doing something wrong.  I followed the instruction to a T.

yoursite.com/administration/advanced_settings.php

templates uncheck them

then try again

cool.  Yes, that worked.  However, now a lot of my smaller images/icons are not showing up on my site.

Me too!

I am still learning about all this......and learning fast! :)

I just kep all those options under "templates" unchecked.  Now everything is working fine.

Nice..

But my background doesn't Fix ..

i put:in common.css of base/

body {
background:url(../images/body.png) !important;
background-repeat:no-repeat;
background-attachment:fixed;
font-family:Verdana,Arial;
font-size:11px;
color:#333333;
margin:0px;
padding:0 0 50px 0;
background-repeat:no-repeat;
background-attachment:fixed;
}

and the same in the common.css of my template skin004

any idea?

thank

Is it possible to add a picture in the top header like this so it is just about menu tabs and centered above menu tabs?

would you add to this code? general CSS div.sys_main_logo{Position: relative; Z-index:56;background-color:c4c470

I looking  for a look like this

So is this not possible to add a picture in the top header. Please see pic from themedilounge. Can someone please answer this question?

Very possible, and I suggest you take our suggestion to use Firebug into consideration, or else you will never know what you're doing.

I have it. thanks for your advice.

Ok I have tried everything including this code. div.sys_main_logo {
position: relative;
z-index: 56;
background-color: #d8dab8;background-image:url(http://www.themedilounge.com/templates/base/images/color%20bar.png)background-repeat: no-repeat;
Also spent a ton of time on w3schools.com but I can figure out how to insert that color bar into the header. Anyone?

Try this:

In the file: templates/base/_sub_header.html ... add the code in red, and upload your image to /templates/base/images  (replace yourimage.ext with the name of your image)  You can adjust the style info to your liking.  You may not need the height & width css or the margin: 0 auto css.


<bx_include_auto:_header.html />

<bx_injection:banner_left />
<bx_injection:banner_right />
__extra_top_menu__
<div class="sys_main_logo">
<div class="sys_ml" style="width:__main_div_width__;">
<div class="sys_ml_wrapper">
<bx_injection:injection_logo_before />
__main_logo__
<bx_injection:injection_logo_after />
</div>
</div>
<img style="padding-top:10px; width:100%; height:20px; margin:0 auto;" src="http://medilounge.com/templates/base/images/yourimage.ext"></img>
<bx_injection:banner_top />
</div>
<bx_injection:injection_between_logo_top_menu />
<div class="sys_top_menu">
<bx_injection:injection_top_menu_before />
__top_menu__
<bx_injection:injection_top_menu_after />        
<div class="clear_both">&nbsp;</div>
</div>
<bx_injection:injection_between_top_menu_breadcrumb />
<div class="sys_breadcrumb">
<div class="sys_bc_wrapper" style="width:__main_div_width__;">
<bx_injection:injection_breadcrumb_before />      
__top_menu_breadcrumb__
<bx_injection:injection_breadcrumb_after />
<div class="clear_both">&nbsp;</div>
</div>
</div>
<bx_injection:injection_between_breadcrumb_content />
<!-- end of top -->

<bx_injection:injection_content_before />
<div class="main" style="border:0px; width:__main_div_width__;">

Alright thanks for your response. I added you code here themedilounge you can check it out if you like. it didn't work.

<bx_include_auto:_header.html />

<bx_injection:banner_left />
<bx_injection:banner_right />
__extra_top_menu__
<div class="sys_main_logo">
<div class="sys_ml" style="width:__main_div_width__;">
<div class="sys_ml_wrapper">
<bx_injection:injection_logo_before />
__main_logo__
<bx_injection:injection_logo_after />
</div>
</div>
<img style="padding-top:10px; width:100%; height:20px; margin:0 auto;" src="http://medilounge.com/templates/base/images/color%20bar.png"></img>
<bx_injection:banner_top />
</div>
<bx_injection:injection_between_logo_top_menu />
<div class="sys_top_menu">
<bx_injection:injection_top_menu_before />
__top_menu__

and the code tries to load then it disappears.

You should probably correct the url:)  I'd suggest NOT using spaces in the image file name also.

I just inspected your site with firebug and the image url is unchanged.  Recheck your work.

If I manually change the image url in firebug, the image appears just fine.... although you might want to play around with the css.

sorry your right got it working. Just need to move it up a tad and change the margins. Sorry for quick post

I see you figured it out.

Let me know if you need any help with the css to get it to do what you want

Thank you sooooo much for your help dude one more thing..... how do yo move it up a little and chop off the ends at the menus tab. see pick. thanks again

For instance, the css below will center the image and set it to 998px wide.

<img src="http://www.themedilounge.com/templates/base/images/colorbar.png" style="padding-top: 10px; padding-bottom: 5px; height: 20px; width: 998px; margin-left: auto; margin-right: auto; display: block;">

You can change padding-top to 0px    and if that's not enough, you can add margin-top: -10px; to the style

I really appreciate your honesty and most of all help. The only thing I had to do was change the height to the original 13px to get what I was looking for. When I'm done with the site I'm will post a thread with all the great coding mods everyone here has helped me with. I hope that this will help others like myself who have little programming experience.

I had partial help with button changes, but was unable to find the rest of the files to finish changes. Does anyone know where to find the rest of the files so I can finish the job? Thanks.

I also would like to change the background images but not where the content is, i want the side bar either side of the content to have a picture....rather than just white..or grey like the boonex site just to fill that space in with some related transparent images to give it some more feel...

Thanks i look forward to hearing from anyone.......

Awesome community!!!!

Ok, I don't mean to sound like  a pain...  but while I can indeed locate the file path you speak of...  the whole

background-image:url(../images/YOUR-IMG.gif );

line of code is completely throwing me off.. I mean, where in that code do I place my image url??? - Do I over right the whole thing?

Do I insert it into only partial of the code above????

Do I actually name the Url  "YOUR-IMG" ?????

Does It only go within the ( ) ???

Then last but not least, exactly where do I have to upload the image to?  Do I have to name it any certain thing????

Again, I am not trying to be a pain, and this advice seems to work, but could you please give a little more detailed instructions for the laymen???

Thank you!

Please email or call me directly....  ANY time of day or night around the clock!

kevin_yoakum@comcast.net

765-426-6662

- Kevin

background-image:url(../images/YOUR-IMG.gif );

place the name of the image you want to use in place of YOUR.IMG.gif like happy.gif or happy.jpg what ever your file name is. No url needed.

Hello dears i tried everything you all post here but nothing is working what am i doing wrong

i changed it in common.css

font-family:Verdana,Arial;

font-size:11px;

color:#333333;

background-image:url(http://www.mysite.nl/domains/public_html/templates/base/images/backgrnd1.png);

margin:0px;

padding:0 0 50px 0;

Was browsing through the forums looking for CSS info on the navigation, and I saw this. Just curious but why all the extra lines of CSS code for background styles? Generally I use the following format, it saves space and less typing in regards to background image, colors etc

background: #fff url(../images/your-image-name.jpg) right bottom no-repeat;

Seeing the separate lines for the color, image, its positioning brings me back though

I know this is a fairly old post, but thought I would add it for anyone in the future looking for background CSS help.

hello...

I changed the background and it works fine as a member.but as a guest i see the old background..how can i fix this? 

Thank You!

So is it possible to for member to change their profile background.. Please respond!!!

Can members of a social network using Dolphin change their own background? Please respond 

They can if your settings allow it. In Admin>Advanced Settings>Templates> "Enable Users to Change Templates." If you don't want them to be able to change the template, then you should deselect this option.