Trouble with Background IMG in Main Preloaded Theme

[Woodchipz]

Hello everyone! Thanks for taking the time to read my question. I really enjoy Mysidia since I discovered it a few days ago.

I have a question concerning updating the background image in the titlebox of the style-city.css that comes preloaded with Mysidia.


I have some coding skill but am not very proficient. I am intellgent however and it allows me to figure out most things.


I have been able to change the theme between the sheets style-city.css and style-gemstone.css (The style sheets located in ../templates/main/media)

And have also been able to alter the background image back and forth between (../templates/main/media/citylights.jpg) and (../templates/main/media/joker.jpg ) Using the following code

#image {
border-left:10px solid #fff;
border-right:10px solid #fff;
border-bottom:5px solid #fff;
background:url("citylights.jpg") left;
height:150px;


However whenever I go to enter my own image for the background it won't show up.

#image {
border-left:10px solid #fff;
border-right:10px solid #fff;
border-bottom:5px solid #fff;
background:url("test2.jpg") left;
height:150px;

I have the test2.jpg located in (..public_html/templates/main/media)


Interestingly a custom background picutre did show up breifly the first time I tried it then reverted back. There also seems to be a long delay after I update things such as the height of the background image above, these changes arnt taking place on my mysidia site for some time after. Is this normal with CSS?

Website Name: http://paradiselandz.x10.mx/index

I will check back here often and check my PMs as well.

Thanks to all who can help me overcome this one, Much apperciated!



-Chipz

 

[Kyttias]

So long as the files are side by side, it should work.

(Hmm... as for the apparent 'delay', this is caused by the browser cache and especially if files share the same name. You can force a hard refresh on a tab by pressing CTRL with F5, and this might cause changes to go through faster.)

When working on themes, I like to use the browser to my advantage while testing. In both Chrome and Firefox, you can right click an element on the page and select from the context menu "Inspect Element" and immediately start playing around with CSS and HTML. Changes made like this, however, aren't REAL and are only for you to see and will disappear if the page is reloaded. But it's quite handy for testing small things without having to save actual files! (Just remember to really go make those changes, of course!)

 

[Woodchipz]

Thanks for the fast reply!

The cache tip is a good one that resolved a few things.
Ill be watching more CSS tutorials on youtube today.

I have been tinkering around and got the tester background IMG to show up in the title box

Ill be around these forums if anything I have any other questions. I may have a few..... but I really like this engine so far.

Thanks again