I just want to make my Book a Lesson button bigger and couldn’t find a way to do that.
Paste the code below into the “CSS” tab in the site wide code area: Settings > Code > CSS:
#stacks_in_93_page0 a:link, #stacks_in_93_page0 a:visited
{
padding: 10px 40px !important;
font-size: 20px !important;
}
You can change the button and font size by adjusting the numbers with px by them until you find the look you’re after. Also, overriding simple CSS like this is one of the best ways to get familiar with code, not to mention it’s lots of fun too.
Hope that helps!
2 Likes
Hi Dan,
Thanks for getting back to me, and so quickly! I pasted the code where you showed me but I’m not familiar with how to get to the code you showed me in the example below. If you could give me the steps to getting that window open, then I think I could do it.
1 Like
I love the “Press” button stack from One Little Designer - So many options! Can’t tell if this will upload, but here’s something I did recently. Normal button, Hover effects, Click effects. I would check it out - Out of my 8 million or so button stacks, by far the most versatile!
1 Like
@JohnSherry Just copy and paste it in this this area…
Thanks Dan,
I actually did that and changed all of the numbers, substantially but I don’t see any change in the preview…
Hey Rob,
Good to hear from you! Thanks for the suggestion but I just like the look of the Stacks button better, although so far I don’t seem to be able to make it any bigger.
Try just using:
#stacks_in_93_page0_button {
font-size: 1.7em;
}
And paste it into the page CSS container. Should work.
The code is referencing a specific instance of the button which exists on the home page. Add the code to the css container for that page only. Different pages will use different ids. Confirm that button is changing size ok then we can dig up the other ids too.
I updated my previous reply to try to make it clearer.
Not sure why Dan’s fix isn’t working for you. I wouldn’t put it in sitewide code as you are using an id selector stacks ID’s are per page only.
I just tried it, and it works for me in preview. Perhaps the ID has changed from the link you gave above. No way for us to tell without you publishing what you have. That’s why I try to avoid using the “Stacks ID” as a selector.
I probably would try using a Foundry Button Stack, since your site is Foundry.
But if you want to use the default button, here is a way that would work for any button on any page.
Add a class name to the button, in my example I’m adding the class name large-button.
Now add the following CSS to either site-wide or page-specific CSS code area:
.large-button a{
padding: 20px 100px!important;
}
Now change the values to what you want. In the example, the first number is for top and bottom and the second number is for left and right padding.
Add Class
Code Are on page inspector
Preview:
I published with the code in both the Guitar Lessons page and in the site wide CSS but it seems unchanged.
Forget the guitar lessons page - that is never going to work because the css is targeting only the specific instance of the button, the ID, that we extracted from the html on the home page, because that was the page link you shared, along with the initial question back at the beginning.
Now, if that code isn’t working then I have a question for you:
Have you replaced the button stack in the local copy of the project you are testing and previewing in?
The simplest explanation I can think of is that you have deleted then re-added the button in your project locally. Each new instance of the button gets a unique ID and this would explain why the code ( which is targeting the ID of the original button ) is not having the desired effect.
Short of that theory, I don’t know why it isn’t working because it’s certainly working when I visit your site and apply that CSS using Chrome Dev tools.
To get this to work we’d need to know the up to date IDs of all the buttons OR I suggest switching to a button stack or stacks that allow you to apply a “class” to the button. That way the CSS rule could target the class and update all the buttons you assign into that class, in one go.
1 Like
Looks to me like he’s using stacks 4, that allows you to add a class to pretty much any stack including the built-in button being used.
That’s exactly why I try and avoid using ”stacks assigned ID’s” as selectors for custom CSS.
The steps I outlined above work. I tested them and they work. They’ll work on any and every button that has the class added.
1 Like
John,
The code above in the screen printand given has stacks_in_93_page0 as the stacks assigned ID.
The home page button has a Stacks assigned ID of stacks_in_93_button, the Lessons page has an. ID of stacks_in_109_button.
That’s why it doesn’t work. They would have to match. You would need to change that.
It looks like you are using Stacks 4.12 now so the class field will be there.
BTW Everyone,
Looks like stacks no longer puts the page number on the ID’s @isaiah? So anyone who is using the Latest stacks and has custom CSS using stacks assigned ID’s your site will be broken unless you change the ID’s to the new format.
1 Like
I am a KISS(Keep It Simple Stupid) GUY…try sweet button stack…lots of controls!!!
Not all this code crap!!!
Thanks to everyone for your input! As it turns out, a key element is putting in large-button into the CSS classes box in the Stacks inspector. Then the code in the HTML inspector started working. So I took the code that teefers posted and added the font size code from indridcold and played around with the sizing a bit and the button is much more robust! I did this on the three pages rather than site wide. You can check it out if you like.
johnsherry.com
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.