1. dautrich
  2. Sherlock Holmes The Voice
  3. Site Showcase
  4. Tuesday, 21 March 2023
  5.  Subscribe via email
There is no doubt that SKYLAR_J4 is an excellent template. Apart from 6 color schemes, there is a cornucopia of configuration options that allow to make every website unique.
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
Attachments (12)
References
  1. https://www.neudorf-mkk.de
Accepted Answer Pending Moderation
0
Votes
Undo
Hello everybody

Starting with Skylar_J4 version 1.1.12, Ciaran began to revamp the mobile menu. As a consequence, the CSS modifications in chapter "Some modifications to the mobile menu" of my post above are no longer valid. So don't use them any more.

Regards

Rolf
  1. more than a month ago
  2. Site Showcase
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
A brilliant resource dautrich with some excellent tips. Thank you for sharing! :) :)

Ciaran
  1. more than a month ago
  2. Site Showcase
  3. # 2
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok