How to edit a style template?

  • 1
  • Question
  • Updated 9 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 9 years ago

  • 1
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
I think it is pretty funny too....Thought of using one of the styles that will allow a background and banner that you can upload?
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Thanks John for sharing my sense of humour, and suggestion.
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
I have backgrounds I created that you would be welcome to use but not sure any of them fit a wedding motif....http://kanthaidecor.com/backgrounds.php
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 Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Lawrence

I can understand now wanting the skull and crossbones as part of your wedding motif!

Unless you're skilled at manipulating css, I think you'd be better off finding a different template.

There are a few templates that allow for customized backgrounds. Please refer to the Yola Style guide: http://www.yola.com/yola-style-guide to see which templates allow for that option.

You could do something like this: http://littleus.yolasite.com but it would require a bit of work.

If this is something you do want to try, please let me know and I can help you through the steps.

If you are looking for something that is easily put together, then please do use the style guide to try and find something that would better meet your needs.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Thanks Littleus. I'm willing to work on it a little. I like your retro design. I had just an idea that I may be able to take a screenshot of the nice bits of the decayed template and perhaps I could then use them in making a customised background / banner?

What are the basic steps - just an outline and if I have any problems filling in the gaps I will contact you. thanks again
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Lawrence

I'm going to refer you to this other thread as I give the steps there for another user. I don't know if this will meet your needs.. but you can give it a try! =)

http://getsatisfaction.com/yola/topic...
Photo of adam

adam

  • 100 Posts
  • 0 Reply Likes
HOW CAN YOU MAKE A WEBSITE LIKE WWW.LITTLEUS.YOLASITE.COM I LOVE THE MENU
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Well this has made my evening. Decayed is one of our most popular styles, and I have seen many surprising uses of it, but this is a new one, even for me!

Lot's of great suggestions, but Lawrence, I must agree that your only way out here is to select a new style!

Good luck with your wedding plans!
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Am glad this made your evening
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Am glad this made your evening
Photo of KK

KK

  • 25 Posts
  • 0 Reply Likes
I'm interested in knowing more on this too, for this template and others.
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi KK - post your question here and we will help you.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Lawrence

I'm just wondering how you're doing with your website?
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Hi little us.

I've been playing around and got on ok, but it has taken a long time! Partly because I've only been using Preview to edit the Decayed pattern to use as a border. I've used your code for the boxes and have just been playing around getting the right size and colours.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I can't wait to see what you've done! =)

I was playing around for a bit - don't know if you like it.. but take a look on the homepage:

http://littleustestsite.yolasite.com
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Awesome! So kind of you to do this, Littleus!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Monique.. even if Lawrence doesn't like it, it sure has given me some great ideas to try! =)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
The picture comes out fuzzy because you've enlarged it from the original size. Keep your original size dimension and the quality of the picture will come out clearer.

Did you splice the original template and then put it all together? If you did, you may just have to crop each splice a little smaller to get rid of the border.

You cannot change the title font. What you can do is create your own banner with your own colors and font and upload that.
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
This thread is taking fascinating twists and turns. I love how both Lawrence and Littleus you have used the Decayed style as a starting point and got creative with it.

Thanks for posting - I am sure it will give lots of people interesting ideas!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Point of clarification here... I did not use the Decayed template. I just merely wanted to show Lawrence that using a customizable template, you can get many different results. =)
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Yes, but I thought the curls and swirls provided some inspiration for your new creation :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Yes.. that part is very true! =)
Photo of adam

adam

  • 100 Posts
  • 0 Reply Likes
how do you get creative with a style
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm not exactly sure if I'm answering your question correctly, but the way I have seen people get creative is through their customization of backgrounds, banners, and menus.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Littleus, I agree with Monique that you've been very kind: this stuff is time consuming. And I do like your example, I'm sure someone will ask you if they can use it! I'm still keen on the decayed theme and have a few bits to tidy up.
I don't have any drawing software to create my own design and have just been using Skitch to take a screenshot, and Preview on my macbook to put it all together using cut&paste. I just did it by trial and error to get a correct fit on the template.

