There is a limitation, however: The template designer gives his best effort to show the website at its best. But he doesn't know my personal preferences. Maybe I want some more whitespace here, some less whitespace there, the menu items in the third menu level in bold, load Google fonts from a local directory, or whatever you can think about.
Here is where custom.css enters the stage. Over some years, the custom.css of my most important site has grown to more than 600 lines. When I have a new idea, the development tools of my browser (I use Firefox) are my best friends. Here I can try all kinds of modifications. When ready, I can copy the new rule and paste it to my custom.css.
I have to confess that there was more error than trial in the beginning. But after some practice, I will most probably get the desired results.
To share some CSS with the public, I have four examples for you:
- A shadowed logo text
- Some styling for the Weblinks component
- A modification to the page footer
- Some modifications to the mobile menu
A shadowed logo text:
What looks like a graphical image (s. SKYLAR_Logo_Text_1.jpg) is just text with some text shadow CSS, as can be seen in SKYLAR_Logo_Text_2.jpg
Here is the CSS used:
.logo-text {
font-weight: bolder;
text-shadow: 1px -1px 0px hsla(0, 0%, 70%, 1), 2px -2px 0px hsla(0, 0%, 65%, 1), 3px -3px 0px hsla(0, 0%, 60%, 1), 4px -4px 0px hsla(0, 0%, 55%, 1), 5px -5px 0px hsla(0, 0%, 50%, 1), 6px -6px 0px hsla(0, 0%, 45%, 1), 7px -7px 0px hsla(0, 0%, 40%, 1), 8px -8px 0px hsla(0, 0%, 35%, 1), 9px -9px 0px hsla(0, 0%, 30%, 1);
}
Styling for the Weblinks component
I didn't really like the way how SKYLAR_J4 showed the Weblinks:
- There is no heading on the Weblinks Categories page (s. SKYLAR_Weblinks_Categories_Original.jpg).
- The format of the heading on the list for a Weblink category is not in line with other content pages.
As a first measure, I created a small module of type Custom HTML as a substitute for the missing page heading and published it in module position contenttop-c, assigning it to the respective menu (s. SKYLAR_Weblinks_Categories_With_Module.jpg). Btw: This module, which got the item ID #mod-custom228, also shows on the subpages.
Then I defined a little arrow icon (.PNG) to be used for the single links display in the options of the Weblinks component.
The list looks slightly better now (s. SKYLAR_Weblinks_Category_List_With_Module_and_Icon.jpg), but still needed some refinement.
Finally, I ended up with an acceptable result (s. SKYLAR_Weblinks_Categories_With_Module_Final.jpg and SKYLAR_Weblinks_Category_List_With_Module_and_Icon_Final.jpg).
Here is the CSS:
.com-weblinks-categories.categories-list a {
font-size: 24px;
font-weight: bold;
}
.com-weblinks-categories.categories-list {
margin-top: 15px;
}
.com-weblinks-category__items a {
margin-left: 12px;
font-weight: bold;
}
.com-weblinks-category__items p {
margin-left: 25px;
}
.weblink-category h1 {
font-size: 24px;
font-weight: bolder;
max-width: 90%;
}
#mod-custom228 h2 {
margin-bottom: -6px;
}
A modification to the page footer
I typically use the page footer for the copyright and for an additional menu with menu links to i.e. Legal Disclosure, Data Privacy Statement, Sitemap, Contact, and Login/Logout (s. SKYLAR_Page_Footer.jpg). In the standard setting, to see this footer you need to scroll down the page. For standard displays up to Full HD (1920*1080 pixels), this is a good choice.
But for large displays with a height of more than 1080 pixels, I find it more convenient to have the footer visible all the time. Solution is to make it sticky and to use a media query for the screen height (s. SKYLAR_Page_Footer_Final.jpg).
Here is the CSS:
.container_footer {
padding: 15px;
}
@media screen and (width >= 768px) and (min-height: 1020px) {
.container_footer {
position: sticky;
bottom: 0;
background-color: #f7ebde;
padding: 7px 15px 7px 15px;
border-top: 2px solid #e6c587;
}
}
Some modifications to the mobile menu
The standard mobile menu (s. SKYLAR_Mobile_Menu_Original.jpg) has some drawbacks:
- Menu items with a FontAweSome icon are not shown in a single line.
- The arrows leading to the submenus are too pale in my opinion.
- The font in the submenus is too small.
Also, I wanted more lines on the smartphone display.
The final result looks like SKYLAR_Mobile_Menu_Final.jpg.
And here is the CSS for the mobile menu:
.mm-spn li {
font-size: 18px;
line-height: 1.2em;
}
.mm-spn a {
display: flex !important;
align-items: center;
}
.mm-spn span {
padding: calc((var(--mm-spn-item-height) - var(--mm-spn-line-height)) / 2) var(--mm-spn-item-indent) calc((var(--mm-spn-item-height) - var(--mm-spn-line-height)) / 2) 0px;
}
.mm-spn.mm-spn--navbar::before {
color: white;
opacity: 1;
}
.mm-spn li::before {
opacity: 1;
color: white;
top: 1em;
}
.mm-fa-hoehe {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
Have fun!
Rolf
