Change of buttoms style issue? « Support Forum | Kriesi.at

Support Forum » Abundance

Change of buttoms style issue?

19 posts from 5 voices

Started 4 months ago by autoplius
Latest reply from Devin
This topic is resolved

Tags:

autoplius
Member

Hello again,

I have some problems again, my question is how do i change buttons style? I have my style on PSD photoshop format.
Thanks again , I hope you can help me :)

Best Regards, Jonas Samulionis

Posted 4 months ago #
Ismael
Moderator

Hi,

You can inspect the button element then look for the assigned class on it. Please give us a link to the page with the button so that we can check. We'll give you a proper css solution.

Regards,
Ismael

Posted 4 months ago #
autoplius
Member

Hello,

http://goo.gl/eRwOq
This is what i want, just buttons should be a bit more round design like in original theme, and black style.

Thanks, you doing really nice work.. Theme price should be much higher with this brilliant support!

Regards, Jonas Samulionis

Posted 4 months ago #
Devin
Moderator

Hi Jonas ,

Unfortunately a full navigation replacement like that would need to be done by a freelance developer as we aren't able to do that level of customization through support.

Regards,

Devin

Posted 4 months ago #
autoplius
Member

Hello again,

Unfortunately it is not more when a playing with a css code. For you guys who work with these things is not a big problem.
If you took a little look to a navigation menu, where are only a couple diffrents. These are Clour, font , glass look (transpreanty)..

Best Regards, Jonas Samulionis

Posted 4 months ago #
Nick
Moderator
Hi,

I played with your css code, and to get to where you want to go, requires a bit more than just swapping out css. If you would like, just see for yourself. ***make a backup of the file***

In file style.css add this to lines 313, 370, 446
```
/*
```
and add this below to lines 368 , 443, 514
```
*/
```
Ok, Now you removed all the css code from the current menu.

Now add the following css to the bottom of your custom.css file. I modified it already.

http://pastebin.com/JsdYHDUL

How does it look? That was a 100% css swap. Nothing like the original right? That's because there is more than meets the eye in the original. First there is the cufon, second the very code that generates the menu is custom. Also you are using a mega-menu option on your 3rd link, while the url you show, has no mega menu option.

In your Appearance > Menu, turn on the ability to add descriptions. and adjust the font sizes and line heights. That is as close to it as you can get without re-coding the menu.

If you are talking about regular buttons (not navigation buttons)... the black with blue hover, that is a lot easier,.

Thanks,

Nick
Posted 4 months ago #
autoplius
Member

Hello,

Its a big bite of work u done there, thanks. All i meant is, i wanted design like that. funcionality is perfect in Abudance. So all i want is, i a bit like tutorial how i could change visoul things like clour fonts, and make it a bit transperant.

Thank you,
Regards, Jonas Samulionis

Posted 4 months ago #
autoplius
Member

Hello,

Could yuo pleasse check it a bit out. http://www.autoplius.dk , how could i increace it so its hva more proffesional look :)

Best Regards Jonas Samulionis

Posted 4 months ago #

Nick
Moderator

Hi Jonas,

Please try adding this to the very bottom of custom.css . In Chrome the buttons look a bit more straight though it may require an additional look

#top .main_menu {
top: -4px;
}
#top div .main_menu .avia_mega > li:first-child {
height: initial;
}
#top .main_menu .avia_mega {
height: 48px;
line-height: 48px;
}
#top .main_menu .avia_mega > li:hover > a, #top .main_menu .avia_mega > .current-menu-item > a {
height: 47px;
line-height: 47px;
}
#top .main_menu .avia_mega > li > ul, #top .main_menu .avia_mega > li > ul ul {
top: 48px;
}
.main_menu .avia_mega2{
top: 48px;
}

This is how it looks for me with the above code http://i.imgur.com/khuQv.png .. (after looking at that image, i pushed up the menu a bit also)

Thanks,

Nick

Posted 4 months ago #

autoplius
Member

Hi Nick,

Wow, amazing! That is so cool! xaxaxa! U made my week!

thanks:)

Posted 4 months ago #
Nick
Moderator

Hi,

No problem. Enjoy the theme.

Thanks,

Nick

Posted 4 months ago #
autoplius
Member

Hi again,

I know i ask much, but suddenly another ide float in my head :( - Could glass efect be done, i searched a bit and found this. Can i use it?

.glass {
position: relative;
}

.glass:after{
content: " ";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 0;
-webkit-background-origin: border-box;
-moz-background-origin: border;
background-origin: border-box;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .15)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}

Regards Jonas :)

Posted 4 months ago #
Dude
Dude

Tbh this hover effect is not easy to implement. However if you want to implement such a feature I'd rather use an image (like Kriesi does here: http://www.kriesi.at/themes/eunoia/ ) instead of css3 code because older browsers don't support the code above. Kriesi uses following image: http://www.kriesi.at/themes/eunoia/wp-content/themes/eunoia/images/layout/gloss.png and I'm pretty sure you are allowed to use it with Abundance too.

Posted 4 months ago #
autoplius
Member

okay, but how does he use it makes png transperrant or? :)

Posted 4 months ago #
Dude
Dude

Hi!

The png is already transparent. You'd need to create a function (eg with jquery) which fades the image in/out when the mouse hovers over your images (or buttons, menu items, etc.).

Regards,
Peter

Posted 4 months ago #
autoplius
Member

Hi,

Could i use these script and codes http://www.queness.com/post/411/create-an-attractive-jquery-menu-with-fadein-and-fadeout-effect . If yes, could u maybe explain a bit, while i think u know it bette when me :)

Thank you ,
Best Regards, Jonas Samulionis

Posted 4 months ago #
Devin
Moderator

Hi Jonas,

The implementation will be specific for the navigation layout. I'm not familiar enough with javascript to write it out off hand but I can tag Peter and see if he can. Typically we aren't able to do things like that so it would be up to him if he can.

Otherwise, you would need to look into a freelance developer to implement the effect for you.

Regards,

Devin

Posted 4 months ago #
autoplius
Member

Nice, to hear from you i hope you can help me:)

Posted 4 months ago #
Devin
Moderator

It looks like Peter un-tagged himself so I would take that as a no on a simple implementation from his point of view.

A freelance developer with a bit of time will be your best to add in the custom effect you are looking for.

Regards,

Devin

Posted 4 months ago #