I didn't actually enlarge the photo which is why I'm still baffled but will just redo compression and upload.

Again, thanks a lot for all your help. I really appreciate it and I hope this is helpful to others.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Also, sorry for my delays in replying, inbetween this I've been busy with the usual humdrum!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm glad that it's coming together! As for the photo.. did you by chance when you inserted the image onto your page, you dragged the image bigger? This would cause the image to enlarge.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Littleus, I'm not sure what you mean by splicing the template.

I'm now using the Burlap template. I'm using your html code for the main box of the template (and little boxes within) and have googled for suitable colours as below.

However, there is misalignment as circled in this screenshot

I then tried reducing table width=850 all the way to 1 and still no difference. I don't know html!

Any ideas as to why this is happening?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Try changing the width=850 to width=100% to see if that works.

As for splicing.. I meant you were take the original decayed template and cutting it up. You should try to overlap a bit. The grey lines probably show up cuz that's the edge of your "cut" pieces.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
yep, I'm planning to paste a plain bit of purple over those nasty lines!
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
tried width=100%, atleast it has changed! But now is too small. see post below for screen shot
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Also, if I do decide to keep the page heading, is there some html I could use to centre it?

I tried this:
The Wedding of Lawrence & Lynsey

but no joy. I really should learn some html to save you time!

Cheers
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You cannot alter the page heading at all. What you see is what you get. Perhaps a better way to go is to create your own banner. If you look at my example I posted above, that is a banner that I created - it's not part of the template.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
ok doke. I'll get to the banner later!!
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
hmm, there is something wrong with the index/home page as I tried using your html code on the more info page, and by changing the width from 850 to 920 it lines up fine.

????????is it to do with the countdown widget taking up so much space?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
That may be the cause of it. I'm not sure. I'll have to try it myself to see if I have the same results. What style template are you now using.. and can you post your code here for that countdown widget. I'll give it a go and see what happens. If you post your code.. go to this place first to encode it: http://forsite.synthasite.com/encoder... Then paste on here. I'll try my best to get back to you tonight.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Littleus thanks for all your help
width=100% resulted in too small a box as in this screen shot
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
One other thing you could try is changing the table width=100% - give it a definite parameter of 950px. That line is the very first one that you see. And then change the other width=850 to match 950px

<table width="100%" height="100%" border="5px" bordercolor="#d37961" align="center" cellpadding="0" cellspacing="0" bgcolor="#e9e0c5" class="outline"> <table style="border: 5px solid #d37961" bgcolor="#e9e0c5"><tr> <td valign="top"><table width="850" height="10" border="0" cellpadding="0" cellspacing="0" background="%20"> <tr> </tr> </table>
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I did not have any problems with inserting a widget. Would you mind explaining to me the method in which you are inserting your widget? Here's a screen shot of the widget in the box.

Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Thanks for doing this in my absence.

It seems the problem arises using the 2 over 1 column layout.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Here you go.. that should do the trick. You may need to adjust the table width=400 part to make sure it fits exactly right.

<table width="100%" height="100%" border="5px" bordercolor="#d37961" align="center" cellpadding="0" cellspacing="0" bgcolor="#e9e0c5" class="outline"><table style="border: 5px solid #d37961" bgcolor="#e9e0c5"><tr>
<td valign="top"><table width="400" height="10" border="0" cellpadding="0" cellspacing="0" background="%20"><tr><div align=center><embed pluginspage="http://www.adobe.com/go/getflashplaye...;
src="http://www.yourminis.com/Dir/GetConta...;
FlashVars="color=&dstring=7%2F23%2F2010qQq00qQqUntil%2BWedding%2BDayqQqqQq00&uri=yourminis%2Fbrentviljoen%2Fmini%3ASynthaSiteCountDown&swfurl=%2Fwidget%5Fcountdown%2Eswf&width=200&xwidth=210&height=200&xheight=210&"
type="application/x-shockwave-flash" allowScriptAccess="always" wmode="transparent" width="210" height="210"></embed> <br /><a title="For more widgets please visit www.yourminis.com&quot; href="http://www.yourminis.com/index_minis....; target="_blank"><img border="0" alt="For more widgets please visit www.yourminis.com&quot; src="http://www.yourminis.com/images/power...;
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Lawrence.

