Editing CSS code - novice needs help

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Help, I have built a vertical navigation bar with a free CSS code builder which generates code. I have copied the files into the file manager, can anyone give me some advice as to how to edit the code I can't seem to make it work. Thanking you in advance.
Photo of Penny Taylor

Penny Taylor

  • 17 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello Penny,
This is not my area of specialty so I am hoping someone else on the forum here can give you some help. I am also going to forward this to our HTML team for some assistance from them. Please allow for 48 hours for them to respond.

Kind Regards,
Emmy
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Penny,

Can you post the code that they gave you so I can take a look at it? And, how much files are there? Are you linking to them correctly in the code? When you tried to put the code on the site were you putting it into an HTML widget?

Sincerely,
Nathan
Photo of Penny Taylor

Penny Taylor

  • 17 Posts
  • 0 Reply Likes
Hi Nathan
This is the code I got, I have put the files into file manager one as css and one as images, I have tried to amend the css style and have managed to turn the menu container white but can't do anything else. I'm not sure what tags to use and didn't use a html widget.

.menu{margin:0; padding:0; width:300px; list-style:none;background:rgb(255,255,255);}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('../images/verMenuImages.png') 0px 0px no-repeat; text-decoration:none; outline:3Nat59none;}
.menu li a:hover{background:url('../images/verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url('../images/verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:40px;}

Any help would be much appreciated.
Thankyou
Penny
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Penny

Thank you for sharing your CSS.

Just taking a quick glance at your code, I see that the image file paths are not correct. If you have uploaded your pictures/images in the File Manager then the file path will be (for example):

.menu li a:hover{background:url('resources/verMenuImages.png')

If you have added your pictures inside a folder in the File Manager, then the file path will be:

.menu li a:hover{background:url('resources/images/verMenuImages.png')

In the example above, the folder's name is "images".

Let us know if that helps.

Nazlie
Photo of Penny Taylor

Penny Taylor

  • 17 Posts
  • 0 Reply Likes
Thank you, I have changed the links but where do I paste the code?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Penny,

Just put this code into an HTML widget on your page. Make sure the <style></style> tags are wrapped around it, too.

Nathan
Photo of Penny Taylor

Penny Taylor

  • 17 Posts
  • 0 Reply Likes
Hi Nathan
Just tried that - not doing anything do I need to delete the old navigation first?
Penny
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
-
Hello Penny,

Please could you share your URL with us - so that we can take a look for you - I know that me and Nathan have Google Chrome which means that we can use the Developer Tools to help you. If your site is not published yet, you could just publish to a free domain for the moment.

Also, I would just like to confirm that you have added the HTML Code for the menu already - and that your menu is displaying on the page in some form - usually a series of blue underlined links.

Also make sure that the tags are actually:

***CSS Code goes here***

Thanks,

Once we've got these issues cleared up and we can see for ourselves the menu on the page, I am sure that we can fix this.

Kind Regards,

Andi North
Photo of Penny Taylor

Penny Taylor

  • 17 Posts
  • 0 Reply Likes
Hi Andi,
My url is www.academic-proofs.co.uk - I have the site published all links etc working I have edited through the css
My menu is the basic one from Yola - have managed to amend through coding.
I am very rusty with web design so thought getting free code might be a good idea. I would just like it to look a little more professional. I don't know CSS so don't know where to post the code as I don't understand the language. I am a bit confused as I am told not to edit HTML but when I do it seems to work.
Hope you can help
Regards
Penny
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Penny,

Is the CSS like this:

<style>

***CSS code is here***

</style>

Or is it something else? When adding CSS to a web page you need the style tags.

Do you want to have a custom menu and remove the default menu?

Kind regards,
Nathan
Photo of Penny Taylor

Penny Taylor

  • 17 Posts
  • 0 Reply Likes
Hi Nathan
Yes I want to remove the default menu
My CSS looks like this
body {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 12px;
color: #000000;
background-color:#C1FF9E;
background-image: url(http://s1.yolacdn.net/V0021727/templa...;
background-repeat:repeat;
background-position:top left;
background-attachment:scroll;

}

td, tr {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 12px;
color: #000000;

}

h1 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 30px;
line-height: 1;

}

h2 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 26px;

}

h3 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 22px;

}

h4 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 20px;

}

h5 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 14px;

}

h6 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 11px;

}

a:link {
color: #000000;

}

a:visited {
color: #000000;

}

a:hover {
text-decoration: underline;
color: #333333;

}

body {
margin-top: 0px;

}

.container {
width: 900px;
;
margin: 0px auto;

}

#sys_banner {
width:900px;
height:124px;
padding:1px 0 0 0;

}

#sys_banner h1 {
padding-top: 25px;
padding-left: 15px;
text-decoration:none;
color: #000000;

}

#sys_banner h1 a {
text-decoration:none;
color: #FFFFFF;

}

#sys_banner h1 a:hover {
text-decoration:none;
color: #CCCCCC;

}

#menu {
float: left;
width: 140px;
margin: 0px;
padding: 1em;
text-align:left;
overflow: hidden;

}

