WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Live test site at last (31 posts)

  1. chappie
    Member
    Posted 2 months ago #

    My maiden Customizr site has finally made it online - after only 6 months in dev!

    I'm feeling emotional and must reiterate my thanks to the people who really created my site, namely: WordPress.org, @nikeo, @rdellconsulting, @electricfeet, @acub, @d4z_c0nf and the many other contributors to the Customizr community.

    If I have broken or abused your code, I apologise.

  2. d4z_c0nf
    Member
    Posted 2 months ago #

    Chappie!!!!!
    This site is huge, and beautiful! Refined in detail.
    Really like it, my compliments.

  3. chappie
    Member
    Posted 2 months ago #

    @d4z_c0nf - you're very kind but I'm sure you can recognise your DNA all over it.

    Mostly, it looks the same as it does on my localhost - but I'm seeing some issues in my older version of Safari (v5.0.6 running in Mac Os 10.5.8).

    My custom page title image (small logo instead of the default pencil icons looks fine in Safari v6.0.2 (and current versions of Chrome and Firefox)but is a no-show in v5.0.6 (and also no-shows in a similarly aged Chrome v21.0.1180.90).

    And the keyboard-entered green checkmark symbols at the top of my Price List page also don't show in Safari v5.0.6 or in any version of Chrome (but do appear in current Firefox).

    Is this the price of progress or can I fix it? TIA.

  4. d4z_c0nf
    Member
    Posted 2 months ago #

    You have this in the style.css:

    background-image: url("http://localhost:8888/sitename/wp-content/uploads/2013/11/bslogo40x40_on_grey.png");

    you need to change it to the new url?

  5. chappie
    Member
    Posted 2 months ago #

    Duh! Well spotted, d4z_c0nf - that cured it. (Scratching my head over the fact that the broken URL didn't stop new browsers displaying it - or could they have been fetching the image from cache?)

    I guess I can fix my green checkmark keyboard character by linking to some external clipart instead.

    I've also found an outdated URL in my functions.php - but it doesn't appear to be hurting the function:

    add_filter('tc_slide_link_url' , 'my_slide_custom_link', 10, 2);
    function my_slide_custom_link( $slide_link , $image_id ) {
    
        $image_links = array(
            '2837' => '?page_id=171/#reviewform',
            '2996' => '?page_id=19/#bourneend',
            '2997' => '?page_id=19/#kilngreen'
        );
    
        //does nothing if the requested image_id is not a key of the array
        if ( ! array_key_exists( $image_id, $image_links ) )
            return $slide_link;
    
        //else returns the custom link
        return 'http://localhost:8888/sitename/' . $image_links[$image_id];
    }

    In php, can I replace 'http://localhost:8888/sitename/' with just '/'?

  6. d4z_c0nf
    Member
    Posted 2 months ago #

    what about using get_the_permalink() ?
    You'll have:

    $image_links = array(
            '2837' => get_the_permalink(171).'/#reviewform',
            '2996' => get_the_permalink(19).'/#bourneend',
            '2997' => get_the_permalink(19).'/#kilngreen'
        );

    And

    //else returns the custom link
        return $image_links[$image_id];

    does this work?

  7. chappie
    Member
    Posted 2 months ago #

    Thanks d4z_c0nf - that seems to work fine…although I don't know how to tell whether the //else bit is working or not.

    Would it continue to work if I were to change my permalink setting, eg to "post name"?

  8. d4z_c0nf
    Member
    Posted 2 months ago #

    Sorry totally missed the part of the keyboard-entered green checkmark symbol . What is? and where?
    The one before "NEED a little pampering AND a discount? See our Treats." for example? What is?

  9. d4z_c0nf
    Member
    Posted 2 months ago #

    Yes it will work.
    Don't get this part:

    although I don't know how to tell whether the //else bit is working or not`

    Just a thing, those anchors are supposed to be in the same page of the slide?

  10. chappie
    Member
    Posted 2 months ago #

    keyboard-entered green checkmark symbol . What is?

    I found it in my Mac Os Character Viewer which displays every possible symbol in a font set using various keyboard combinations. This particular one is described as:

    "WHITE HEAVY CHECK MARK
    Unicode: U+2705, UTF-8: E2 9C 85"

    …which seems fine by modern Safari and Firefox but Chrome and old Safari don't want to know.

  11. chappie
    Member
    Posted 2 months ago #

    Just a thing, those anchors are supposed to be in the same page of the slide?

    Yes they are.

  12. chappie
    Member
    Posted 2 months ago #

    Don't get this part:

    although I don't know how to tell whether the //else bit is working or not`

    Well, I don't know what the php means -- and it anyway seemed to be working fine when the URL was set to my localhost but I didn't know what to look for when testing.

  13. d4z_c0nf
    Member
    Posted 2 months ago #

    Yes they are.

    :D
    So you don't need the get_the_permalink() part, and also you'll see the page scroll down to the anchor without reload itself.

    $image_links = array(
            '2837' => '#reviewform',
            '2996' => '#bourneend',
            '2997' => '#kilngreen'
        );

    "WHITE HEAVY CHECK MARK
    Unicode: U+2705, UTF-8: E2 9C 85"

    …which seems fine by modern Safari and Firefox but Chrome and old Safari don't want to know.

    Cannot see it neither here in linux (chrome, ff, seamonkey, opera), but I can see this other checkmark:
    http://www.fileformat.info/info/unicode/char/2714/index.htm

  14. chappie
    Member
    Posted 2 months ago #

    So you don't need the get_the_permalink() part

    I didn't! Works much better now, thanks.

    Unicode

    Thanks for this. I'm out of my depth with unicode stuff so will probably just link to a graphic, which I'll upload.

  15. d4z_c0nf
    Member
    Posted 2 months ago #

    Sorry didn't get chappie, are you using this array now?

    $image_links = array(
            '2837' => '#reviewform',
            '2996' => '#bourneend',
            '2997' => '#kilngreen'
        );
  16. chappie
    Member
    Posted 2 months ago #

    are you using this array now?

    Yes. Works fine for localhost too.

  17. ElectricFeet
    Member
    Posted 2 months ago #

    Wow! Is that smart or what? Worth waiting for.

    The page icons: Show fine on Firefox 29.0.1 and Safari 7.03. on a Mac and on iOS 5.1.1 (on an iPad first gen).

    Green checkmarks: Show fine on all the above (and the iOS Ipad is the one that normally gives problems on old stuff). However, just picking a unicode character because you like it often results in failure. It's a general rule of thumb that if you like a unicode character, it will not display on your site :-) (c.f. the rule of thumb that says that the correct way to insert a USB plug is always the opposite of what you try first.)

    A better approach would be to use CSS and a Genericons icon, as you know that you have this at your disposal with Customizr installed. You could take the opportunity to do away with all the individual check-mark symbols and all the individual inline styling (to centre the paragraphs, change their colors, font-sizes etc.) ... and the spans etc.

    What you have here is a list. So you can enter it in your page as:

    <ul class="price-page-bullets">
    	<li>This is text</li>
    	<li>This is more text</li>
    	<li>This is yet more text</li>
    	<li>This is a final line</li>
    
    </ul>

    Then add the following to your CSS:

    /* Take off bullets */
    ul.price-page-bullets {
        list-style: none;
    }
    /* Colour the odd-numbered list items */
    .price-page-bullets li:nth-child(odd) {
        color: #5a5a5a;
    }
    /* Colour the even-numbered list items */
    .price-page-bullets li:nth-child(even) {
        color: #808080;
    }
    /* Add a Genericons check-mark */
    .price-page-bullets li:before {
        color: #8F48E2;
        content: "\F418";
        font-family: "genericons";
        font-size: 26px;
        vertical-align: bottom;
    }
    /* Style the text in the price-page bullets */
    .price-page-bullets li {
        font-size: 16px;
        font-weight: 700;
        line-height: 200%;
        text-align: center;
    }

    That will add a genericons check-mark icon in super-pink/purple before the text. It will also do all the other stuff, like bold and centre for your text, without you having to repeat it all over and over in your html, which means that if you decide to change it tomorrow, you only have to change the style once, which is what CSS is all about.

    The "else" bit in your code: Simply says "and if Chappie didn't give me a link for a particular slide, then use the slide link that he originally set when he edited the slider.

    Pixel perfectness (coz I know you're a stickler for it): In your style sheet, you have

    .widget-front > h2 {
        margin-bottom: 0;
        margin-top: -5px;
    }

    Change the top margin to -3px, otherwise you shave off the top of the B in "Beauty". And of all the words to shave a couple of pixels off, that is not the one :-)

    Overall it's a brilliant site. Well done!

  18. ElectricFeet
    Member
    Posted 2 months ago #

    I've been nudged by someone off-board :-) to be more precise. In the statement "and if Chappie didn't give me a link for a particular slide, then use the slide link that he originally set when he edited the slider", it's the "then" clause that is equivalent to the "else" bit of your code.

  19. chappie
    Member
    Posted 2 months ago #

    @ElectricFeet - good morning and thank you! I have just woken up from the best sleep I have had for 6 months.

    Thanks for the snippets - which I will embrace as soon as I have finished breakfast. You're right: I know (just) enough to have worked the ul out for myself but I cut a few corners towards the end as I tried to speed up. I love playing with the right code and getting it to work but it can be slow going for learners.

    Thanks for testing too. I think the Page Icons are universally ok now after fixing an errant localhost link in my CSS. The unicode Green Checkmarks were always likely to need fixing after I discovered that some other unicode experiments caused paragraphs to disappear.

    I'll check out the .widget-front margins - I hadn't noticed the close shave!

    Thanks for the php explanation. Tbh, I still don't understand it. Is it saying that the call to action button will revert to the "placeholder" link which @nikeo's snippet requires before it can overwrite with the anchor link? Otherwise, there is no certainty that I would have set any previous link.

    I know all about the USB rule of thumb™ - it's the same rule that makes me buy Apple products 24 hours before they announce a price cut…

    Thank you for all your help over the past 6 months. I have learnt a lot. Still very much a novice though!

  20. chappie
    Member
    Posted 2 months ago #

    @ElectricFeet - just playing with yourul CSS snippet in my localhost site and it does everything it says on the tin -- except give me the icon.

    content: "\F418";
    font-family: "genericons";

    merely adds the text "F418" in front of every line. I thought I had spotted the problem because the genericons website illustrates singe quotes - but that change gave me neither icon nor "F418" text.

    I haven't downloaded the genericon font: are *all* the glyphs embedded in the theme? But when I substituted a glyph which I know comes with the theme, I got the same result, so that's not the real problem.

  21. d4z_c0nf
    Member
    Posted 2 months ago #

    Did you put it in the custom css box or in the child-theme style.css?
    Consider that social icons are genericons too.

  22. chappie
    Member
    Posted 2 months ago #

    I always use the custom CSS box first and if the boy does good, I promote him from the reserves to the main team. I'm guessing you're going to tell me he should have gone straight into the main team.

  23. d4z_c0nf
    Member
    Posted 2 months ago #

    Ok, when you use "\" in the custom css you should escape it with another "\". Look that, if I'm not wrong, every time you change something in Customize you have to re-add the escaping "\".

    content: "\\F418";
    font-family: "genericons";
  24. chappie
    Member
    Posted 2 months ago #

    You were right, d4z_c0nf - when I pasted ElectricFeet's CSS into the style sheet proper, it all worked.

    Thanks for the explanation. But why does the genericon website show the CSS in single quotes, instead of double?

    @ElectricFeet - looks lovely too. Hm…I might play around a bit with some other glyphs.

    I've changed the widget-front margin too so I've nearly finished my homework!

  25. d4z_c0nf
    Member
    Posted 2 months ago #

    :)

  26. chappie
    Member
    Posted 2 months ago #

    @ElectricFeet - looks lovely too. Hm…I might play around a bit with some other glyphs

    Hm, they presumably aren't all embedded. I tried substituting the heart (F461) and nothing showed. Surely a French theme would include the heart glyph? Sacre bleu!

  27. d4z_c0nf
    Member
    Posted 2 months ago #

    Ehehe :D
    Yes not all are included. It depends on the genericons version embedded.
    Anyway if you're particular interested in the heart (really?) you can try the entypo:

    content: "\2665"; /* 2661 for the empty heart */
    font-family: "entypo";
  28. chappie
    Member
    Posted 2 months ago #

    you can try the entypo

    Thanks d4z_c0nf - I'll save that for my next site. For this one, I'm running out of steam/time so I'll stick with F418 and have some lunch.

    I've reached the conclusion that a website is never "finished". It just stops improving when the designer runs out of time, patience or money. A bit like great paintings…

  29. d4z_c0nf
    Member
    Posted 2 months ago #

    Yeah, I always point on the patience to stop :D

  30. ElectricFeet
    Member
    Posted 2 months ago #

    Glad it's working. Sorry I didn't get back to you. I was finishing my magnum opus on Polylang and Customizr. (And I slept a little better for it :-) )

    The genericons font that is included in Customizr is older than the latest, I think. You can see in the Genericons release notes that the heart was included last November. IIRC it's on the (very loooong) list of things to do.

Reply »

You must log in to post.

About this Theme

About this Topic