Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 237
  • Last Modified:

Having HTML/CSS problems with free website template

Well, I guess I shouldn't say "problems"... I just don't know how to do a couple of probably simple things. I downloaded this free template I found:

http://all-free-download.com/free-website-templates/top_business_template_817.html

... and am trying to make a few modifications to it. I know some HTML but not so much about CSS - I guess that's what is tripping me up. Basically I'm a little stuck on two things that I'd like to do:

(1) At the top where it shows the pie chart logo and says "TopBusiness" ... I'd like to be able to get rid of all that "TopBusiness. Runs Faster, etc etc" text and just keep the logo. When I try to make mods to do this, it throws everything below that point out of whack.

(2) At the right where it says "Sidebar menu", just below that I'd like to be able to have a youtube video. I tried to "embed" some HTML code in there to do it, but it didn't work - wouldn't even display anything. If possible, I'd just like to show a small "preview" of the video screen here (cause this sidebar is not very wide), and when the user clicks to run it, it launches the video in another browser window... or any other viewing method which won't throw off the overall look and width of the website.

Thanks to all!
    Shawn
0
shawn857
Asked:
shawn857
  • 6
  • 4
  • 2
  • +1
1 Solution
 
shawn857Author Commented:
Hello...? Anyone please?

Thanks
   Shawn
0
 
Marco GasiFreelancerCommented:
To remove the text below TOP Business, just delete the element <small> then you have to chenge the height of the <cufon> element.

The height is set inline,  so you can just change it in the inline markup and set it to 44px; or it is added by a javascript. In this case you'll have to look at javascript files involved in your template to check what script adds the height to the cufon  or cufon-canvas element.

About the video, I would have to download the tamplate and try it and maybe I can do it later.
0
 
Dan CraciunIT ConsultantCommented:
1. Don't mess with the CSS. Just delete the <h1> under the logo div and create your own <h1> with the name of your business. As long as it's longer than 1 character, the design will hold.
You will need something there anyway, as the empty space between the logo and the top menu is not pretty.
2. Add a new <h2> below the sidebar ul with the text Videos or whatever, then below that add your snapshot/image with a link to the full video. Just make sure the image is under 180px wide.

HTH,
Dan
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Slick812Commented:
greetings shawn857, this template is some what dependent on the contents of elements to size properly, , ,

anyway, All I did was to replace the the TEXT in the <div> of class "logo" in the header section  -
<div class="header">
with spaces and non breaking spaces, I had to add a second line with a <br /> to get the separator to be in line properly, as shown below -

<div class="logo">
  <h1> &nbsp;<br /> &nbsp;</h1>
</div>

Open in new window

0
 
shawn857Author Commented:
Thanks to all. Dan, for the top logo portion I had to go with Slick's solution as I needed all text gone (or at least invisible) from that h1 line. Thanks Slick. Marco - like Dan mentioned, I'm very leery to mess with the CSS, lest I get myself in real trouble.
   For showing the video, instead of opening another clunky browser window to view it once the snapshot/image is clicked, would there be some kind of nice fancy "pop-up" type viewer?

Thanks!
    Shawn
0
 
Slick812Commented:
OK, shawn, , you ask about a "pop-up type viewer", you are right about the "clunky browser window" that kind of display is very out of date. . These newer "pop-up" are created as a <div> overlay on top of the html page. You set the div to be invisible at first with CSS  display:none;  , then in a click event in JavaScript , you change the css style of display to block , and you can see the hidden div.

some example HTML css for that -
<div id="pop" style="position:absolute; top:24px; right:56px; width:428px; display:none; border:solid 1px #44a; padding:3px;">
<object width="420" height="315"
data="http://www.youtube.com/d/X36By3_C8k">
</object>
<br />
<img style="cursor:pointer;" src="images3/xoff.gif" width="21" height="21" onclick="hide('pop');" />
</div>

Open in new window


however, this takes some coding to get it to work correctly.

I looked for some pre coded and tested overlay pop-ups in a web search, but they are mostly for an image "LightBox" gallery stuff. I do not use those, so I do not know what to tell you.

I have seen that very many here on EE, both questioners and experts use the Jquery "dialog" pop-up, you can read about it at -
      http://jqueryui.com/dialog/

I do not personally recommend that one, but it has many options.
0
 
Marco GasiFreelancerCommented:
U apologize for my firt comment: I didn't read accurately enough your quetion.
About the video popup, you can ue jQuery Fancybox. It' eay to implement and it can display pictures, inline and ajax content and video: look at examples in the page linked above.
0
 
shawn857Author Commented:
Thanks Marco, that fancybox looks like a nightmare to implement though...

Shawn
0
 
Marco GasiFreelancerCommented:
A nightmare?. Go here: http://fancyapps.com/fancybox/ and look at Extended functionality section, Media Helper.
This the code to show a video:

javascript:
$(document).ready(function() {
	$('.fancybox-media').fancybox({
		openEffect  : 'none',
		closeEffect : 'none',
		helpers : {
			media : {}
		}
	});
});

Open in new window


HTML:
<a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a>

Open in new window

It doesn't look like a nightmare, doesn't it?
0
 
shawn857Author Commented:
Marco, I don' t know anything about javascript - that's all greek to me. Where do I put that javascript code... right in my HTML file? Or do I put it in a separate ".js" file and call it from my HTML file?

Thanks
   Shawn
0
 
shawn857Author Commented:
Also Marco, it appears fancybox is for non-commercial use only...?

Ciao
   Shawn
0
 
Marco GasiFreelancerCommented:
Yes, is for non-commercial use but for a single site it costs just $ 15,00, which is a really cheap price, I think.
But the problem seem to be another here: you're trying to build a commercial web site knowing a bit of html a few of css and nothing of javascript. Unfortunately, uing a template is always than trivial you can believe because always you want to do some change to customize it and there you need some more knowledge. o you might to conider to stop the job and to take your time to learn about css and javacript: I can grant which thank to jQuery you can get great results with javascript without become crazy. Css also is easy, if you don't want to make advanced layouts.
Good luck with your project.

Cheers
0
 
shawn857Author Commented:
Thank you Slick... and thanks to Dan and Marco for their contributions also. Regarding the video embedding - I think I'm just going to pay for the service at Videolightbox.com. It's pretty easy to use.

Thanks!
   Shawn
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now