Solved

Having HTML/CSS problems with free website template

Posted on 2015-01-18
13
215 Views
Last Modified: 2015-01-21
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
Comment
Question by:shawn857
  • 6
  • 4
  • 2
  • +1
13 Comments
 

Author Comment

by:shawn857
Comment Utility
Hello...? Anyone please?

Thanks
   Shawn
0
 
LVL 30

Expert Comment

by:Marco Gasi
Comment Utility
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
 
LVL 34

Expert Comment

by:Dan Craciun
Comment Utility
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
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
Comment Utility
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
 

Author Comment

by:shawn857
Comment Utility
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
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 30

Expert Comment

by:Marco Gasi
Comment Utility
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
 

Author Comment

by:shawn857
Comment Utility
Thanks Marco, that fancybox looks like a nightmare to implement though...

Shawn
0
 
LVL 30

Expert Comment

by:Marco Gasi
Comment Utility
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
 

Author Comment

by:shawn857
Comment Utility
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
 

Author Comment

by:shawn857
Comment Utility
Also Marco, it appears fancybox is for non-commercial use only...?

Ciao
   Shawn
0
 
LVL 30

Expert Comment

by:Marco Gasi
Comment Utility
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
 

Author Closing Comment

by:shawn857
Comment Utility
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now