CustomCSS Stack
CustomCSS Stack
Add custom css to groups of Stacks:
Site Wide. Page Specific. Stack Specific.
Add custom css to groups of Stacks:
Site Wide. Page Specific. Stack Specific.
Site Wide. Page Specific. Stack Specific.
RapidWeaver Stacks add-on info:
This is an old Stack from 2012 but still useful – if you know a little CSS or want to play around… I didn't say fool around!
Guide: There's three ways you can add custom css
1) Stack Specific CSS
2) Page Specific CSS
3) Site Wide CSS
1) Stack Specific
Just add your css directly in the Stack. Fast and easy… if you want to add the same styling to another RapidWeaver Stacks page you can copy paste the Custom CSS Stack to the other page and reuse your CSS. But what if you want to adjust the CSS? You'd have to do it on every Stack… so this options is for CSS you only need to use once.
2) Page Specific CSS
In the CustomCSS Settings choose your CSS Class Name. Default is none. You can choose between: pagecss1, pagecss2, pagecss3 up to pagecss9.
Now go to: Inspector > HTML Code (middle) > CSS.
Start typing your css by entering your chosen CSS Class.
.pagecss1 {
background: orange;
padding: 10px 20px;
}
.pagecss2 {
background: pink;
padding: 10px 20px;
}
3) Site Wide CSS
Same procedure as above but you just enter your custom css here:
Pages (menu) > Settings > Code > CSS
.pagecss1 {
background: orange !important;
}
You can also – if you want to add css to ALL CustomCSS Stacks – use:
.customcss {
border: 2px solid black;
margin: 25px;
}
Remember to always type a semicolon at the end you your css and between every css statement. Also remember never to add a space between ex. 20px or 120%.
Learn how to code HTML & CSS:
Visit Codeacademy, W3Schools, HTML for Beginners — Ultimate Guide or HTML.com for more info about how to write CSS & Html.
Keywords:
RapidWeaver, stacks, responsive, free stack, custom css.
This is an old Stack from 2012 but still useful – if you know a little CSS or want to play around… I didn't say fool around!
Guide: There's three ways you can add custom css
1) Stack Specific CSS
2) Page Specific CSS
3) Site Wide CSS
1) Stack Specific
Just add your css directly in the Stack. Fast and easy… if you want to add the same styling to another RapidWeaver Stacks page you can copy paste the Custom CSS Stack to the other page and reuse your CSS. But what if you want to adjust the CSS? You'd have to do it on every Stack… so this options is for CSS you only need to use once.
2) Page Specific CSS
In the CustomCSS Settings choose your CSS Class Name. Default is none. You can choose between: pagecss1, pagecss2, pagecss3 up to pagecss9.
Now go to: Inspector > HTML Code (middle) > CSS.
Start typing your css by entering your chosen CSS Class.
.pagecss1 {
background: orange;
padding: 10px 20px;
}
.pagecss2 {
background: pink;
padding: 10px 20px;
}
3) Site Wide CSS
Same procedure as above but you just enter your custom css here:
Pages (menu) > Settings > Code > CSS
.pagecss1 {
background: orange !important;
}
You can also – if you want to add css to ALL CustomCSS Stacks – use:
.customcss {
border: 2px solid black;
margin: 25px;
}
Remember to always type a semicolon at the end you your css and between every css statement. Also remember never to add a space between ex. 20px or 120%.
Learn how to code HTML & CSS:
Visit Codeacademy, W3Schools, HTML for Beginners — Ultimate Guide or HTML.com for more info about how to write CSS & Html.
Keywords:
RapidWeaver, stacks, responsive, free stack, custom css.
Stacks settings: