Jump to content
jmerlinb

Weebly custom HTML/CSS help?

Recommended Posts

Dear all,

 

Would anyone be able to tell me how to edit the HTML of my Weebly website's banner image (the bike in the rain)? I know it must be somewhere under Design > Edit HTML/CSS, but as I have little HTML knowledge, I am unsure where to look.

 

If it helps, the end game is to make the banner image interactive (so that it changes back and forth between two images upon mouse over or clicking).

 

Take a look: www.lightcycles.xyz

 

 

 

Share this post


Link to post
Share on other sites

Well, I'm not a professional, I started learning web design not long ago, but I think it is possible to find the video tutorials on the Internet like this on http://www.webbuildersguide.com/website-builders-reviews/weebly-review/ . As I've been learning mostly by myself I can say that such tutorials can be really helpful if you don't have an expert arround you :). Speaking about learning HTML/CSS, of course, it is necessary, especially if you are going to work in this sphere. I hope it helps!

Edited by Natalie222

Share this post


Link to post
Share on other sites

You dont need a book. HTML is markup language and CSS is extension. All you need you can learn by the googling.

 

If you want to be an amateur at best sure. CSS is not an extension it is a language in itself (declarative) and I can tell you CSS can become extremely difficult to work with when a project grows if not properly managed.

 

For those who actually want to learn there are many good books and and courses. I recommend CodeSchool and Frontend masters.

 

For the record a site builder like Weebly is absolutely the worst place to learn about web development. Closely followed by W3Schools.

Edited by rbrtsmith

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Tome9
      Hi all
      Probably a post that is rather popular and futile, but I'm start out freelance web designer and I'm creating my first large static website and I have come up with a few issues surrounding making the website responsive on different devices.
      From the start, I have created 7 different stylesheets. One, a generic style.css file, then 6 sheets that are designed purely for the different device sizes. I've then in the <head> section set the limitations to each sheet (e.g. <link rel="stylesheet" media="(min-device-width: 377px) and (max-width: 480px)" href="css/style-xsmall.css" />).
      1. This has worked, to varying levels of success, however, I'd like to get people opinions on whether this is best practice as I'd really like to understand and get the fundementals right from the start. I have thought about having one stylesheet with the @media sizes bit but that one stylesheet becomes unbearably long.
      2. Furthermore, I've hit a snag. On one of the stylesheets I have hidden an element (using display: none;) as the text doesnt work well on a specific device size, this is then inherited on all the different device views as it is picking it up first, even when the device size is not set to that stylesheets parameters. So my question is, have I linked the stylesheets to the device widths correctly? and why do they pick up all 7 stylesheets?
      I apologise if this is a reoccurring and futile topic for web designers, but I've been teaching myself for 6 years and it's something I'm looking to make my full time job so any advice for a young, start out freelancer would be much appreciated.
      My website in question FYI is: https://biobreakwebdesign.co.uk
      Thanks, Tom.
       
       
    • By jbenham10
      Hey!

      Having a bit of trouble getting a sticky navbar to work for a website I have to build for my college course...
      I have copied the JavaScript from the W3Schools method assuming it would apply directly to my pre-existing navbar but it seems not...I can't seem to see where I am going wrong, any ideas? I tried using both the 'nav' and 'navbar' elements in the scripting..

      Thanks in advance
      HTML
      <nav> <ul class="navbar"> <li class="navitem"><a href="">Home</a></li> <li class="navitem"><a href="">About</a></li> <li class="navitem"><a href="">Our Team</a></li> <li class="navitem"><a href="">Products</a></li> <li class="navitem"><a href="">Gallery/Portfolio</a></li> <li class="navitem"><a href="">Contact</a></li> </ul> </nav> CSS
      /* Navbar css*/ nav { float: left; display: block; width: 100%; left: 0; right: 0; top: 150px; background: #616A6B; height: 100px; } .navbar { list-style-type: none; max-width: 100%; text-align: center; overflow: hidden; position: static; padding-top: 25px; } .navitem { display: inline; padding-left: 10px; } .navitem a { text-decoration: none; font-size: 18px; color: white; font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; } .navitem a:hover{ color: #CC0000; transition-duration: 0.8s; } .sticky { position: fixed; top: 0; width: 100%; } JavaScript
      <script> window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } </script>  
    • By overground55
      Hey WebDesignerForum community,
      I am designing a website mockup, and will attach an image of what it looks like currently. I'm attempting to use CSS Grid to design my homepage. From here I really have 2 questions:
      First, my home page seems fairly long, at least compared to websites shown in tutorials I've found on CSS Grid. It seems like 'grid-template-areas' may be one way of building my home page. Will this become overly complicated and a less effective way of building something that looks like what I'm currently showing in my attached image(s)? The way I'm picturing it is that my 'grid-template-areas' will end up looking like this: ‘header header header nav nav'
      'article article article article article’
      'article article article aside aside’
      'article article article article article'
      'aside aside aside aside aside’
      'article article article article article'
      ‘aside aside article article article'
      'article article article article article’
      'article article article article article'
      'article section section section article'
      ‘footer footer footer footer footer’;
      I'm uncertain if I'm using the right semantic language for everything, but I will also overlay each 'grid-template-area' item on my website mockup so you can see exactly what I have imagined in my mind. I hope I have provided enough information for someone with more experience to help me here.
      Secondly, some of my imagery, such as the header, footer, and a few other images, touch the edge of the webpage. In the past when using CSS Grid, I couldn't get the grid to go all the way to the edge of the screen, but it had a small margin that seemed inherent. How can I avoid this from happening when I begin the html/css process?
      web mockup
      Web mockup with grid item assignments
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      59,311
    • Most Online
      4,970

    Newest Member
    link.rk01
    Joined
  • Forum Statistics

    • Total Topics
      65,996
    • Total Posts
      454,482
×