Can i change the style of my top tabs, www.j-autos.com

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Photo of Jamie Duke

Jamie Duke

  • 47 Posts
  • 0 Reply Likes
  • frustrated

Posted 8 years ago

  • 1
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
i think u can by doing CSS but i think u need yola silver or another thing is that u can change the style of your site
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Jamie

Do you mean the menu links on your page? These are associated with the style template you are using, but there are a number of ways in which you can change it to suit the design of your site.

One method is to create your own navigation buttons. You can use a graphics program such as Adobe Photoshop or a web-based banner maker such as Banner Fans to make the buttons.

Once you have the buttons for each page on your site, the next step is to remove all the pages out of navigation. Please see the Creating Subpages tutorial for the steps on how to do this.

Next, add the buttons you created, in Picture or Text Widgets along the top or side of your page. You use a Column Widget to divide your page into sections to add the buttons. Then link your buttons to the relevant pages on your site. See our tutorial on Picture Links for help with this.

I see that you are a Yola Silver user, so an alternative method is to customize the site CSS, if you are familiar with web languages. We have a detailed tutorial on how to edit your Site CSS. If you'd like to find out more about CSS, a good place to start is the W3C schools site.

I hope you are able to use one of these suggestions to change the site navigation. If you have any questions or need more help, please ask us here and we will guide you!

Happy Sitebuilding!!
Nazlie
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
You can also use www.CoolText.com to make cool buttons.
Photo of Jamie Duke

Jamie Duke

  • 47 Posts
  • 0 Reply Likes
/* CSS Document */

body {
font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color:#060606;
background-image: url(resources/scoobyworx-bg.jpg);
background-repeat:no-repeat;
background-position:top center;
background-attachment:scroll;

}

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

}

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

}

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 {
text-decoration: none;
color: #FFFFFF;

}

a:visited {
text-decoration: none;
color: #FFFFFF;

}

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

}

body {
margin-top: 0px;

}

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

}

#sys_banner {
width:900px;
height:125px;
/* this is wierd. but for some reason, if there is no border it drops down a few pixels! border-top:solid 1px #333333;
*/

padding:1px 0 0 0;

}

#sys_banner h1 {
padding: 20px;

}

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

}

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

}

#menu {
margin: 0;
margin-left: 5px;
margin-right: 5px;
border-bottom:solid 1px #CCCCCC;

}

#menu ul {
list-style: none;
float:left;
margin-left:0px;
padding:10px;

}

#menu ul li {
display: inline;
font-size:larger;
padding-right:20px;

}

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

}

#content {
padding: 1em;
/*background:blue;
color:white;
*/

}

.sys_footer {
margin-left: 5px;
margin-right: 5px;
text-align:right;
font-size:small;
border-top:solid 1px #CCCCCC;

}

#sys_designerfooter {
border-top:0px;
padding-top:10px;

}

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

}

.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: #FFFFFF;

}

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

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

}
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Oh looks like we posted at the same time :) I'm checking the code and will give you feedback soon.
Photo of Jamie Duke

Jamie Duke

  • 47 Posts
  • 0 Reply Likes
Thats my CSS code but i want to put a border round the menus and add a background etc
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Would you like to add a border around each menu link?
Photo of Jamie Duke

Jamie Duke

  • 47 Posts
  • 0 Reply Likes
yes :)
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
If you would like a border and background around each of the menu items, then this is the code to use:

.sys_navigation li {
border: solid 2px #FFFF33;
background-color: #0033CC;
}

Also see my comments in the post further down this thread.
Photo of Jamie Duke

Jamie Duke

  • 47 Posts
  • 0 Reply Likes
i have silver
Photo of Jamie Duke

Jamie Duke

  • 47 Posts
  • 0 Reply Likes
I have a web designer doing me some graphic buttons
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Okay, so if you have graphic buttons, then use the method I mentioned in my first post.

Remove the pages out of navigation and add the buttons using the Picture or Text Widgets. Then you will not need to edit your CSS.

Will that work for you?
Photo of Jamie Duke

Jamie Duke

  • 47 Posts
  • 0 Reply Likes
Ah my design guy just said that he is making graphic buttons for my side menu the top tabs just want a yellow border around them and the background same blue as my banner.

www.scoobyworx.com will show you the banner colour.
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Jamie

Thanks for the update. The code for adding a border and background color to the top menu looks like this:

.sys_navigation {
border: solid 2px #FFFF33;
background-color: #0033CC;
}


You may want to add the correct colors used in your banner. I hazarded a guess using the color chart, but you can ask your design guy for the RGB colors he used and replace the color values in the code above.

To add the code to your site, open your j-auto site in the Sitebuilder. Then click on Style > Edit site CSS. Paste the code into the window on the left. Go to the Preview tab in the right-hand window (if it is not open) to view the changes.

Let us know if you need more help with your site CSS.

Thanks
Nazlie
Photo of Jamie Duke

Jamie Duke

  • 47 Posts
  • 0 Reply Likes
Obviously once I've done this. I would have to add the buttons to every page which there will be hundreds of pages. Can I create a page with frames so my menu buttons are on the top all the time on all pages and my accordion menu is also on every page. As this will save me so much repetitive work.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Jamie

You can make a HTML page in Notepad with just your navigation code in it and then upload it to your Yola website and then on each page you would still have to add a small code at the top but whenever you need to edit all you would have to do is edit that HTML page in Notepad and upload it to Yola again to overwrite it and then it will update on all pages.

But you have to give each link in the navigation on the HTML page an HTML attribute of target="_top" so it would work.

If you want I can make the HTML page for you and then send you it. I'll also post the small code to add to every page if you decide to do it this way.

Nathan
Photo of Jamie Duke

Jamie Duke

  • 47 Posts
  • 0 Reply Likes
The menu I have and want on every page is on my site. www.scoobyworx.com then the tab online shop and you'll see the menu on the left. The code is from a generator and I've changed a few bits to make it how I want it. Also I have a paypal logo which I want under the menu on every page can this be added into the code so that also appears in the way you said. Www.j-autos.com has the paypal logo as I want it on this new site.
Your help is appreciated hugely on this.

If I forward you the accordion menu code on a notepad could you see why I'm getting the message "oops your code has error"

My email is info@j-autos.com

If you mail me I can forward the code.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah I can see any errors because I have Dream Weaver to point out all errors.

I'm emailing you right now.