Changing background image

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.

Nothing too major here, but highly annoying...

So I'm changing background color, also trying out background images - no problem there, at first...

HOWEVER 

and this is just weird, well first let me walk you thru the steps I'm doing ( in the hope someone can point out what I'm doing wrong ) which I believe I'm doing right in order to see my changes.

I've made sure in admin that nothing caches. ( I usually do that anyway when I'm editing css/look & feel )
I've cleared out entirely cache folders except .htaccess in there ( and refresh server to make sure those are empty, they are )
I've made back ups of my common, and general css files so I can always revert back to the originals if need be. ( and I have needed them )
I use several browsers when designing & clear their caches frequently ( Camino, Chrome, Safari - thats an old school habit of mine, don't ask! ) 
SO basically as far as I can tell 'm doing what needs to be done to make sure I can see any color or image changes that I make when I refresh a browser.

The problem is, I am not seeing changes now. At first, everything worked as expected and I could see color changes, but not the background image when I decided to try that. I have even replaced the css I was editing with the original, un-edited file and I am still seeing the edited color changes.  I've removed the color line in the css and replaced it with a background image line, can't see a background image - just the color ( which isn't suppose to show up since I removed it in exchange for the css line for the image). Still with me? It's caching somehow, somewhere, right? 

Kooky or what?

Like I said, the original is back and I am still seeing a color background. Nothing is living in in cache or public cache folders. All 3 browsers, I wiped cache. Just for S**ts & giggles I checked my site on my iPhone and there too, color background. So obviously somethings caching or not working correctly. Believe me, I always suspect "user error" ( a.k.a ME ) but I'm a little confused right now. Whats happening doesn't seem it should be happening.

If anyone can figure out this little sweet heart gem of an issue I would be VERY happy. I am hoping its something stupid & obvious - I have been working on this site an inordinate amount of time.

Maybe it's just time to walk away from the box and do that sleep thing I hear people talk about. 

Thanks for taking the time to read my ramble. Sorry if this baffles you as well, but any suggestions would be helpful. Just doesn't make any sense to me at this point.

-maxi 

Sounds like you made the change in templates/base instead of templates/your-template-name.

I double checked to see if I did that, I didn't but good call. 

I guess I'm just impatient. It seems the changes will occur when I edit the css, it just takes a random amount of time. Sometimes 10 mins, 15mins, sometimes sooner - sometimes later.

BUT they do occur.

I did just start using Cloudflare, no clue if thats whats causing the "lag" for lack of a better word, but at least the changes to show up.

.....eventually.

Its still kooky!

thx for the reply

-max 

So the key really does seem to be PATIENCE!

We all expect to see our changes fairly quickly,...

Edit the CSS, changed color or added a background images, save, refresh your browser and you're s'pose to see your changes ( provided you edited the correct file of course ) 

....but as I've come to find out, there is a definite lag between changes made and refreshing a browser to see the changes. Several minutes to as much as a half hour in some cases. Well for me at least. I've cleared cache folders, and browser cache and used several browsers at that and didn't see my changes right away, even not right away.

I dunno, I hope this tidbit of info stops others from stressing out like I was. 

If you make a change, you gotta expect a few minutes will pass before you'll see it in your browser. So far it's happened to me on css edits and affiliate banner ads. Like with affiliate ad's ( using adsense ) not only was there a delay,...I'm assuming from Dolphin's code>Thru my server>To my browser but there was also a delay from google adsense as well.

In addition to the delay from my site, I've found out that sometimes adsense takes a few moments to kick in as well. Figured I'd mention this because its a little frustrating and I'm sure it's happened to others.

Patience! Make your changes then give it a moment. As long as you're not caching ( untic cache settings in your admin ) And in my case I also blew out the cache and public cache folders contents ( keep your .htaccess in those folders ) As well as cleared my browser cache, the changes and the ads eventually showed up working just fine. 

Hope that helps somebody.

-maxi 

Hy Dolphin site is http://ushomeworkforce.com/campus

I am trying to put in the background image, and followed the instructions for this thread

I placed this code in my common.css

NO CHANGE, There is no background image on my dolphin site. What can I do to fix this?

body {
background:url(http://ushomeworkforce.com/campus/templates/base/images/ushwf-background.jpg) !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;
}

I also tried

body {
font-family:Verdana,Arial;
font-size:11px;
color:#333333;
background-image:url(http://ushomeworkforce.com/campus/templates/base/images/ushwf-background.jpg);
margin:0px;
padding:0 0 50px 0;   
}

Still no background image, I must be doing something wrong. I am not a programmer, so if someone could tell me exactly what code to use I would appreciate it. Thanks!

Your changes may not be showing up because you have caching turned on in dolphin. So after makeing any changes you must clear the dolphin cache. Also turn all the caching options off while working on the site.

 Thanks! Background is showing up now, Last question.... it is scrolling, the code already says it should be fixed, no-repeat, how do I keep it from scrollinG?