Solved

Having HTML/CSS problems with free website template

Posted on 2015-01-18
13
218 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
ID: 40557548
Hello...? Anyone please?

Thanks
   Shawn
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40557598
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
ID: 40557603
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
ID: 40558031
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
ID: 40558763
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
ID: 40559084
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40559138
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
ID: 40560819
Thanks Marco, that fancybox looks like a nightmare to implement though...

Shawn
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40560906
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
ID: 40560954
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
ID: 40561306
Also Marco, it appears fancybox is for non-commercial use only...?

Ciao
   Shawn
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40561372
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
ID: 40563216
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS Scroll Issue 3 81
Bootstrap 3 website error 14 45
Need to click button twice to get results 2 32
A form to still have contents even if some are wrong 10 46
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

914 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

13 Experts available now in Live!

Get 1:1 Help Now