Transparent button


#1

Hello.
I just recently started to use the Moesia theme.
Is there any way to make the “button” on the front page more transparent?
Is there any way to remove the shadowing?
I would like to have a button where the frame is a bit visible and the button is very transparent and without shadowing.

Furthermore, what adress or link or “command line” should I Wright to make the page scroll down, when pressing the Front Page button, just to stop when the FrontPage image has dissapeared?

Pardon my bad English and thank you in advance for your help!


#2

Hello,

You can make that button transparent and without shadow if you add this to a custom CSS plugin:


.welcome-button {
    background-color: rgba(255, 107, 83, 0.25);
    box-shadow: none;
    border: 2px solid #ff6b53;
}

I’m not sure I understand the second part. I’m guessing you want to click the button and go to the first section? If so, you need to know the ID of that section, and you can get it by inspecting the source of the page. Than simply edit the button and for the link enter #sectionID. But there won’t be any smooth scrolling, for that you’ll need to add some jQuery.


#3

Hey Vlad!
Thank you!
Regarding the transparent button, I haven’t ever Before added code to a custom CSS plugin… If, it wouldn’t mean to much work for you, could you give me a hint on how?

You were right in your anticipation about the scrolling. I checked other wordpress apges on this (#sectionID). Problem is that I don’t Think I have found it. The sectionID that is. I’ll keep looking and test.
Thanx again!


#4

Install this plugin,go to its settings and simply add the code I gave you in it.

Post a link to your site and I’ll tell you what the ID is.


#5

Thx. I Think I know what the sectionID is but when applying it in “the call to action” for the button it gets saved BUT when visiting the website it hasn’t change…? It is still #start when it should be #borjan (I Think).

http://mindmeutveckling.se/
Check it out.


#6

I see it with #borjan, but that’s not the ID. The best thing for you do to will be to add #site-navigation and it will scroll just at the top of the navigation bar.


#7

OK. How come it is #site-navigation and how do I find it in the future?

Just for my own Learning purposes Vlad. I will try not to bother you in the future with too simple questions… :slight_smile:


#8

well Before ypu answer that. I added #site-navigation and saved. Still says #start when I hover the cursor over button and the page simply reloads when clicking (naturally)…


#9

Have a look here: https://developer.chrome.com/devtools
You need to right click the page element that you’re interested in and click Inspect Element.
Have a look at the first picture from that link, you’ll see the ID hello for the title. If you want to scroll to that, you just add it like this: #hello.


#10

I still see #borjan there. Feel free to make an admin account for me and send it at vlad[at]athemes.com and I’ll have a look if you don’t figure it out.


#11

It was a cache issue caused by WP Super Cache. I cleared your cache and now it’s working fine.


#12

Thank you Vlad! You have a VERY good customer suport here at aThemes.

I Think I’ll check up the pro version later on.


#13

Short: Can i do the same, as with the button, in custom css for the menu background color?

If so, what is it called when Writing a line of code in custom css?
The button is called “.welcome-button”…


#14

regarding the transparency


#15

I’m not sure I understand. Are you trying to make the menu background even more transparent?

If so, add this:


.top-bar {
   opacity: 0.6;
}


#16

Great thx!