Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
Like Tree1Likes
  • 1 Post By turboguy

Thread: New to forum and need some web build help

  1. #1
    Junior Member
    Join Date
    Aug 2016
    Posts
    9
    Member #
    54871

    New to forum and need some web build help

    Hi, I have some basic knowledge in editing website and in the base I have been able to edit / modify to what I need, but now I am somewhat out of depth and need some if not a lot of help.

    I bought a template that is html, CSS and JS, I want to modify this for my new website. At the current moment, I have issue change the font(s) to meet my current brand. The pages are link between html and I believe css(which I believe is for wordpress, which I hope I don't need because I want html only)

    At the moment all I want to do is change the font in the html file(s) and the string file but ever time I do the page doesn't load properly

    Below is the code for the string followed by html, the fonts I want to use are lucida fax and Penelope Ann

    Any help would be much appreciated!!



    String Code:

    @font-face {
    font-family: 'cosy';
    src:url('fonts/cosy.eot?726wjs');
    src:url('fonts/cosy.eot?#iefix726wjs') format('embedded-opentype'),
    url('fonts/cosy.woff?726wjs') format('woff'),
    url('fonts/cosy.ttf?726wjs') format('truetype'),
    url('fonts/cosy.svg?726wjs#cosy') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    [class^="icon4-"], [class*=" icon4-"] {
    font-family: 'cosy';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    .icon4-noun_7231:before {
    content: "\e612";
    }
    .icon4-chevrons:before {
    content: "\e600";
    }
    .icon4-cross92:before {
    content: "\e601";
    }
    .icon4-down126:before {
    content: "\e602";
    }
    .icon4-eyeball5:before {
    content: "\e603";
    }
    .icon4-facebook23:before {
    content: "\e604";
    }
    .icon4-fullscreen6:before {
    content: "\e605";
    }
    .icon4-google116:before {
    content: "\e606";
    }
    .icon4-heart365:before {
    content: "\e607";
    }
    .icon4-instagram12:before {
    content: "\e608";
    }
    .icon4-leftarrow23:before {
    content: "\e609";
    }
    .icon4-pause49:before {
    content: "\e60a";
    }
    .icon4-pinterest3:before {
    content: "\e60b";
    }
    .icon4-play87:before {
    content: "\e60c";
    }
    .icon4-shop34:before {
    content: "\e60d";
    }
    .icon4-shopping111:before {
    content: "\e60e";
    }
    .icon4-squares30:before {
    content: "\e60f";
    }
    .icon4-twitter1:before {
    content: "\e610";
    }
    .icon4-up7:before {
    content: "\e611";
    }


    HTML Code:

    <!DOCTYPE HTML>
    <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

    <!-- Begin Head -->
    <head>

    <meta charset="utf-8">
    <title>Uno Photography</title>

    <!-- Begin Meta Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="A Photography Template by CodeSymbol"/>
    <meta name="keywords" content="HTML, CSS, JavaScript, Responsive, Photography"/>
    <meta name="author" content="CodeSymbol"/>
    <!-- End Meta Tags -->

    <link rel="icon" href="images/favicon.ico" />

    <!-- Begin Stylesheets -->
    <link type="text/css" rel="stylesheet" href="css/reset.css">
    <link type="text/css" rel="stylesheet" href="includes/entypo/style.css">
    <link type="text/css" rel="stylesheet" href="includes/icomoon/style.css">
    <link type="text/css" rel="stylesheet" href="includes/font_awesome/font-awesome.css">
    <link type="text/css" rel="stylesheet" href="includes/cosy/style.css">
    <link type="text/css" rel="stylesheet" href="js/jquery-ui/jquery-ui-1.10.3.custom.min.css">
    <link type="text/css" rel="stylesheet" href="js/flexslider/style.css">
    <link type="text/css" rel="stylesheet" href="js/Magnific-Popup/magnific-popup.css">
    <link type="text/css" rel="stylesheet" href="js/mb.YTPlayer/css/YTPlayer.css">
    <link type="text/css" rel="stylesheet" href="css/animate.min.css">
    <link type="text/css" rel="stylesheet" href="css/dark.css">
    <!-- End Stylesheets -->


    </head>
    <!-- End Head -->


    <!-- Begin Body -->
    <body>

    <!-- Begin Loader -->
    <div class="loader" data-background-color="#000000" data-text-color="#ffffff">
    <p>LOADING</p>
    <span class="circle"></span>
    </div>
    <!-- End Loader -->

    <!-- Begin Content -->
    <div class="striped-slides">

    <!-- Begin Logo container -->
    <a href="index.html" class="logo-container">
    <img src="images/logo2.png" alt="">
    </a>
    <!-- End Logo container -->

    <!-- Begin Columns -->
    <div class="cols cols-3">

    <div class="flexslider col no-nav">
    <ul class="slides">
    <li style="background-image:url(images/home/h2_1.png);"></li>
    <li style="background-image:url(images/home/h2_1.png);"></li>
    <li style="background-image:url(images/home/h2_1.png);"></li>
    </ul>
    </div>

    <div class="flexslider col no-nav">
    <ul class="slides">
    <li style="background-image:url(images/home/h2_1.png);"></li>
    <li style="background-image:url(images/home/h2_1.png);"></li>
    <li style="background-image:url(images/home/h2_1.png);"></li>
    </ul>
    </div>

    <div class="flexslider col no-nav">
    <ul class="slides">
    <li style="background-image:url(images/home/h2_1.png);"></li>
    <li style="background-image:url(images/home/h2_1.png);"></li>
    <li style="background-image:url(images/home/h2_1.png);"></li>
    </ul>
    </div>

    </div>
    <!-- End Slides -->

    </div>
    <!-- End Content -->


    <!-- Begin JavaScript -->
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="js/modernizr-respond.js"></script>
    <script type="text/javascript" src="js/cookie.js"></script>
    <script type="text/javascript" src="js/retina.js"></script>
    <script type="text/javascript" src="js/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/scrollTo-min.js"></script>
    <script type="text/javascript" src="js/easing.1.3.js"></script>
    <script type="text/javascript" src="js/appear.js"></script>
    <script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
    <script type="text/javascript" src="js/jflickrfeed.min.js"></script>
    <script type="text/javascript" src="js/flexslider/flexslider.min.js"></script>
    <script type="text/javascript" src="js/isotope.min.js"></script>
    <script type="text/javascript" src="js/queryloader2.min.js"></script>
    <script type="text/javascript" src="js/gmap.min.js"></script>
    <script type="text/javascript" src="js/nicescroll.min.js"></script>
    <script type="text/javascript" src="js/fitvids.js"></script>
    <script type="text/javascript" src="js/Magnific-Popup/magnific-popup.min.js"></script>
    <script type="text/javascript" src="js/mb.YTPlayer/inc/mb.YTPlayer.js"></script>
    <script type="text/javascript" src="js/mousewheel.min.js"></script>
    <script type="text/javascript" src="js/lazyload.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
    <!-- End JavaScript -->


    </body>
    <!-- End Body -->

    </html>

  2.  

  3. #2
    Senior Member
    Join Date
    Aug 2014
    Posts
    387
    Member #
    39859
    Liked
    136 times
    I will tackle the easy part of your question but leave the rest for someone who can help more than I can.

    CSS is not just for WordPress. It is very commonly used in HTML web sites. What it really does is let you make a change in one place that will make changes in your whole web site. Lets say for example you want a certain text or color or background to be used in your web site. You can specify that in CSS and it will do that and otherwise you would likely have to specify it on every page of your web site.

  4. #3
    Junior Member
    Join Date
    Aug 2016
    Posts
    9
    Member #
    54871
    Ok, that's cool and make perfect editing sense and a great simple tool, thanks for the information Turboguy. So quick question regarding the font aspect, this template uses 5 different fonts and each on has a css string. I if only want to use two of my own fonts and remove the other five fonts do I have to edit all 5 css files or can delete 3 and edit only 2?

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    First of all, the usage of the phrase "quick question" is a pet peeve of mine. The question may be "quick"...the answer almost never is.

    Moving on to your question, you can remove the three font-faces and edit the other two. However (and this is the important part), you will need to create the appropriate font files and upload them along with the CSS itself. That means you'll have to use a font generator such as the one here:

    https://www.fontsquirrel.com/tools/webfont-generator

    You'll also need to make sure that your fonts are legally allowed to be embedded on a web page. Not all fonts are...each font has its own license. I'm not sure about the two you want to use, but you should check. If not, fontsquirrel.com has a bunch of fonts so you may have to settle for "the closest one".
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member
    Join Date
    Aug 2014
    Posts
    387
    Member #
    39859
    Liked
    136 times
    Here is where I see you having a problem. Basically how it works is that you have a string of text or let's say for simplicity a sentence on your web site. The html and css tell it how to display the text for instance what font to use, if it is a headline or paragraph text or if it should be italic or bold.

    Now if in your programming you tell it to display the text in a font called Jasper721condensed (made up name) and someone visits your web site and has that font on their computer it will display just as you wanted. If however the person visiting doesn't have that font installed on their computer then their computer doesn't know what to show so it is going to show something that may look totally different than you intended. The two fonts you mentioned don't sound like something that would be on everyone's computer. Most everyone has a number of fonts and things like Arial or Times New Roman are going to be something everyone has. I think what it boils down to is you might save yourself a lot of effort if you pick common fonts.

    One other thing is when you see fonts specified you will see alternates. The may list 3 or 4 fonts followed by a "font family". Usually the fonts they list by name will be fairly similar so if the person viewing the site doesn't have the first font then it will default to the second font on the list which is usually pretty close. However if that one is also not installed on their computer then it will default to the third font on the list. That is commonly followed by a "font family" which what that means is if the fonts requested were san serif types (without the tails on the letters) then if the computer has none of those fonts it should show whatever font it has that is san serif.

    As The Game said if you are going to use fonts that are not all that common you need to work out a way for them to appear on the visitors screen. The Game has more knowledge in his little finger than I have in total but I do think you would have to edit all five font references and should not delete any. My thinking which could be wrong is that for instance if the css for the left sidebar had the font deleted then it would not know what to use for a font.
    TheGAME1264 likes this.

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Sort of...a browser "won't know" what to use for a font, but revert to a default font such as Times New Roman in order to display something.

    Yes, you can use the common fonts such as Arial, Times New Roman, Times, Helvetica, etc., You can also make font stacks with them (those are the 3-4 fonts you were referencing), and it is easier. However, you won't get the specific fonts mentioned.

    P.S. My little finger is pretty stupid. My knowledge is in my middle finger. It always stands up and raises its hand.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Junior Member
    Join Date
    Aug 2016
    Posts
    9
    Member #
    54871
    Thanks for help and I have been able to go and start to some editing.

    But I now have a some more question:

    1) I have edited the follow text and when I do the I lose the arrows a the start and end of gallery:

    This is before the edit -

    <link type="text/css" rel="stylesheet" href="css/reset.css">
    <link type="text/css" rel="stylesheet" href="includes/entypo/style.css">
    <link type="text/css" rel="stylesheet" href="includes/icomoon/style.css">
    <link type="text/css" rel="stylesheet" href="includes/font_awesome/font-awesome.css">
    <link type="text/css" rel="stylesheet" href="includes/cosy/style.css">
    <link type="text/css" rel="stylesheet" href="js/jquery-ui/jquery-ui-1.10.3.custom.min.css">
    <link type="text/css" rel="stylesheet" href="js/flexslider/style.css">
    <link type="text/css" rel="stylesheet" href="js/Magnific-Popup/magnific-popup.css">
    <link type="text/css" rel="stylesheet" href="js/mb.YTPlayer/css/YTPlayer.css">
    <link type="text/css" rel="stylesheet" href="css/animate.min.css">
    <link type="text/css" rel="stylesheet" href="css/light.css">

    Before.jpg

    After Edit:

    <link type="text/css" rel="stylesheet" href="css/reset.css">
    <link type="text/css" rel="stylesheet" href="includes/PenelopeAnne/style.css">
    <link type="text/css" rel="stylesheet" href="includes/LucidaFax/style.css">
    <link type="text/css" rel="stylesheet" href="js/jquery-ui/jquery-ui-1.10.3.custom.min.css">
    <link type="text/css" rel="stylesheet" href="js/flexslider/style.css">
    <link type="text/css" rel="stylesheet" href="js/Magnific-Popup/magnific-popup.css">
    <link type="text/css" rel="stylesheet" href="js/mb.YTPlayer/css/YTPlayer.css">
    <link type="text/css" rel="stylesheet" href="css/animate.min.css">
    <link type="text/css" rel="stylesheet" href="css/light.css">

    After.jpg


    2) I am starting to edit the menus and organize them way I would like but as always I am having an alignment issue in this case Home button moves to below the rest ( I should there is a whole of connect menu code that is attach to this which related to the other menu headers):

    Before:

    <body>

    <!-- Begin Loader -->
    <div class="loader" data-background-color="#ffffff" data-text-color="#cccccc">
    <p>LOADING</p>
    <span class="circle"></span>
    </div>
    <!-- End Loader -->

    <!-- Begin Header -->
    <header>

    <a href="index.html" class="logo-container">
    <p>UNO PHOTOGRAPHY</p>
    </a>

    <nav>
    <ul>
    <li>
    <a href="#" class="active">HOME</a>
    <ul>
    <li>
    <a href="#">
    LANDING
    <span class="arrow-right icon1-chevron-right"></span>
    </a>
    <ul>
    <li><a href="home_landing_fullscreen_slideshow.html">FULL SCREEN SLIDESHOW</a></li>
    <li><a href="home_landing_striped_slides.html">STRIPED SLIDES</a></li>
    <li><a href="home_landing_striped_pages.html">STRIPED PAGES</a></li>
    </ul>
    </li>
    <li><a href="index.html" class="active">HORIZONTAL GALLERY</a></li>
    <li><a href="home_background_image.html">BACKGROUND IMAGE</a></li>
    <li><a href="home_background_video.html">BACKGROUND VIDEO</a></li>
    </ul>
    </li>

    After:

    <body>

    <!-- Begin Loader -->
    <div class="loader" data-background-color="#ffffff" data-text-color="#cccccc">
    <p>LOADING</p>
    <span class="circle"></span>
    </div>
    <!-- End Loader -->

    <!-- Begin Header -->
    <header>

    <a href="home_landing_striped_slides.html" class="logo-container">
    <p>M&J Photo Studio</p>
    </a>

    <nav>
    <ul>
    <li>
    <a href="#" class="active">
    <ul>
    <a href="home_landing_striped_slides.html">HOME</a>
    </ul>

    </li>

    Attachment 5247

    Thanks!

  9. #8
    Junior Member
    Join Date
    Aug 2016
    Posts
    9
    Member #
    54871
    Thanks But I figured it out


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:43 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com