#menu ul {
list-style: none;
list-style-position:outside;
font-size:larger;
padding-left:0px;
margin-left:0px;

}

#menu ul li {
padding-bottom:14px;

}

#menu ul li a {
padding-bottom:14px;
text-decoration: none;
font-size:14px;

}

#content {
padding: 1em;
width:690px;
float:right;
border-left: solid 1px #CCCCCC;

}

#full-content {
padding: 1em;
width:870px;
margin-left:auto;
margin-right:auto;

}

.sys_footer {
margin:10px;
text-align:right;
font-size:small;

}

.sys_txt {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 12px;
color: #000000;

}

td, tr {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 12px;
color: #000000;

}

.sys_txt h1 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 30px;

}

.sys_txt h2 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 26px;

}

.sys_txt h3 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 22px;

}

.sys_txt h4 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 20px;

}

.sys_txt h5 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 14px;

}

.sys_txt h6 {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 11px;

}

.sys_txt a:link {
text-decoration:underline;
color: #000000;

}

.sys_txt a:visited {
text-decoration:underline
}

.sys_txt a:hover {
text-decoration:underline color: #333333;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...>
<!--
Yola template
-->

A proofreading and copy editing service for academia, small business and authors.

/*

WARNING

Yola had to strip some HTML it found the last time you saved your CSS.

This may have changed your formatting.

To avoid unwanted formatting changes in the future please don't include any HTML in your CSS.

*/

a:link { color: #9999ff; font size: strong; } a:visited { color: #8888ff; font size: 14px; } a:hover { text-decoration: none; } .sys_txt a:link { text-decoration:none; } .sys_txt a:visited { text-decoration:none; } .sys_txt a:hover { text-decoration:none; color: #333333; }
















Academic-Proofs is an established service provided by graduates of English universities. We are able to provide a comprehensive proofreading and copy editing service, catering to  worldwide academia,  businesses and authors.

In academia vital marks are lost through the use of poor grammar, spelling mistakes and the transposition of words. Whilst in business, it is vital to portray an educated and professional image to clients. For budding authors, a well written manuscript is more likely to receive serious consideration from publishing houses.

Our expertise is based on essay and dissertation writing; magazine editing; newsprint copy editing; website content development and conference materials.

For Students:
Our aim is to enhance your learning and the final draft of your essay, dissertation or thesis by improving the quality of your writing.

We will  work with your manuscript to enhance clarity and presentation. We are unable to comment on mathematical formulae, scientific or technical terminology but have wide ranging knowledge of the behavioural sciences; medical terminology and educational standards.

Our Bespoke Services will also provide students with proofreading and copy editing for their personal statements. In addition  the service will offer help and advice to students, enabling them to enhance their writing skills in order to produce more concise and effective personal statements.


For Business: We proofread and rewrite web content, articles and publicity materials to ensure accuracy. Website links can be tested to ensure they work efficiently. We view all sites from a user perspective and suggest changes based on ease of understanding.

 

For Authors: We type and proofread manuscripts before submission to publications and publishing houses, thus increasing the likelihood of publication.  We do not comment on the quality of your publication, but preview in order to detect inconsistencies in both plot and characters.

 



.

 



 











Individual Service Our service is individualised and we deal directly with you, rather than out-source your work to an unknown  team. This enables us to provide a tailor-made service with direct contact with YOU. The service utilises the Microsoft Word Track Changes system to:



  • Correct English grammar and spelling


  • Ensure your work reads fluently and cohesively


  • Highlight problems with essay structure

  • Check referencing and citations

  • Bespoke Services Additional services we provide include:



  • Typewriting service from handwritten copy


  • Advice on PowerPoint presentations


  • SPSS, Excel and Access

  • Document Formatting

  • Database management and updating

  • Personal Statements for students 

  • We offer a graded service of editing which allows you to choose the most suitable service for YOU.

    Plagiarism is a serious offence;  we will NOT rewrite; research; check facts or substantially alter material sent to us by students.




    WHAT MAKES OUR SERVICE SPECIAL

    Firstly, we practice what we preach, so our website is word perfect and written in clear, concise English. When choosing an editor - if there are errors in publicity material there are likely to be mistakes in your finished work - if their English is stilted then your document is likely to be too.

    We provide a fully personalised service. Your work is assigned to one of our experienced editors, who take control of your assignment until completion

    We do not outsource  work to any other service,  foreign or domestic.

    .








     ©academic-proofs.co.uk 2011 All Rights Reserved.   Terms and Conditions      Plagiarism Policy     Banner image © FreeStockImages.org











    Disable Site CSS Overrides

    Sorry I have copied everything - I just need to know where to post the code! and which bits I need to amend. I am sorry to take up your time
    Regards
    Penny
    Photo of Andi North, Mangopear Media

    Andi North, Mangopear Media

    • 782 Posts
    • 111 Reply Likes
    Hi Penny,

    I shall take a look at this later - I have work in the morning (I am in the UK and it is now 01:30 am and I need to be in work in 8.5 hours! So I will speak later - I have started to get somewhere but there are still a few teething issues.

    I shall have an answer for you by about 19:00 BST tomorrow - is that okay?

    Kind Regards,

    Andi
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    Hi Penny,

    Did you copy that out of the Custom CSS? If so, you should remove that HTML out, as that Custom CSS is only for CSS.

    This code is confusing because it looks like your source. Can you post just the HTML that the menu generator gave you and the CSS that they gave you? Once you post that, I'll be able to assist you further.

    Kind regards,
    Nathan
    Photo of Penny Taylor

    Penny Taylor

    • 17 Posts
    • 0 Reply Likes
    Thank you to both of you.
    Andi sleep well, look forward to hearing from you
    Nathan I copied it from my custom CSS - I have been round in circles today with CSS and HTML and can't remember where anything originated - will go to the original source tomorrow - like Andi I need to sleep.
    Thank you I really appreciate this.
    Regards to both of you
    Penny
    Photo of Andi North, Mangopear Media

    Andi North, Mangopear Media

    • 782 Posts
    • 111 Reply Likes
    Hi Penny,

    I am now going to work on the CSS - I will set up a new site on one of my accounts to test that the code works. I shall let you know how I get on.

    Andi
    Photo of Andi North, Mangopear Media

    Andi North, Mangopear Media

    • 782 Posts
    • 111 Reply Likes
    Here's the answer:

    Add this code to the Custom CSS Editor:

    #menu {
    float: left;
    width: 300px;
    margin: 0px;
    padding: 0px;
    padding-right:3px;
    text-align:left;
    overflow: hidden;
    }

    #menu ul {
    list-style: none;
    list-style-position:outside;
    font-size:larger;
    padding-left:0px;
    margin-left:0px;
    }

    #menu ul li {
    background:url(resources/verMenuImages.png) no-repeat;
    margin-bottom:2px;
    height:26px;
    background-color:none;
    }

    #menu ul li:hover {
    background:url(resources/verMenuImages.png) no-repeat;
    background-position: 0px -40px;
    margin-bottom:2px;
    height:26px;
    }

    #menu ul li:active {
    background:url(resources/verMenuImages.png) no-repeat;
    background-position: 0px -80px;
    margin-bottom:2px;
    height:26px;
    }

    #menu ul li a {
    text-decoration: none;
    font-size:24px;
    padding-left:3px;
    padding-right:15px;
    color:#FFF;
    }

    #content {
    padding: 0px;
    width:580px;
    float:right;
    border-left: solid 1px #CCCCCC;
    }

    #full-content {
    padding: 0px;
    width:900px;
    margin-left:auto;
    margin-right:auto;
    }

    This will give you the menu you require. It will have a 580px content area and your 300px menu with all of the hover and active states. You may need to change the links to the image(s).

    I would also recommend that you change the size of the images - using the editor you chose online. The menu is very wide and makes the content area smaller. I would recommend a size of about: 200pixels wide and 25pixels tall.

    Hope this helps.

    Andi
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    Okay, we'll continue this tomorrow then.

    Kind regards,
    Nathan
    Photo of Sanja

    Sanja, Official Rep

    • 10698 Posts
    • 495 Reply Likes
    Thank you Nathan and Andi for your fantastic help on this.

    Penny - you are in excellent hands!
    Photo of Andi North, Mangopear Media

    Andi North, Mangopear Media

    • 782 Posts
    • 111 Reply Likes
    Thanks Sanja :)

    Andi
    Photo of Penny Taylor

    Penny Taylor

    • 17 Posts
    • 0 Reply Likes
    Good morning all
    The original code at the top of this email is what was sent to me as CSS code and saved in file manager as CSS
    The other code is my source code.
    Yola gives me the option of editing CSS which I have done and then tells me to remove the HTML - I am confused I don't seem able to edit the CSS.
    If I take the html out it goes back to default style guide which means I have underlines etc on all links.
    Regards
    penny
    Photo of Penny Taylor

    Penny Taylor

    • 17 Posts
    • 0 Reply Likes
    Thank you Andi and Nathan I really appreciate your help, however, I think I must be doing something fundamentally wrong I open the CSS editor copy the site code amend with the new code click OK doesn't do anything and then I go back in and the CSS code is just the same.
    Anyway thanks for your help, I think I will just have to stick with what I have.
    Regards
    Penny
    Photo of Penny Taylor

    Penny Taylor

    • 17 Posts
    • 0 Reply Likes
    Sorry - I take the above back - with a bit of tweaking it works!!!! looks awful though so back to work.
    Your help was great thank you again.
    Penny
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    Do you need help with styling it? Could you publish it so I can take a look at how it currently looks?

    Thanks,
    Nathan
    Photo of Penny Taylor

    Penny Taylor

    • 17 Posts
    • 0 Reply Likes
    Hi Nathan, I keep saying thank you so will again!
    I have managed to tweak it and published it to the web - www.academic-proofs.co.uk - the site is text heavy and not well designed (I am not a graphic designer) any suggestions to style would be very welcome.
    Penny