have you tried one page scroll theme it has sliding sidebar and you can set customize the width and height using child theme.
I would like to stick to boardwalk or quite similar theme.
Certainly not a dumb question. 🙂
To change the width, try something like this in your custom CSS, tweaking the width values as you want.
.site-content .sidebar {
left: auto;
right: 0;
width: 25%;
}
.sidebar .sidebar-content {
width: 400px;
}
What kind of opacity change did you have in mind?
background-color: rgba(0, 0, 0, 0.6);
This is probably the basic sort of CSS you’d need, where 000 equals black and 0.6 equals 60% opaque. You would add this line to the .sidebar-content declaration above, editing the values as you like.
Don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.
An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS. You could also install a standalone custom CSS plugin if you prefer.
I second what Kathryn said. Also if you would like to change the opacity back to 100% at a certain width, like http://tomvanarken.nl/ does at 700px, you just need a media query in your custom CSS.
A media query tells the screen, “Hey, at this width do this.” If you add the background-color: rgba(0, 0, 0, 0.6); Kathryn suggested, then add this at the bottom of your custom CSS:
@media only screen and (max-width: 700px) {
.sidebar .sidebar-content {
background-color: rgba(0, 0, 0, 1);
}
}
This will change it to solid black when the screen is 700px wide.
