Forum Replies Created

Viewing 15 replies - 391 through 405 (of 681 total)
  • There’s no need to setup a slider. However, you do need a child theme. Rather than sending you to learn how to create one, since you’re “not a techie”, I’ll just tell you what to do, step by step.
    1. Create a new folder in your /wp-content/themes called customizr-child
    2. Open a notepad, paste this code in it:

    /*
     Theme Name:     Customizr Child
     Theme URI:      http://mysite.com/
     Description:    My description
     Author:         Me
     Author URI:     http://mysite.com/
     Template:       customizr
     Version:        1.0.0
    */

    and save it as style.css in that folder. Make sure that encoding is not Ascii, but UTF8 (it’s in the save panel options, somewhere lower). Also, make sure the file is called style.css, not style.css.txt!
    3. Open another notepad and paste this code in it:

    add_filter('tc_navbar_display', 'prevent_output_of_this');
    add_filter('tc_logo_title_display', 'hide_output_of_this');
    add_filter('tc_slider_display', 'this_is_my_image');
    function prevent_output_of_this($output) {
    return $output;
    }
    function this_is_my_image($output) {
    return 'Replace me with your image!';
    }

    4. Replace “Replace me with your image!” with the actual html for displaying your image (<img src=”path_to_your_image” />)
    5. Save this second notepad as functions.php, also in the customizr-child folder. Upload the new folder, with both files in it, onto your server, in the /wp-content/themes folder, where your customizr folder is.
    6. Go to themes in WP admin and activate Customizr Child.

    That’s about it.

    @enclick, leave the tagline untouched and put a display:none on it. You want it properly displayed by your website name in search engine results, don’t you?
    Just output the replacement html after it, by filtering. Tweeter Bootstrap buttons are here.

    It’s not the file. I loaded it separately and it loads instantly. It’s something else, that’s interfering. Try to suppress the mods you have made to the theme, until you find the culprit. Disable plugins one by one, or css snippets or custom functions. You’ll find it. When you do, post it here and we’ll try to fix it.

    Have you tried changing the file’s name?

    Use a converter or photo editor and change it from whatever it is to .png 24bits or .jpg 60% quality. If you save it as 60% and can’t spot any loss in its appearance, leave it like that. If not, save it as 80%.

    Should do the trick.

    I’m sorry, I made a small omission. The preg_replace’s in the above solutions both need to have the ‘s’ regex modifier so the dot also matches newlines. And I realised it after the editing time expired.

    So, for first case the preg_replace is:

    return preg_replace(array('%brand span3%', '%'.preg_quote('(<h1>)(.*?)(</h1>)', '%').'%s'), array('brand span10 offset1', '$1{some_escaped_html_for_left_logo}$2{some_escaped_html_for_right_logo}$3'), $output);

    and for the second:

    return preg_replace(array('%brand span3%', '%'.preg_quote('(<h1)>(.*?)(site-logo)(.*?)(</h1>)', '%').'%s'), array('brand span10 offset1', '$1 class="row-fluid">{some_escaped_html_for_left_logo}$2span6 $3$4{some_escaped_html_for_right_logo}$5'), $output);

    The solution depends on what do you want to happen to the left/right logos on narrow screens:
    – would you rather reduce the size of all three and display them on the same row at all times or…
    – would you have the left and right ones float above and below the main logo when the screen is narrow?

    In first case, you need to set some rules to shrink the size of all your logos if the width of the span10 is below some value, using media queries. For example, let’s suppose you want to start shrinking them on displays lower than 980px wide. You’ll need to:

    @media (max-width: 979px) {
    .brand.span10 {
    	position: relative;
    }
    /* this tells the children to use this element as referrence when
     * calculating their width as percentage, not the page width
     */
    .brand.span10 a.site-logo img {
    	max-width: 33%;
    }
    /* set main logo to one third of the span
     */
    .brand.span10 a.right-logo img,
    .brand.span10 a.left-logo img {
    	max-width: 25%;
    }
    /* set max width of the right and left logos, assuming you'll give
     * them these classes, you want them smaller and the'll also have
     * some links on them. If not, addapt your css selectors to your case.
     */
    }

    So this solution makes sure that no matter how narrow the screen, all three logos will shrink accordingly and remain on one line.

    The other solution is to create a .row-fluid structure inside your .brand.span10 which will divide that span into 12. Assign each logo a spanX, spanY and spanZ so that X+Y+Z = 12 and they will maintain the one row formation on wider screens and rearrange one on top of the other on narrower ones.

    Of course, for this to work you need to adapt the preg_replace on 4th line to add your extra logos.
    For first case (all logos in one line):

    return preg_replace(array('%brand span3%', '%'.preg_quote('(<h1>)(.*?)(</h1>)', '%').'%'), array('brand span10 offset1', '$1{some_escaped_html_for_left_logo}$2{some_escaped_html_for_right_logo}$3'), $output);

    You need to replace {some_escaped_html_for_{direction}_logo} with actual escaped html (escaping means you need to put backslashes before apostrophes or it\’ll break). For example, replace the accolade for right logo with

    <a href="some_custom_link" title="some_custom_title" class="right-logo"><img src="some_path_to_some_right_logo" alt="some_alt_for_right_logo" /></a>

    For second case:

    return preg_replace(array('%brand span3%', '%'.preg_quote('(<h1)>(.*?)(site-logo)(.*?)(</h1>)', '%').'%'), array('brand span10 offset1', '$1 class="row-fluid">{some_escaped_html_for_left_logo}$2span6 $3$4{some_escaped_html_for_right_logo}$5'), $output);

    Mind that in this case your {escaped html} needs to have span3 class assigned to the anchor. Example:

    <a href="some_custom_link" title="some_custom_title" class="right-logo  span3"><img src="some_path_to_some_right_logo" alt="some_alt_for_right_logo" /></a>

    In the example above I used span3 for left and right logos and span6 for middle one. Change 3-6-3 to 2-8-2 or 4-4-4. Just make sure they add up as 12.

    This should solve your problem. By the way, good job on theme customization. I would, however, get rid of the text-shadow on titles in footer and featured pages:

    h1, h2, h3, h4, h5, h6 {
    	text-shadow: none;
    }

    Please note that the solution provided above does not play well on very narrow screens. I haven’t had time to research a better solution but, theoretically, you need to reduce the font size and line height using media queries for narrower screens, so the text doesn’t go out of the slider in those cases. Alternatively, you could just impose an overflow:hidden on #customizr-slider in your custom CSS:

    #customizr-slider{ overflow:hidden;}

    with the risk of your texts not being fully shown if they take up more space than the slider area. You actually need to decide what is the preferred solution when there’s too much text to fit inside the slider area: you’d rather have it cut off or you’d rather have it displayed and create a bit of space above and below the slider.

    Yes, it’s possible. Assuming your logo is located @ “/wp-content/uploads/NAMEOFFILE.png” and the alternatives are:
    “/wp-content/uploads/alternative_1.png”,
    “/wp-content/uploads/alternative_2.png”,
    “/wp-content/uploads/alternative_3.png”, etc…
    add this in your child theme’s functions.php:

    add_filter('tc_logo_title_display', 'my_logo_title_display');
    function my_logo_title_display($output);
    $default_logo_location = '/wp-content/uploads/NAMEOFFILE.png';
    if (is_page(array('XXX')))
    	return preg_replace('|'.preg_quote($default_logo_location,'|' ).'|', '/wp-content/uploads/alternative_1.png', $output);
    elseif (is_page(array('YYY')))
    	return preg_replace('|'.preg_quote($default_logo_location,'|' ).'|', '/wp-content/uploads/alternative_2.png', $output);
    elseif (is_page(array('ZZZ', 'WWW')))
    	return preg_replace('|'.preg_quote($default_logo_location,'|' ).'|', '/wp-content/uploads/alternative_3.png', $output);
    else return $output;

    where you need to replace XXX, YYY, ZZZ and WWW with actual id’s of the pages where you want the logo changed and, of course, the actual links to each logo for each case.

    I explained a principle, you could use any WP Conditional tags instead of is_page() and adapt it for some categories, taxonomies, custom post types, tag pages, search results, whatever suits your specific needs.

    @msyachrial: If applied in parent theme, your solution will get deleted on theme update. If used in a child theme, whenever the parent theme will change file structure, due to new features being added, your solution will either not show the new features or just break the website.

    Filtering the output of functions is a much safer solution for any mod.

    I suppose this is what you’re looking for.
    Please try to be more specific in your questions and provide a link to your installation.
    Also, please keep in mind that questions related to theme features have a much higher chance to get a response than general questions on CSS. If you want to go Customizin’, w3schools is by far your best friend.

    The path to your image gets saved in theme options. You can only see it on your computer because you have it cached. Just re-upload it.

    Besides, I don’t think using pdf’s as images is a good idea. .pdf is a proprietary extension of Adobe and browsers do not support this format by default (you need an extension or a plugin for it). It does stand for portable document format and Adobe has indeed invented it to have a standardized syntax for import/export from/to other programs and it is widely used. But still, you should go for .jpg, .jpeg, .png, .gif or .tiff.
    Here‘s a website that could help you export it as an image (just scroll down till “The freeware way”).

    Yes, all php goes inside functions.php of your child theme, which should not be a copy of it’s parent counterpart. If this is the first custom code you add to functions.php of your child theme, open a blank file, put the code below in it and save it as functions.php in your child theme’s folder.

    <?php
    add_action( 'init', 'register_matts_menu' );
    function register_matts_menu() {
        if ( function_exists( 'register_nav_menu' ) ) {
            register_nav_menu( 'matts-top-menu', 'Top Menu' );
        }
    }
    
    add_filter('tc_logo_title_display', 'display_matts_top_menu');
    function display_matts_top_menu($output) {
    	return ( has_nav_menu( 'matts-top-menu' ) ? wp_nav_menu (
            array (
                'theme_location' => 'matts-top-menu',
    			'container_id'    => 'top-menu',
    			'container_class'    => 'menu pull-right'
            )
        ).'<div class="clearall"></div>' : '' ).$output;
    }

    The CSS (4th snippet) goes inside the child theme’s style.css or the custom CSS panel in theme options.
    After this, you need to go to menus and select an existing menu (or create a new one if you need it) for the newly created menu location and save.

    You were sending output before headings, after the ?>.

    Either make sure there’s nothing but the end of file after ?> (no space, no new line, etc) or just remove it (delete the ?> from the end), so the php mode doesn’t end, hence, no output, regardless of how many new lines, tabs or spaces you have before the EoF.

    Ending functions.php without exiting php mode is safe, as it’s a “pure php” file.

    functions.php of your child theme should NOT be a copy of it’s parent counterpart. When just created, it should look like this (empty):

    <?php

    When you start adding functions, you do it from 2nd line on.

    Here’s an article on how to create a child theme for Customizr (or any other WP theme, for that matter).

Viewing 15 replies - 391 through 405 (of 681 total)