Mauer Themes › Support › Storyteller › Small enhancements – how to change
- This topic has 6 replies, 2 voices, and was last updated 4 years ago by
Paul.
-
AuthorPosts
-
March 27, 2017 at 1:20 pm #844
ferdinand98
ParticipantHello,
I just bought the theme. How can I adjust the following things, I’ve seen those questions also been asked by other users:
Website: http://ferdinandlie.com/1. Regarding ‘Blog’, I want the popup menu to appear upon hoovering, so not when I click on it. How can I do this?
2. When I create a new page, it uses a big placeholder image with the title. How can I get rid of this format – I just want the title without anything around it. Plain and simple
3. How can I add subscription box as demonstrated in theme demo?
4. Is it possible to make the top bar (with social media icons) stand more out? For example highlight on hoovering? Or make icons bigger?Thanks
March 27, 2017 at 6:41 pm #845ferdinand98
Participant1 more question:
5. How can I remove the ‘Sorry, no posts matched your criteria’ message whenever there’s a category without posts yet? I tried removing the text ‘Sorry, no posts matched your criteria’ in the page.php and single.php, without luck
By the way, question 3 and 4 are solved.
March 28, 2017 at 11:44 pm #850Paul
KeymasterHello Ferdinand,
1.
The menu in this theme runs on Bootstrap framework. You can have the submenu shown on parent menu hover in Bootstrap by using the following jQuery code:$(document).ready(function() { var navbarToggle = '.navbar-toggle'; $('.dropdown, .dropup').each(function() { var dropdown = $(this), dropdownToggle = $('[data-toggle="dropdown"]', dropdown), dropdownHoverAll = dropdownToggle.data('dropdown-hover-all') || false; dropdown.hover(function(){ var notMobileMenu = $(navbarToggle).size() > 0 && $(navbarToggle).css('display') === 'none'; if ((dropdownHoverAll == true || (dropdownHoverAll == false && notMobileMenu))) { dropdownToggle.trigger('click'); } }) }); });
You can add this code to your website by using this plugin. Once you install and activate the plugin, in your Admin Panel please go to Appearance > Custom JavaScript. Paste the code. And click ‘Save & Publish’.
2.
You can achieve that by adding the following CSS code:body.page-template-default .entry-full .entry-title { color: #242a33; font-size: 4.2rem; line-height: 1.5em; letter-spacing: .2em; margin-top: 9.3rem; } @media (min-width: 500px) and (max-width: 991px) { body.page-template-default .entry-full .entry-title {font-size: 3.6rem;} } @media (max-width: 499px) { body.page-template-default .entry-full .entry-title {font-size: 2.3rem;} } body.page-template-default .entry-full .entry-thumb { height: 21.3rem; background-image:none!important; } body.page-template-default .entry-full .entry-thumb-overlay { display: none; }
Insert it by using the same plugin. Only this time you want to go to Appearance > Custom CSS. Paste the code. And click ‘Save & Publish’.
5.
This text is contained in one of the content-….php files in your installation — depending on the layout you are using. You seem to be currently using the Masonry layout. So the text is in the content-masonry.php layout. Around line 121.Please mind that if you just delete it from there, you also won’t have any text in other cases of empty queries (like when the search returns nothing, an empty tag or date archive is displayed, etc.)
To remove this text only from empty category archives, please replace this line:
<p class="text-center"><?php esc_html_e('Sorry, no posts matched your criteria', 'mauer-storyteller'); ?></p>
with this one:
<p class="text-center"><?php if (!is_category()) {esc_html_e('Sorry, no posts matched your criteria', 'mauer-storyteller');} else {esc_html_e('Empty category', 'mauer-storyteller');} ?></p>
You can change the ‘Empty category’ text to anything you want, including an empty string.
Please mind that this change will be overwritten if you update the Storyteller theme, unless you make it in a child theme.
Thank you for using Storyteller. If you enjoy the theme, I would be very grateful if you could rate it 5 stars on ThemeForest. This takes a moment and helps a lot. Thank you.
Kind regards,
PaulMarch 29, 2017 at 4:50 pm #859ferdinand98
ParticipantHi Paul
Thanks for your answer
It works except for solution 1 the menu bar.I’m trying to find the error, but I can’t find it – could you please take another look?
Thanks a lot,
FerdinandMarch 29, 2017 at 4:57 pm #860ferdinand98
ParticipantI managed to find this alternative solution on Stackoverflow, by using CSS.
Only problem now is that on Mobile website the bar popup isn’t nice, so for Mobile I’d rather use the original one. Any ideas how to change this?
.sidebar-nav { padding: 9px 0; } .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; } .dropdown-menu li:hover .sub-menu { visibility: visible; } .dropdown:hover .dropdown-menu { display: block; } .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { margin-top: 0; } .navbar .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px; } .navbar .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid #fff; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px; }
-
This reply was modified 4 years ago by
ferdinand98.
March 29, 2017 at 5:53 pm #862ferdinand98
ParticipantI managed to fix it after all with this code:
/*Navbar*/ @media (min-width: 768px) { .sidebar-nav { padding: 9px 0; } .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; } .dropdown-menu li:hover .sub-menu { visibility: visible; } .dropdown:hover .dropdown-menu { display: block; } .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { margin-top: 0; } .navbar .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px; } .navbar .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid #fff; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px; } }
March 30, 2017 at 2:11 pm #865Paul
KeymasterFerdinand,
I’m glad to know you managed to achieve the menu behavior you wanted. I offered you a solution based on JavaScript, and you used one based on CSS. Both work fine. I’ve tested the JS solution before posting it, and it worked. I guess you may have pasted it as CSS code or incompletely — that’s why it did not work out for you. Anyway, I’m glad to know you came up with a working CSS solution.
Thank you for using Storyteller. I would really appreciate if you could rate the theme (or the support) on ThemeForest. This really helps a lot.
Best,
Paul. -
This reply was modified 4 years ago by
-
AuthorPosts
- The topic ‘Small enhancements – how to change’ is closed to new replies.