Adding a "CSS button" to free splash theme. And replacing "send" button in contact form (or changing color)

Building a simple starter website for my sister using the free splash theme. Here’s link to the website as it currently is.

I (nor my sister) like these current buttons for inks to other pages. Problem is that plain text links don’t show up with the background image. I could add the transparent white background like I have on the other pages, but I like how it looks having the full image on the homepage. I found a simple gray button on this website

And I think it might work. But I can’t figure out how to add the button via the provided CSS code. When I just add the code to the simple text page and mark it as “ignore formatting” it still just shows the code text.

Any help?


Also, the “send” button on her contact page is very hard to see because of the white background. Is there any way to replace this button or add some CSS or other code to change the color of the button or just make it darker? Or replace it with a different button?

https://www.ashleyhalcyone.com/contact/

Thank you!

That button generator generates both the html (the part beginning and ending with <a /a> ) and the css to style the html button. Put the html where you want the button to appear on the page.
put the CSS in the css code area of the page inspector. I’m on mobile right now so I can’t inspect the form button and give you css, if no one else answers I’ll try to have a look tomorrow. Have a look in the theme settings there may be a way to style the button built into the theme.

2 Likes

That worked! Duh! I was using the whole code, not separating it.

Looks better but maybe not all the way there, not sure.

How do I add a link to that coded button? Just highlight it and use Rapidweaver’s link button? EDIT: no, that doesn’t work, it removes “ignore formatting” so the text shows instead of the button. I’m sure I just need to add link code, but not sure where to put it…

Problem now is that the Title color has been changed because it’s a ink as well. Is there some CSS to make the Title black even when hovered over?

Also would love to fix the “send” button on the contact page

Thanks for your help!

This will teach you how to add your link to that html button code:
https://www.w3schools.com/html/html_links.asp

As for the CSS, I’ll try to have a look tomorrow when on a computer instead of mobile.

1 Like

Yes, I know that basic link code, but I’m not sure how to combine it with the button code…

Where it says href="#" is where your link goes, where it says my button is the button label. It’s just a link like any other, the class is what styles it as a button along with that CSS code.
Put the url (link) between the " " and add your label

1 Like

Thanks! Worked!

And actually, I misspoke, the Title should be white, with yellow or grey link hover color, or none at all.

To style the form button with CSS, target form-input-button{ Your styling here;}
example:
.form-input-button{
background-color: #636FA3;
}

As for the title and other links, I’m betting that styling is coming from the theme as I see CSS for:
a:link, a:visited that is in the consolidated CSS. You should change that in the Theme Styles Inspector.

1 Like

That doesn’t seem to work. I’ve attached a screenshot of what I inputted into the CSS field and what it looks like. I’ll also need CSS for the contact button text if you don’t mind.

Is there any way to just replace it with a button like I have on the other pages? That would make it a lot easier

The CSS for the buttons on the other pages is overriding the theme color settings for the site title because I’ve made the site title a link to the homepage, and the CSS is changing the color of links on the entire page including the title. So I need some way to separate the color of the Title fro the page link colors. If that’s possible.

Thanks for your help!

Here’s a link to the site now, I’ve improved the look of the buttons

Start it with a .
.form-…

1 Like

How about changing the text color of the button and the text hover color? I looked up text color code, and tried adding it, but it didn’t work. It’s currently unreadable… You can see the button now though!

https://www.ashleyhalcyone.com/contact/

Still would be easier to just replace it with a CSS button but maybe that’s not possible

Thanks again

I have no idea if you can substitute the button, but I doubt it.
But, if you are willing to learn a little basic CSS you can style it anyway you want.

For the text color you just target the same CSS selector and adjust
.CSSselector{color: Your Color Here;}
The sudo states like hover, you select the Same CSS target and add :hover

Check this site for examples: https://www.w3schools.com/cssref/sel_hover.asp

1 Like

can you elaborate a little more? Sorry I’m stupid about code. Once I get the code I can do it, but I can’t figure out the code. What you wrote isn’t working…

Here’s another screenshot. Thanks so much for your help.

Hmmm.
There’s a rogue hex code #919191 in the CSS somewhere.

Try adding !important to the styling you need.
That should override it.

.form-input-button
{color: #000000 !important;
}

1 Like

That worked! Thanks! This is labor intensive for one button. The hover isn’t working, and when the cursor hovers over the button, it doesn’t turn Into a finger pointing hand, so it doesn’t seem like a link. I guess people will figure it out, but I’m not sure why it doesn’t act like a link. Here’s another screenshot of my hover code.

In the CSS rule you have there for hover try adding this line too:

cursor: pointer;

I think what @swilliam tried to guide you toward is a greater degree of self-sufficiency for things like this. Learning a little CSS need not be time consuming or hard work, it’s certainly not difficult to get started with the basics. You might even enjoy it.

After that you can make as many buttons as you like and have them look and behave however you wish.

2 Likes

Yes, I’m sorry for asking for help. I would like to learn some CSS for stuff like this in RapidWeaver. But I’ll just e honest, I’m fighting a chronic illness right now and just can’t handle learning something that would be difficult for me even when healthy. So I’m hoping you all will help. I’ve hired someone to help me with my personal website which I’m also re-making at the moment. So I’m definitely grateful.

That didn’t work, at least not any of the places I tried adding it. (I tried sticking it in 3 different places as I’m not certain where it belongs. :slight_smile:

Thanks again!

Here’s a screenshot showing the code and the result. I’ll also publish the page with this CSS code in case that helps.

Ok. Remove whatever you added from my previous post and instead paste this in underneath the css you already have as an additional snippet:

.form-input-button:hover {
    cursor: pointer;
}

Don’t forget the leading dot ‘.’ as it matters.

You don’t need to apologise for asking for help - that is not what I meant at all. There is no problem coming here and asking for CSS - there are plenty users here who will happily provide it for you - no questions asked. I genuinely mean that using CSS to style your pages is a lot of fun and a great way to learn more about how the web works as well as stimulating one’s creativity. That’s all.

Sorry to hear about the illness.

3 Likes

Yes! That got me a pointing finger over the button when hovering.

Would still be nice to have a hover color change if anyone knows how.

I agree about CSS, it’s just one of those things that’s jargony and not up my alley and I really hate learning it. But I like customizing my own website. That’s why I use RapidWeaver, although there’s still a lot of learning necessary to figure out how to use all the various stacks and plugins.

Thanks!

Try using (replace the previous rule with):

.form-input-button:hover {
    cursor: pointer;
    background-color: lightgreen !important;
    color: slategray !important;
}

Naturally you can change the color names to anything you prefer (that are supported), I just thought those matched the background image quite well.

2 Likes