Vertical line to blog?

  • 1
  • Question
  • Updated 10 years ago
  • Answered
I've seen a couple of threads on here about adding a vertical line. However, can this be done in the blog section? I want to separate my blog from the sidebar. I've tried adding the htmel, but it just comes up in it's own separate little box. I can't seem to apply the html to the whole page. How do I do that?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
  • frustrated

Posted 10 years ago

  • 1
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello,
If you want the vertical line to stretch the entire length of the screen (or however far down your blog content goes) the best way I can think of how to do this is to:

1. Put a two column widget on the page
2. On one side of the two column widget put another two column widget and add your main blog widget to one of the sides and the other blog widgets to the other side (Recent Posts, Blog Roll, About Me etc)
3. Then looking back at the first two column widget you put on the page, you want to drag the middle line to the right (or left depending on which side you want the vertical line on) until it is quite thin.
4. Now drop an html widget into this really thin side and paste in this code:
<!--<HR width=1, size=500>--> (leave out the <!- - and - - >)

This will make the vertical bar 1 px wide and 500 px long so you may need to adjust these numbers a bit.

I hope this helps, please let us know if you have trouble with it.

Regards,
Emmy
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Sorry.... I must be really dense.. but I don't see a main blog widget or any of the other blog widgets (recent posts, etc...) to add to the column. I know that they are accessible if I go onto the blog page but not on blank page.

If I use the exisiting blog page, can I edit that to include the vertical line? If so, how do I do that?

If I cannot use the existing blog page, then I will need to do the blank page thing but how and where do I find the blog widgets?

I really appreciate your help. Thanks!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Okay... I've been sitting here trying to figure out how to do this. I've succeeded - partially! I did use the existing blog page and just delete all the sidebar stuff for the blog and left the main blog as is. In the section that I deleted all the sidebar stuff, I did the two-column thingy like you said and added the HTML for the vertical bar in one column, and the sidebar stuff back into the other column.

The only thing that didn't work is that the vertical bar doesn't seem to run the length of my blog. Is there a way to have it run continually, instead of giving it a set value?
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hey, great job! To make the line extend farther down your page you will need to edit that little piece of code you put in the html widget. Increase the 500 to something like 600 and see how that looks; if it is too long you can bring the number down or vice versa.

Can you post a link to the page so I can have a look?

Emmy
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I did try that.. but it doesn't seem to work. It's still a short little thing. I put down
Sorry, I meant to put down my link. Here it is: http://ide.synthasite.com/sites/D738/...

I guess there's no code to have the vertical line go indefinitely?
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello,
I took a look at your site and the line looks good, it goes quite a ways down on your page. Did you add something since the last time you posted on this thread saying it was still short?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
This is so strange. I can't see that the line goes all the way down at all. I'm using IE7. I wonder how I can see this?
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
It looks like it is something browser related. I have looked at this in IE7 and see the short line, but in Firefox it is displaying properly.

Does your chunk of code look just like this: <!--<HR width=1, size=500>--> (leave out the <!- - and - - >)

This what displays in Firefox and the line extends to the bottom of the page:
[image removed]

Possibly the code is interacting with the Flash player in your blog post. Are you able to try removing a few things to see what might be impacting the functionality of the the vertical line?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
This is exactly what I wanted! Here's my code (I took out the < >) so that it doesn't actually work.
DIV style="WIDTH: 426px">embed name=rockyou pluginspage=http://www.macromedia.com/go/getflash... src=http://apps.rockyou.com/rockyou.swf?i... width=426 height=320 type=application/x-shockwave-flash quality="high" salign="lt" wmode="transparent">
</DIV

Can you see anything in this code that would interfere with the vertical code?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
littleus,

I very much like your site. Has a really nice family feel about it. Congrats.

As a general tip I try and duplicate content into a trial page and then introduce any novel code there and see if it works. If it does then I bring it into my working pages.

Goodluck.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Peter for the suggestion. I do have a test site that I also use. I flip back and forth. I have not yet told people about this site, so I'm not too worried about people seeing it under construction. =P
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I am still having problems with this issue though! I cannot seem to make my vertical line go down the length of the page in IE7. Can someone please, please help??? I would love to get this site up and running! I need step by step instructions as I'm new at this kind of stuff. Thanks!
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi littleus,

I think that there is one thing that you can do here.

To separate the interaction of your flash player and the vertical line code you need to put in another two column widget.

1. Drag a new two column widget from the sidebar and place it above the original one.
2. Next drag the original two column widget with all its contents into the LHS column of the second widget.
3. Now drag the blog roll widgets and all the stuff in that column into the far RH column. So you now should have your flash player in the far left column two blank columns and your blog widgets in the far RH column.

4. OK now drag the HTML widget containing your code from the LH column to the second column from the left.
5. Drag the first divider from the left to the approximate position that you want it to be, that will include your flash player.
6. drag the second divider up close to the first.
7. Drag your third divider up close to the second.

save, publish, have a look at your page and note if anything needs to be adjusted and back into your editor to make the minor adjustments if needed.

Let us know how it goes. Good luck "littleus"
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
I've tried it as I suggested but no luck it still gives the same result with IE7. I tried it with both a blog page and a standard web page and this makes no difference either.

I then tried the vertical line code by itself and that doesn't work in IE7. Mystery solved I think.

This doesn't help you with a solution. can you leave it for a day and I'll see what other info I can get on making this happen for you.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I don't mind waiting at all. I really hope a solution will come about! Another idea I had was maybe trying to enclose the main blog in a border. I don't know if that will work in IE7 and FF? I don't know the code for that and how to go about doing it. All I care about is creating some kind of visual separation between the main blog and the sidebar. Any ideas are definitely appreciated.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi littleus,

I have placed your player inside a bordered table. Something I haven't done before so I'm hoping. I don't have your files so I can't run it. If you can place it in an HTML place holder and see how it goes.

If it looks as if it's working and needs some alteration get back to me here.

Goodluck.

<!-- table border="1" bordercolor="#d3d3d3" style="background-color:#584504" width="450" cellpadding="3" cellspacing="3">

<tr>

<td><DIV style="WIDTH: 426px">embed name=rockyou pluginspage=http://www.macromedia.com/go/getflash... src=http://apps.rockyou.com/rockyou.swf?i... width=426 height=320 type=application/x-shockwave-flash quality="high" salign="lt" wmode="transparent">

</DIV></td>

</tr>

</table> -->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
While the border around the flash object worked great.. it wasn't exactly what I had in mind! I don't want to necessarily put a border around my flash object but rather apply it to the whole main blog. So that when I put posts in, the whole post is contained by a border. Thanks for trying to come up with a solution. Anything else come to mind that would enable the whole border to be added to the actual post and not just the flash object?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi littleus,

The difficulty with tables is accessibility. It changes the way you have to edit things as you need to go into the HTML level and this really can cause problems. If you overwrite a character of a tag it can throw things into chaos or if you inadvertently include something within a tag then it can crash your page. Been there and cried over that. So I don't think a realistic solution.

If you put the baby in the room and step into the playpen maybe another solution. You could include the blog static widgets like About me, blog roll etc in a table . that would mean that the table was around the RHS items. Other than that you could push for the Firefox suggestion mentioning that your website is optimised for Firefox and put the link for the download there. In fact that's what Synthasite is pushing at this time. FF users are certainly on the increase.

If I come across anything else I'll call it in. I still have to check whether or not the HTML code limitation is related to your template or not. That's a very long shot I think but I should check it.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Okay... check out my journal now... http://littleus.synthasite.com/our-jo...

As you can see, I sorta put my posts in the borders. I used the code given to me for my flash object, and just put in the text. Seems to work! However, it took a lot of fiddling around when I tried to insert the picture or have a long post. I've had to keep pulling the box down to accomodate the length of the post. Is there a way to code it so that the border automatically lengthens as more stuff is put in the box? If so, this is an acceptable alternative for me until Synthasite is able to include border options or vertical lines in the template. Also, how does it look in FF? I don't have this so I can't tell!
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Looking good littleus,

If you have a look here http://www.htmlbasix.com/frame.shtml
and here http://www.quackit.com/html/html_tabl...
A frame generator. All you need to do then is type your text between and
If you cut and paste text to place here, it's a good idea to make sure you don't carry-over any hidden format text from word processors. So either save it as a text file in such a word processor or copy it from the original source, paste it into Notepad and then copy it again from Notepad finally pasting between the tags mentioned
The box length is dynamic. In the editor it looks static but when published it's at optimal size.

You've had a fair intro into some aspects of HTML. This is good learning and should allow you to use many other aspects of HTML .

The two sites I mentioned are great resources and

Boomers website http://forsite.synthasite.com,
Gamedemons site: http://webmasteruniversity.co.cc
Ed's site: http://honeybearplayhomes.com

all have some really good tutorial type stuff in their sites. They are very experienced Synthasite users and their instruction and tools work well in Synthasites.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Great! What about inserting any images and flash objects? Do I also insert between the and ?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I used the quackit html generator. It worked great!! Now, I didn't exactly do what you said though about copying the code to notepad, etc... I just copied the generated code and pasted directly to the html in the blog. Then, I clicked on the html button to just work on the body page. I just typed away. It seems to have worked. When I wanted to enter in my photo, I just went back into the html editor and typed in the link for it.

The big question is, even though I see that it worked.. do you??? I don't know if I'm screwing something up because I didn't follow all the steps. Also, can you please let me know if it worked on FF? If this really did work, I thank you ever so much!!
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
I wasn't clear in my statements. Apologies. I meant if you copy text from a word-processor into the frame to publish as text, then you must do the cut-paste-cut-paste thing, not meaning when you are copying the generated code. Word processors tend to add all sorts of hidden formatting tags which really can demolish your page.

I checked out FF and Chrome. they work a treat.
Do yourself a favour as a webmaster using synthasite and download Firefox. You won't look back. http://www.mozilla.com/en-US/
[image removed]

The top image is from Firefox and the lower is from Chrome.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Forgot to put in a space :(
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Forgot to put in a space where?

Thanks so much for your help! Truly do appreciate it!
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Between the two screen captures. Just for separating the two images. Nothing important.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Oh.. lol.. okay! Thanks again for everything!! Really really appreciate it.

Can someone please remove the screenshots in this thread? Thanks!