How to edit a style template?

  • 1
  • Question
  • Updated 10 years ago
  • Answered
Is it possible to slightly edit a style template?

I've made a wedding website for our forthcoming celebration next year. The nicest style is 'Decayed' with a nice flowery border. The only thing is it has a skull and crossbones in the top right corner. I found this quite funny and named the site " 'Til Death Do Us Part!"
Unfortunately, my partner and my sister do not think this is appropriate for mass family consumption, and really like that particular template but without the skull and crossbones.

The way I see it there are two options:
1) edit the template using something like paint on a pc
2) put something over it

I don't know if it's possible to do no. 1 and I can't seem to put a photo over it.
Is this possible?

Thanks
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
  • frustrated

Posted 10 years ago

  • 1
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Almost done!
Little us Any suggestions as to how I get rid of the white space at the bottom?
Increasing the height px doesn't help

(The bottom column still uses the original 'table' code)

Thanks a million!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Are you talking about this?



Have you tried just adding blank spaces after your widget on the bottom? This will make your box grow longer or does this just push everything down?
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
yes that is one of the gaps I'm on about. Followed your sugestion. In order to add blank spaces after the widget I tried putting a text widget at the bottom, after the mp3 player and it simply pushes everything down.

Also, I couldn't insert the text widget within the purple box, it refuses to go anywhere other than in the blank space at the bottom. Seems odd, since as I said, spaces in this text widget pushes everything down in the purple box above it.

screenshots including
1) the pushed down space after the mp3 player caused by the text widget at the very bottom

2) details as seen in site manager (or editor window as I called it incorrectly!)


3) the other gap after the countdown widget - where in the code (3 replies back) should I try sticking the spaces?

Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
I hope this is clear! Check the happy couple, aren't we handsome, my my!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Lemme answer the easiest question first - make your boxes line up evenly, give them both a definite height. So, after the width: 400px; then add height: 400px;" It would look like this:

<div style="border: 1px solid black; padding: 10px; background-color: rgb(93, 196, 211); text-align: center; width: 450px; height: 500px;">

This table code that I used was for CleanSlate - 1 column layout. I've never tried it in the other templates so I'm not sure how it interacts. Perhaps the easiest thing for you to do is to simply switch to CleanSlate?

I will continue fiddling around with the table code to see if I can get rid of that gap.

Also.. always preview your site - how it looks live may differ than how it looks in your site builder!

For example:

My Deja Vu Apparel Store - this is how it looks in the site builder:



However, published it looks like this:



The other option that you could do is simply switch from the table code to the div code and see if that makes matters easier?
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Excellent! Thanks, I've got the boxes lining up now!

I'll stick to the div code from now on. I can't really be bothered redoing it for div code on my index page . I guess if I have to, I can live with the gap!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
I've been playing around with the code on the Burlap.. and I'm getting the same results as you.

I switched over to CleanSlate and it looks a lot better! Can you try this and see if it's still to your liking using the CleanSlate?
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
It tried switching to CleanSlate. It removes the gap! Unfortunately my template does not agree with cleanslate, as the banner obscures the head design and title!

If it's turning out to be too much hassle then that's fine. Everything else has been ironed out and it looks grand. I think I can live with the gap!

It is strange though, that this only occurs on the index page.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
RESULTS

Please see my example website showing my results of this thread
http://undecayed.yolasite.com/
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
In the end, I'm too much of a perfectionist. Decided to give it a go and the gap goes using the div code!!

Only thing is it won't let me delete the old muck, even though it says 'widget deleted' it doesn't actually do it
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
I'm not sure what you mean by not deleting the old muck. Can you post a screenshot again to display what you're talking about?
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
why won't it delete those old widgets?
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Try this trick... try changing your layout to a 2-column layout. Drag the widgets you want deleted to the right hand column. Then try to delete in that column. Then switch back over to your normal layout.

If that doesn't work, then try dragging it completely of the table box so that comes up underneath your content and delete it that way.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Thanks again LittleUs!!!
The principle of that trick worked. I had to keep changing layouts after one or two successful deletions.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Great! The code is a bit wacky! Sorry for all the trouble.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
It's not your fault it's a hassle! It's partly my fault for desiring it a certain way. Now I just have to sort out getting the google maps widget code. (I think I know how to do this!)
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Littleus, another problem for you to have fun trying to solve!

The div code for the boxes is much easier to use.

My latest problem is getting the google map widget to work within it.

I used the google map widget on a seperate page, and previewed it, then grabbed the code by viewing page source in firefox.

I then took the code and embedded it in the appropriate place in the div code.

Everything looks great when you preview it, you get the map in the box! I thought brilliant, I'm getting good at this.

But when going to the site directly, as others would, an error 404 occurs right where the map is supposed to be.

In order to come up with a compromised solution I made a seperate page called Maps and using the 'table code' with the google maps widget beneath it, and the map displays in the box.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
The error 404 code comes up because the link url path is not correct. Can you please double check to see that the link path is in fact right?
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
it's definitely correct. I didn't type anything, I copied and pasted the code. It works fine if you put it in a html widget. But the 404 occurs only when embedded in the 'div code' box (where you said YOUR TEXT,IMAGE,WIDGET CODE GOES HERE)

Also note that it works when previewed!

The error only happens when you go to the site directly.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Do you mind give me the code you used and I'll try it out?
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
here is the code obtained by putting in 'cairncastle ballygally' in the google map widget search. It is possible that I've got the wrong bit of code, but that's unlikely as it works using the table code you previously provided. (see my website, maps section)

sorry code to follw, I forgot to encode it.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
</div><div id="I49" style="display:block;clear: both;text-align:center;" class="GoogleMap_Default"><iframe src="/ide/widgets/googlemap/simplemap.jsp?coords=54.897778,-5.871254&zoom=12&size=2" frameborder="0" scrolling="0" style="width:300px; height:300px; border:none;"></iframe></div></div>
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
This is your map on your site?



I think the problem is viewing it in Internet Explorer.

Lemme work on it and see if I can have it so that the map works in both browser.

Can you please give me the original source of where you got the googlemap from?
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
that was the original source code as far as I know - I had to cut and paste it from viewing the source code through firefox, as the google map widget doesn't display the code.

sorry I don't think I was clear (I'm using firefox by the way). Yes, that is the map on my site - on a seperate page rather than homepage as a work around to this problem.

Hopefully this will be clearer:

1) I got the google map by using the google maps widget (see content/maps in sitebuilder). This then displays on website.

2) By then viewing the source code through firefox I could copy the code

3) however, I want to display it in the boxes you've been helping me make.
so when using your div code I put the source code in the right place and then get the error 404 (it actually works great in the preview but not when acsessing website url directly)

4) as a work around, I knew that your Table code (the older first code we were using) would allow the maps to display in a box) so I reverted to that on a seperate page.

I think you might have to test this out to see what I mean, if you want to. Otherwise we can just leave it as it is!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Try this:

<div style="border: 1px solid black; padding: 10px; background-color: rgb(93, 196, 211); text-align: center; width: 300px; height: 400px;"><br><br><iframe src="/ide/widgets/googlemap/simplemap.jsp?coords=54.897778,-5.871254&amp;zoom=12&amp;size=2" style="border: medium none ; width: 300px; height: 300px;" scrolling="0" frameborder="0"></iframe></div>

I was able to get it to show up in both Firefox and IE.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
By the way, you won't see the map in your site builder, but you should see it on your preview.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
I will try this but before I do. Did you try typing in your url and acessing the site directly?

Reason I ask is, I too couldn't see it in site builder, but could in preview (but thats the last time I trust 'preview' into allowing me to think everything is hunky dory) as when I acessed directly, I got the error 404s.

I'll let you know my result
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Still get error 404 - when accessing url directly. I think you will now know what I meant. Sorry I didn't explain it clearly
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
I'm not sure I understand Lawrence.

When I type in your site url, I am taken to your homepage. Then, when I click on your map, I'm taken to your map page. This now works for both IE and FF. Is this what you mean?
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
your revised code above produces this: www.lawlynswedding.yolasite.com/test
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
You're also right the code is totally wacky. A gap has suddenly appeared on my more info page! It was displaying ok earlier today! and that's using the div code (not the table code that previously caused the problem)! However, the Maps page uses the table code and no gap!!

mysterious
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hmm... that is mysterious! LOL.... I'm sorry bud.. I think I'm just about all out of tricks. I really think it has to do with the template you are using. I don't know why a div code would make a gap appear though. That is very strange. Have you tried making the height bigger to close the gap?
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
I'm never using Burlap again!!!!!!

I've now got rid of the gap by deleting the page. And making a new one and going back to your Table code (so that when I add things in future it'll all come in the one box) And check it, there's no gap.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
You've put in so much work! Your wife-to-be I'm sure is appreciating all that you've done so far. I hope things will go more smoothly now that you've changed templates.

I would suggest creating a customized banner. Picnik has a cool feature where you can add pictures to your banner. For an example, look at my http://littleus.yolasite.com

If you do a customized banner, then you do not need the page header anymore.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
I don't understand.. did you copy the code correctly?

This is what I get:



This is what I see on your site:

Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
what you see on my site is correct (that is because instead of using div code, I'm using the table code (the first code you provided).

did you look at www.lawlynswedding.yolasite.com/test?
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Yes.. I did look at that one and I see the error. However the other screenshot (the one with the blue background) that I showed which is on my test site is using the div code.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Go back into your html.. and make sure that everything is on one line. Try that and see if this works.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
It doesn't make a difference. what's the url for your test site and map and I'll see if I see what you see!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
It doesn't work either - I see error 404 on your site, I think you may have been trusting the preview!!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
My apologies Lawrence. You'll need to go directly to google maps: http://maps.google.com/ Then click on "links" and copy the embed code and replace the old iframe with this new one.

Now you can see it working on my test site: http://littleustestsite.yolasite.com
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
I knew you'd solve it!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
lol... you certainly put me through a wringer! Just kidding... but I'm sure glad it got resolved. Whew!
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
no wonder you're a champ!
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
no wonder you're a champ!
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Little Us
site finished for now.
I will consider personalising the banner, when I've got more time but for now we quite like the orchid.

Thanks for all your help

Please take a look when you can, you'll see I've added a few things.