- Details
- Written by: Alex Walker
- Category: Kickstart Cassiopeia
- Hits: 46
/* Change the height of the Header */
.header {height: 200px;}
/* How to hide the thin white line on the home */
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Madimi+One&display=swap" rel="stylesheet">
/* Background colour of mobile menu */
Please add the following css code to your custom css section in the module options:
.navbar-collapse {background-color: #000;}
Where the #000 now stands for black, but you can simply add any other hex color code here.
IF The Off canvas menu module is used then the background colours can be changed there in Settings.
The article info, such as author, creation date, views etc, by default is displayed below each other.
You can easily change this using a CSS hack. Always make a backup first!
/* Add the following line to your custom CSS section for article info in horizontal /*
dl.article-info{margin-bottom: 10px;padding-bottom: 6px;color: #349dd1; display: inline-flex; width:100% } dl.article-info dd {margin-right: 40px}
Creating nice layouts for your blog pages is essential. Setting image height is easy.
.columns-2 .left.item-image {height: 200px;} .columns-2 .left.item-image img {height: 200px;}
You can change the CSS to your liking of course. This example only works if you have 2 columns set (.columns-2) in the settings of your blog. If you have 3 columns, change the code to suit your needs. Read this article for more info.
This option sets the height of each image to 200px. So it could mean that your X and Y scaling of the image will not be proportional. only use this is images you use are sort of the same, in that case, there is little to no need to exactly slice the images the same height.
COLOUR SLIDER
1 is quite simple. just choose the colour, 2 Selecting the opacity will allow your colour to be somewhat transparent. For instance, if you use a background image you can set the colour to be transparent, to let the image be somewhat visible, like this:
HOW TO ADD COLOUR TO LINKS IN ARTICLES
.com-content-article__body a {color: #F67A14}
CHANGE MOBILE MENU COLOUR
To set the background-color for your mobile menu please read this article!
Please add the following css code to your custom css section in the module options:
.navbar-collapse {background-color: #000;}
Brand logo text and tagline
Go to the custom css section of the module, and add the following css:
.brand-logo{font-size: 22px;}
.site-description {font-size: 20px !Important;}
Where you can change the brand logo text and tagline to the size you want them to be.
WHEN MENU INTERFERES WITH LOGO WHEN SET TO NEXT
When having the option set that the menu is next to the logo, in some cases the menu aligns left, interfering with the logo.
You can solve this by adding a custom css rule:
.container-header .mod-menu { flex-direction: row-reverse; }
- Details
- Written by: Alex Walker
- Category: Kickstart Cassiopeia
- Hits: 41
If the popup does not display as intended make sure you have not put ' inbetween any words'.
If you remove the ' ' then the popup will display. Please don't ask me why!!!
- Details
- Written by: Alex Walker
- Category: Kickstart Cassiopeia
- Hits: 58
If you use SP Pagebuilder then this code is required in order to change the text colour of the mobile menu:
.sidenav a { color: #aac800 !important;}