Yola Help Gradient Button

  • 1
  • Question
  • Updated 5 years ago
  • Answered
i would like to add the buttons on this website [http://webdesignerwall.com/tutorials/...] to my website but have no idea how to go on about doing that could someone give me a hand
Photo of Jrsister

Jrsister

  • 0 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of rose marie

rose marie

  • 72 Posts
  • 23 Reply Likes
Hi Jrsister
The tutorial says these are css gradient buttons, do you have a silver level membership? The tutorial gives the steps you need to follow, but it won't work unless you can add css to your site.
If you can't add css to your site, perhaps someone knows of a way to do this with htlm coding.
These are nice buttons, and certainly a project worth pursuing.
Photo of Jrsister

Jrsister

  • 0 Posts
  • 0 Reply Likes
thanks for replying :D yes i have silver will you be able to help me? so far i have no idea what its saying i know how to get to the css of my site but what do i do with the buttons after i have found this
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Jrsister,

If you can let us know an instance of a button you would like to add, we can give you a mock-up code that you can implement on your site. So if you know the label (ie text on the button), the colour and the size, we can create a code or instruction that may then enable you to modify it for other buttons as well.

There are a few alternative methods which we can offer as potential solutions as well. Happy to work with you through this.
Photo of Jrsister

Jrsister

  • 0 Posts
  • 0 Reply Likes
A button exactly like this would do perfect http://prntscr.com/1gdwp1 but with a different text : Contact, About us, Services, Scheduling, Home

If you can get the code to me soon that would be very helpful.

thank you
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Currently travelling. Should be able to get these to you within 12 hours (hopefully)

I gather then that the buttons are for a menu/sub-menu? If so as a follow on I can possibly give you code to carry this through to all pages or if you want only selected pages that can be done also.
Photo of Jrsister

Jrsister

  • 0 Posts
  • 0 Reply Likes
yes this would help thank you also will you tell me how to implement them through css or html whichever
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Jrsister,

Can you tell me the Style template you will be using for your site? If you wish to use a button menu this will be created with the Style characteristics in mind as many styles have different widths, so one creation won't fit all.
Photo of Jrsister

Jrsister

  • 0 Posts
  • 0 Reply Likes
The style i am using is hyperglass
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Here is the code I adapted from the site: http://kailoon.com/css-sliding-door-u...

Please try this out on a test site first.

Following is the CSS which needs to be pasted into an HTML widget at the top of your page.
ul {
padding: 5px;
margin: 10px 0;
list-style: none;
float: left;
}

ul li {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 10px;
}

ul li a {
text-decoration: none;
float:left;
color: #999;
cursor: pointer;
font: 900 14px/22px "Arial", Helvetica, sans-serif;
}

ul li a span {
margin: 0 10px 0 -10px;
padding: 1px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}

ul.blue li a.current, ul.blue li a:hover {
background: url(resources/blue.png) no-repeat top right;
color: #0d5f83;
}

ul.blue li a.current span, ul.blue li a:hover span {
background: url(resources/blue.png) no-repeat top left;
}


The following code needs to be placed into an HTML widget at the place on your page where you wish to see the menu
<ul>
<li><a href="index.php" title="Home" class="current"><span>Home</span></a></li>
<li><a href="services.php" title="Services"><span>Services</span></a></li>
<li><a href="scheduling.php" title="Scheduling"><span>Scheduling</span></a></li>
<li><a href="services.php" title="Services"><span>Services</span></a></li>
<li><a href="contact.php" title="Contact"><span>Contact</span></a></li>
</ul>


Finally this is the image that is used for the gradient slices in your menu.


Store this in your File manager.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
An easy solution :)

Page > Page Properties > Navigation
Uncheck the green check marks and this will remove the menu titles of your Style default menu.(It's still there but just invisible)
Photo of Jrsister

Jrsister

  • 0 Posts
  • 0 Reply Likes
ah thanks, that was the testsite should i wait til you figure out how to make the image work before putting it on the main?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I think it should be OK to put it on your main site.

Keep your test site alive and we can work with the additional stuff on that before updating the main site.

It may well be that the issue is related to the Z level and I'm not sure if we can resolve this as the white background is already set at a level of 999,999 and I suspect that is the highest level available. I have to do more reading on this.

The other aspect is that now I don't have a ruler to measure elements on the screen as FF have introduced a new version and the add-ons have not caught up as yet :(
Photo of Jrsister

Jrsister

  • 0 Posts
  • 0 Reply Likes
Actually i can do without the background thanks for the help (if you do figure it out though feel free to let me know) could you help me with the Slider topic now?

Edit: Also i was wondering could i make the fonts of these bigger http://prntscr.com/1gx3z6
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
If you have a look at the CSS code in the third para you will see :
font: 900 14px/22px "Arial", Helvetica, sans-serif;

change it to:
font: 900 16px/22px "Arial", Helvetica, sans-serif;

and see if that works?

I am working through the Slider and have rediscovered the plugin called Wow Slider

Download the free version and this is legal for non-commercial sites. There's a registration required and they haven't bombed me with rubbish, so I don't have reservations about them(?)

One aspect with sliders, although there are some that don't have this limitation, is to create all your images exactly the same size to eliminate poor sliding or awful looking ends.

Please follow up on your other thread rather than here. I'll respond to your questions on that thread from now on.