Solved

Having HTML/CSS problems with free website template

Posted on 2015-01-18
13
227 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 35

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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 34

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 34

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
 
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

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.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

688 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