Small enhancements – how to change

Mauer Themes Support Storyteller Small enhancements – how to change

This topic contains 6 replies, has 2 voices, and was last updated by  Paul 1 year, 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #844

    ferdinand98
    Participant

    Hello,

    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

    #845

    ferdinand98
    Participant

    1 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.

    #850

    Paul
    Keymaster

    Hello 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,
    Paul

    #859

    ferdinand98
    Participant

    Hi 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,
    Ferdinand

    #860

    ferdinand98
    Participant

    I 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?

    http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click

    .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 1 year, 11 months ago by  ferdinand98.
    #862

    ferdinand98
    Participant

    I 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;
    }
    }
    #865

    Paul
    Keymaster

    Ferdinand,

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Small enhancements – how to change’ is closed to new replies.