I took the liberty of creating this for you - it's the same as yours or very similar but with no lines. Take a look here: http://littleustestsite.yolasite.com/... Do you want the background to use for your site?
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
thats very kind, yes that would be great.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Lawrence... I'm about to close down for the night.. But, before I go, I wanted to give you this code. This is much easier to manipulate than the table thing I gave you. If you add this code through the HTML on the text widget, then you can actually type and add images in the text widget box. For any widget codes you want to include, then you'll have to go into the HTML and insert it where I've indicated. You'll have to adjust the width size. I hope I make sense!

<div style="border: 1px solid black; padding: 10px; background-color: rgb(93, 196, 211); text-align: center; width: 450px;">YOUR TEXT, IMAGE OR WIDGET CODE GOES HERE</div>

For the background image, please use the contact form on my site: http:dejavuapparel.yolasite.com/contact

Thanks.
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Makes perfect sense. Took me a while to notice the small html & add image buttons on the text widget!

Excellent - works for the image.

For some reason the countdown widget will not go inside the box?
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
I ended up getting rid of the lines also as haven't been able to sleep tonight
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
<div style="border: 5px solid #4F2F4F; padding: 10px;
background-color: #CC99CC; text-align: center; width:
430px;<!-- SpringWidgets | doublek wedding (#33874) | HTML | Generated on 06/07/2009 --><object type="application/x-shockwave-flash" allowNetworking="all" allowScriptAccess="always" allowFullScreen="true" height="400" width="350" id="springwidgets_33874" align="middle" data="http://downloads.thespringbox.com/web...; classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/... name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="movie" value="http://downloads.thespringbox.com/web...; /><param name="flashvars" value="param_eventTitle=Wedding+Day&param_eventDate=07-23-2010&param_eventTime=14%3A00&param_counterStyle=modern&param_linkUrl=http%3A%2F%2Fspringwidgets.com%2Fwidgetize%2F71&param_eventSkin=Sticky+Note&param_eventCustomSkin=http%3A%2F%2Ffarm4.static.flickr.com%2F3106%2F2388416471_c12d2eefee_m.jpg&param_counterX=0&param_counterY=0" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgColor" value="0x000000" /><embed bgColor="0x000000" allowNetworking="all" allowFullScreen="true" allowScriptAccess="always" src="http://downloads.thespringbox.com/web...; flashvars="param_eventTitle=Wedding+Day&param_eventDate=07-23-2010&param_eventTime=14%3A00&param_counterStyle=modern&param_linkUrl=http%3A%2F%2Fspringwidgets.com%2Fwidgetize%2F71&param_eventSkin=Sticky+Note&param_eventCustomSkin=http%3A%2F%2Ffarm4.static.flickr.com%2F3106%2F2388416471_c12d2eefee_m.jpg&param_counterX=0&param_counterY=0" quality="high" name="springwidgets_33874" wmode="transparent" width="167" height="189" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflash... style="font:11px/12px arial;width:167px;"><a href="http://www.springwidgets.com/widgets/...; target="_blank" title="Get this widget!">Get this widget!</a></div>
Photo of Lawrence

Lawrence

  • 49 Posts
  • 0 Reply Likes
Oh, now that the code is almost side to side with LittleUs' original, I've noticed the problem: in the above " is missing after 430px: