Adding a background image to my second page

  • 1
  • Question
  • Updated 5 years ago
  • Answered
I have chosen a customizable style "No frills'. I've uploaded my home page background and have edited a few things in CSS on that page, have saved it and now i want to add a different background to my About page but it does not allow me to do that. i've logged on and off and been trying for the past hour? Yola does not respond when i select the image i want as a background. i need help please. This is so frustrating!
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Lei Ling,

I haven't done this with "No Frills" but have successfully made different backgrounds for the home page and the rest, using "Squeaky Clean". I don't know if there is some limitation specifically with No Frills and guess there are other variables when additional CSS has been added.

I'm happy to look at what you have done and examine it from this side with FireBug but would mean that you would have to publish your site to see. Let me know if you wish to go this route or something else if you have another solution?
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Hi,

I choose not to go the publishing option. I've just changed it to Squeaky Clean and it does not even allow me to add a background to the home page. I've cleared my cache, log on and off and even restarted my laptop. I've even deleted the files I'm wanting to upload and uploaded them again. This is truely frustrating and not what I expect when I have to pay for this service.

The No Frills style clearly says that the background can be edited. Surely this should apply to all pages?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Lei Ling,

I was able to create a trial with No Frills and use two backgrounds. One for the index page and one for another page.

This is sounding like the CSS may be preventing the presentation as expected?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Lei Ling,

May I ask what browser you are using? I'm using FF or Chrome.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
I'm using FF.

So what does that now mean if CSS is preventing me from changing backgrounds on each page?
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
If i keep it on the No Frills style, i have the option of editing CSS. I then save the changes and add a new page. When i add the new page the changes are applied to the second page as well. Does CSS then apply what you've done on the home page to all pages? I then tried to upload a background for the second page and nothing happens.

Also please indicate if I upload a standard 1024x786 pixel page as a background image, shouldn't it fill the whole page? It does not do so on my side and Yola suggest a width of 1500-1700 which stretches it out too much and it becomes pixelated. The image then has clear defined borders around it which I do not want.

Please advise.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
1. CSS is a Sitewide application so it will carry over if added via the Site CSS.

2. Image sizes are a pain for backgrounds because I have to work back from first principles. I try and accommodate the most popular screen definition which I think is now ~1200 pixels and create the image to be just a little larger than this if it is a critical image. I set it as No tiling, left top anchored, in the selection criteria of the background settings. If it is an atmospheric image that tolerates the process cropping the RHS then I go for a 1900 pixel width.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok i hear what you're saying regarding CSS. I've just managed to add a background image onto a second page but I had disable the CSS by ticking the little block after I created the second page. If CSS applies across the site then how come the changes that were made on the first page e.g. top margin being 0 and set to 500px as well left border line changed from solid to none still shows up on the second image. I then enabled CSS and saved and it reverts back to the first page design. This means I cannot edit the second page CSS option which is ok if you state that it gets applied across the site. My question though is why has the changes that were made on the first page not been applied to the second.

Image ok I'll try 1200px
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
It's weird. The CSS changes are made on the page and saved. You have to disable it when creating the second page. The changes are not applied to the second page. If you want to edit the second page CSS you have enable CSS which reverts back to the first page design so it's a lose - lose situation?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
It may mean that you would need to add page specific CSS rather than sitewide. You can do this by adding the code into an HTML widget on your page or by using CSS stylesheets if the coding is long and repeated on some pages and not on others.

If you disable the CSS while editing any page it prevents the CSS being applied to all pages. There isn't a single page application through this tool specifically you need to add it to the page code specifically or call it in specifically from a CSS Stylesheet.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok, please take me through the step by step regarding the HTML widget for the first page and all other pages on the site.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Drag an HTML widget to the top of your page.

add the relevant page CSS to that widget. save it and examine the outcome.

Repeat this process with the next page and its relevant code.

PS Make sure you delete any custom Site CSS so that it doesn't interfere.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
I've just done that and the code shows up as text after I've saved it in the html widget. When you say "Drag an HTML widget to the top of your page. " do you mean place it in the section on the page where you can ONLY drop widgets? If yes I did that.

Does the background need to loaded before i do this? I'm thinking so yes?

Well it ain't working....
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes, you place it in the area that accepts widgets so that is correct.

If the code is showing as text then the syntax is incorrect and you need to fix that.

You should be able to change the background at any time
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
ok, what is the syntax?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Unfortunately without seeing your code I can't answer that Lei ling.
You can post it here between < code > and < /code > tags and that allows the forum to display the code without trying to render it.

I have had to add a space after the < and before the > so you need to remove these spaces
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
body {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 12px;
color: #333333;
background-color:#000000;
background-image: url(resources/D01%20Web%20HOME%20CMYK.png);
background-repeat:no-repeat;
background-position:center center;
background-attachment:scroll;
}

td, tr {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 12px;
color: #333333;
}

h1 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 30px;
}

h2 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 26px;
}

h3 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 22px;
}

h4 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 20px;
}

h5 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 14px;
}

h6 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 11px;
}

a:link {
text-decoration: none;
color: #333333;
}

a:visited {
text-decoration: none;
color: #333333;
}

a:hover {
text-decoration: underline;
color: #000000;
}

body {
margin-top: 0px;
}

#container {
/*width: 90%;
margin: 10px auto;
max-width:1024px;
*/

width: 900px;
;
margin: 0px auto;
}

#header {
width:900px;
}

#header h1 {
padding-top: 25px;
padding-left: 15px;
text-decoration:none;
color: #333333;
}

#header h1 a:hover {
text-decoration:none;
}

#header h1 a {
text-decoration:none;
}

#menu {
float: left;
width: 140px;
margin: 0px;
padding: 1em;
text-align:left;
overflow:hidden;
}

#menu ul {
list-style: none;
list-style-position:outside;
font-size:larger;
padding-left:0px;
margin-left:0px;
}

#menu ul li {
padding-bottom:14px;
}

#menu ul li a {
padding-bottom:14px;
text-decoration: none;
font-size:14px;
}

#content {
/* padding: 1em;
margin-left:200px;
border-left: solid 1px #CCCCCC;
*/

margin-left:10px;
padding: 1em;
float:left;
width:645px;
border-left: solid 1px #CCCCCC;
}

/* #content div {
float:left;
}

*/

#full-content {
padding: 1em;
}

.sys_footer {
text-align:right;
font-size:small;
width:770px;
margin:10px auto;
}

#sys_designerfooter {
border: none;
margin:0 auto;
padding: 0;
background: none;
}

.sys_txt {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 12px;
color: #333333;
}

.sys_txt h1 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 30px;
}

.sys_txt h2 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 26px;
}

.sys_txt h3 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 22px;
}

.sys_txt h4 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 20px;
}

.sys_txt h5 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 14px;
}

.sys_txt h6 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 11px;
}

.sys_txt a:link {
text-decoration:underline;
color: #333333;
}

.sys_txt a:visited {
text-decoration:underline
}

.sys_txt a:hover {
text-decoration:underline color: #000000;
}
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
First page CSS code.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
What I've done is change a few things on the page code which was changed from:

body {
margin-top: 0px;
}

TO

body {
margin-top: 500px;
}

AND

margin-left:10px;
padding: 1em;
float:left;
width:645px;
border-left: solid 1px #CCCCCC;
}

TO

margin-left:10px;
padding: 1em;
float:left;
width:645px;
border-left: NONE 1px #CCCCCC;
}

Do i have to remove certain codes? I'm not fimiliar with the custom code. I read through w3schools CSS module.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You don't have to remove any code because applying new code over-writes the old. So if there is no change then don't worry about code that has not been changed.

For this process then:

body {
margin-top: 500px;
}


This following bit looks incomplete can you check this for me please?
margin-left:10px;
padding: 1em;
float:left;
width:645px;
border-left: NONE 1px #CCCCCC;
}


I think that there may be something missing because this wasn't placed between code tags and I can see some "mid-sentence" stuff and wondering if some has been dropped by the forum.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
PS: Custom code is any new or amended code that differs from the template setup. It's a definition that's used by Yola and other places. :)
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok i don't think anything is missing...I've just copied the code above to show you with this one: (I put none in caps to indicate that's what i changed, sorry if it messed you around abit)...here you go...

#content {
/* padding: 1em;
margin-left:200px;
border-left: solid 1px #CCCCCC;
*/

margin-left:10px;
padding: 1em;
float:left;
width:645px;
border-left: none 1px #CCCCCC;
}
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Custom ok.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Try adding this into your HTML widget. I went through the upper code and I think that I have caught it.

<style type="text/css">
body {
margin-top: 500px;
}</style>


<style type="text/css">
content {
margin-left:10px;
padding: 1em;
float:left;
width:645px;
border-left: NONE 1px #CCCCCC;
}</style>
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Please try it out on the test site?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
你可以,但你需要建立起来多一点.

I'll try it now. A few minutes and I'll be back.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I think it's OK on this side Lei ling.

Try this in case the spacing is an issue:

<style type="text/css">
content {
margin-left:10px;
padding: 1em;
float:left;
width:645px;
border-left: NONE 1px #CCCCCC;
}
</style>
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Does not work, strange. i've logged in and out as well and double checked the original code and it's correct. oh dear what now...
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK. We'll get there.

Can you tell me why you say that it isn't working. Specifically what do you or don't you see that makes you know that?
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
The line is still showing on the page and it's gotten longer too. That code is suppose to remove the line. I've pasted into a new html widget like you suggest exactly as it is above. I've then saved the page after it and the line still remains.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK. Try this now:

<style type="text/css">
content {
margin-left:10px;
padding: 1em;
float:left;
width:645px;
border-left: NONE 0px ;
}
</style>
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Nope not working. I've tested it again in the site CSS and it's the correct code. Had to turn CSS on and off again after testing it. Tried putting it in the first html widget and not working too.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
That suggests that we are addressing the wrong element.
Do you mean the vertical line separating the menu items from the body of the page?
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
yes
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
....... or addressing it incorrectly :(

<style type="text/css">
content {
margin-left:10px;
padding: 1em;
float:left;
width:645px;
}
</style>


This has removed the reference to the left border completely .
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Nope still nothing changes. Yes i can see you've removed the border completely. When you try it on the test site does the line disapear?
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
disappear sorry
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes. Gone!

Can you clear your browser cache just in case it is held there?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Oops. I lied or it has returned....

OK I have removed it from the Site CSS. That works so may I ask you if the vertical line is wanted on any other page of yur site?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
If not wanted then add this code to your Site CSS and check that there is no other code in there at this stage. Don't forget to turn the over-rides back on for this to work.


#content {
margin-left:10px;
padding: 1em;
float:left;
width:645px;
}
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Now you should be able to add background images to the pages selectively as there will be no CSS over-rides pushing the initial image that was trapped in the Site CSS previously
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
I figured it out :)

#content {
/* padding: 1em;
margin-left:200px;
border-left: solid 1px #CCCCCC;
*/

margin-left:10px;
padding: 1em;
float:left;
width:645px;
border-left: none 1px #CCCCCC;
}
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
SORRY THIS CODE:

#content {
/* padding: 1em;
margin-left:200px;
border-left: solid 1px #CCCCCC;
*/

margin-left:10px;
padding: 1em;
float:left;
width:645px;
border-left: none 1px #CCCCCC;
}
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
I added this to the beginning:
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
take out the /* ......*/ as this is superfluous and just adds junk to your code. If you have a lot of new code this can slow it down the sum of redundant code I mean. Also take out the "1 px #CCCCCC" as that is redundant because it's referencing something that isn't needed. preferably remove the whole line.
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
great I've done it:)
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
Ok i see it's not showing on here...weird but basically i added the prefix 'style type= text etc with all the little extras as you put it on top and then i ended it off with the 'style' section at the end...:)

现在,我可以去顶之类的,让我为perserverance奖!

Thank you for your patience and assistance. You'll be hearing from me soon as I'll be busy on this site daily haha.

Where are your offices based?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
总理候选人. 不要客气

泰国中部
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
直到下一次
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I think that this has been an excellent exercise in understanding the workings of the Sitebuilder with regard to adding Site CSS and what is called "Internal CSS"
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
True
Photo of Lei Ling

Lei Ling

  • 174 Posts
  • 0 Reply Likes
总理?嗯......泰国吗?不!哈哈谢谢你。晚安。